/* =============================================================
   Eivi Design System — Foundations
   Colors + Typography tokens
   ============================================================= */

@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — PRIMARY (Teal)
     Teal is the dominant brand color. Use for primary actions,
     key illustrations, and the main accent on colored surfaces.
     --------------------------------------------------------- */
  --teal:           #1BBBBB;
  --teal-60:        #74D6D6;  /* 60% base on white (flat) */
  --teal-30:        #BAEAEA;  /* 30% base on white (flat) */
  --teal-15:        #D9F1F1;  /* 15% base on white (flat) */

  /* ---------------------------------------------------------
     COLOR — SECONDARY (Red)
     Red is the counterbalance to teal. Use for emphasis, alerts,
     and as a co-lead with teal in illustrations.
     --------------------------------------------------------- */
  --red:            #F55555;
  --red-60:         #F79797;
  --red-30:         #FCCCCC;
  --red-15:         #FEE6E6;

  /* ---------------------------------------------------------
     COLOR — TERTIARY
     Used to break up monotony when a composition is reading
     "too green" or "too red". Accent role only.
     --------------------------------------------------------- */
  --deep-teal:      #0B6F8D;
  --deep-teal-60:   #6BA7B9;
  --deep-teal-30:   #B2D0D9;
  --deep-teal-15:   #D7E6EA;

  --orange:         #F06349;
  --orange-60:      #F49F90;
  --orange-30:      #F7CDC5;
  --orange-15:      #F9E4E0;

  --brown:          #F1B891;
  --brown-60:       #F5D2BB;
  --brown-30:       #F7E6DB;
  --brown-15:       #F9F1EB;

  /* ---------------------------------------------------------
     COLOR — NEUTRALS
     Text is black by default; greys are for secondary UI only.
     --------------------------------------------------------- */
  --black:          #000000;
  --white:          #FFFFFF;
  --grey-900:       #1A1A1A;
  --grey-700:       #4A4A4A;
  --grey-500:       #8A8A8A;
  --grey-300:       #D4D4D4;
  --grey-100:       #F2F2F2;
  --grey-50:        #F9F9F9;

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS
     Prefer these in components; the raw palette above is for
     illustrations and one-off brand moments.
     --------------------------------------------------------- */
  --fg-primary:     var(--black);
  --fg-secondary:   var(--grey-700);
  --fg-muted:       var(--grey-500);
  --fg-inverse:     var(--white);
  --fg-accent:      var(--teal);
  --fg-danger:      var(--red);

  --bg-canvas:      var(--white);
  --bg-subtle:      var(--grey-50);
  --bg-accent:      var(--teal-15);
  --bg-danger:      var(--red-15);

  --border-default: var(--grey-300);
  --border-accent:  var(--teal);
  --border-subtle:  var(--grey-100);

  --action-primary-bg:       var(--teal);
  --action-primary-bg-hover: var(--deep-teal);
  --action-primary-fg:       var(--white);

  --action-danger-bg:        var(--red);
  --action-danger-bg-hover:  var(--orange);
  --action-danger-fg:        var(--white);

  /* ---------------------------------------------------------
     TYPOGRAPHY — family, weights
     Figtree across the board, locked to a single weight: Medium
     (500). Body copy, headings, UI labels, pills, captions — all
     render at 500. This is a deliberate flatness: the type holds
     one voice and lets color, scale, and whitespace do the
     hierarchy work. We do not mix in 300, 400, 600, or 700.
     --------------------------------------------------------- */
  --font-sans:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-regular:    500;
  --fw-semibold:   500;

  /* Legacy aliases — all resolve to 500. */
  --fw-medium:     500;
  --fw-bold:       500;

  /* ---------------------------------------------------------
     TYPOGRAPHY — scale (rem-based, 16px root)
     --------------------------------------------------------- */
  --fs-h1:    4.5rem;   /* 72 */
  --fs-h2:         3.75rem;  /* 60 */
  --fs-h3:         2.25rem;  /* 36 */
  --fs-h4:         1.625rem; /* 26 */
  --fs-h5:         1.375rem; /* 22 */
  --fs-subhead:    1.2rem;   /* 19 */
  --fs-body-lg:    1.25rem;  /* 20 */
  --fs-body:       1.125rem; /* 18 */
  --fs-body-sm:    1rem;     /* 16 */
  --fs-caption:    0.875rem; /* 14 */

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.04em;

  /* ---------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */

  /* ---------------------------------------------------------
     RADIUS — soft, rounded. Matches illustration language.
     --------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     ELEVATION — restrained. Illustrations don't use drop shadows,
     so UI shadows stay soft and low-contrast.
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px var(--teal-30);
}

/* =============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Apply these directly in markup, or use them as a reference
   for component-level styles.
   ============================================================= */

.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5,
.t-subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  margin: 0;
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.t-h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}
.t-subhead {
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
}

.t-body,
.t-body-lg,
.t-body-sm,
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  margin: 0;
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-normal);  }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal);  }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-secondary); }

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.eyebrow-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Elemental defaults — if you use bare tags, they render sensibly */
h1 { font: var(--fw-medium) var(--fs-h2)/var(--lh-tight) var(--font-sans); letter-spacing: var(--ls-tight); color: var(--fg-primary); margin: 0; }
h2 { font: var(--fw-medium) var(--fs-h3)/var(--lh-snug)  var(--font-sans); letter-spacing: var(--ls-tight); color: var(--fg-primary); margin: 0; }
h3 { font: var(--fw-medium) var(--fs-h4)/var(--lh-snug)  var(--font-sans); color: var(--fg-primary); margin: 0; }
h4 { font: var(--fw-medium) var(--fs-h5)/var(--lh-snug)  var(--font-sans); color: var(--fg-primary); margin: 0; }
p  { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); color: var(--fg-primary); margin: 0; }


/* =============================================================
   RESPONSIVE TYPE — system-wide. All type scales shrink ~30% on
   tablet (≤ 1023px) and mobile (≤ 639px), with an extra-tight
   step for ultra-narrow phones (≤ 380px).
   ============================================================= */

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --fs-h1: 3.8125rem; /* 72 → 61 */
    --fs-h2:      3.1875rem; /* 60 → 51 */
    --fs-h3:      1.9rem;
    --fs-h4:      1.45rem;
    --fs-h5:      1.25rem;
  }
}

/* Mobile */
@media (max-width: 639px) {
  :root {
    --fs-h1: 3.125rem;  /* 72 → 50 */
    --fs-h2:      2.625rem;  /* 60 → 42 */
    --fs-h3:      1.6rem;
    --fs-h4:      1.35rem;
    --fs-h5:      1.2rem;
    --fs-body-lg: 1.125rem;  /* steps down one from desktop */
    --fs-body:    1rem;
  }
}

@media (max-width: 380px) {
  :root {
    --fs-h1: 2.75rem;
    --fs-h2:      2.25rem;
    --fs-h3:      1.4rem;
    --fs-h4:      1.25rem;
  }
}

/* =============================================================
   Functional pills
   Reusable pill control for filtering, tabs, and category
   switchers across the site (FAQs, future filter UIs, etc).
   Usage:
     <div class="functional-pills">
       <button class="functional-pill" data-active="true">All</button>
       <button class="functional-pill">Sensor</button>
     </div>
   ============================================================= */
.functional-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.functional-pill {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: #000;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.functional-pill:hover {
  background: #F4F4F4;
}
.functional-pill[data-active="true"] {
  background: var(--deep-teal);
  color: #fff;
  border-color: var(--deep-teal);
}
.functional-pill[data-active="true"]:hover {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
}
.functional-pill:active {
  transform: scale(0.98);
}
@media (max-width: 639px) {
  .functional-pills {
    gap: 6px;
  }
  .functional-pill {
    font-size: 13px;
    padding: 7px 12px;
  }
}

/* =============================================================
   BUTTONS — global pill button system.
   Token-driven; available on every page once colors_and_type.css
   is loaded. Variants: primary (teal fill), secondary (white
   pill, teal text — for use on colored surfaces), dark (black).
   Size: .btn-lg for marketing CTAs.
   Layout: .cta-row stacks one or more buttons inline with a
   tight gap, collapsing to full-width on narrow phones.
   ============================================================= */
.btn {
  display: inline-block;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  font-size: 16px;
  padding: 12px 22px;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn-lg { padding: 14px 26px; }

.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: #179999; }

.btn-secondary { background: var(--white); color: var(--teal); }
.btn-secondary:hover { background: var(--teal-15); color: var(--deep-teal); }

.btn-dark { background: var(--black); color: var(--white); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .cta-row .btn { flex: 1 1 100%; text-align: center; }
}