/* FastIQ design tokens — single source of truth. Values come from the Figma file. */
:root {
  /* Color: surfaces */
  --color-bg:            #FDF9F4;   /* page */
  --color-bg-alt:        #FCF8F3;   /* alternating sections */
  --color-surface:       #FFFFFF;   /* cards */
  --color-surface-warm:  #F9EFE4;   /* chips, pills */

  /* Color: text */
  --color-ink:           #000C2E;   /* headings */
  --color-text:          #3F434A;   /* body */
  --color-text-strong:   #323232;
  --color-text-sub:      rgba(63, 67, 74, 0.72);   /* subtext under headings: softer than body */
  --color-text-muted:    rgba(3, 3, 2, 0.65);
  --color-text-link:     rgba(0, 0, 0, 0.6);
  --color-text-inverse:  #FFFFFF;

  /* Color: brand + accents */
  --color-primary:       #235CFB;
  --color-primary-soft:  #9EB7FF;   /* primary border */
  --color-black:         #000000;
  --color-logo:          #262626;

  /* Color: section tints */
  --color-tint-lime:     #F6FCE2;
  --color-tint-pink:     #FFEBF4;
  --color-tint-yellow:   #FFFBE6;
  --color-tint-blue:     #E8F4FF;

  /* Color: lines */
  --color-line:          #EBEBEB;              /* grid lines, section dividers */
  --color-line-strong:   rgba(0, 0, 0, 0.10);  /* card + nav borders */
  --color-line-soft:     rgba(0, 0, 0, 0.06);  /* chip borders */
  --color-dot:           #D2D2D2;

  /* Typography */
  --font-display: "Outfit", sans-serif;     /* headings */
  --font-ui:      "Outfit", sans-serif;     /* body + UI */
  --font-accent:  "EB Garamond", serif;             /* blue call-out words */

  /* Type scale (size / line-height / tracking) */
  --fs-display: 54px; --lh-display: 48px; --ls-display: -0.03em;
  --fs-h1:      50px; --lh-h1:      54px; --ls-h1:      -0.03em;
  --fs-h2:      36px; --lh-h2:      40px; --ls-h2:      -0.03em;
  --fs-h3:      26px; --lh-h3:      30px; --ls-h3:      -0.02em;
  --fs-body:    16px; --lh-body:    24px;
  --fs-small:   14px; --lh-small:   14px; --ls-small:   -0.02em;
  --fs-eyebrow: 14px; --ls-eyebrow: 0.0429em;

  /* Radius */
  --radius-card: 24px;
  --radius-panel: 20px;
  --radius-pill: 999px;

  /* Elevation / effects */
  --shadow-card:    0 0 16px rgba(0, 0, 0, 0.04);
  --shadow-primary: inset 0 5px 8px 3px rgba(255, 255, 255, 0.25);
  --shadow-dark:    inset 2px -2px 6px rgba(255, 255, 255, 0.25),
                    inset 0 0 0 1px #E4E4E4,
                    inset 0 4px 10px 2px rgba(255, 255, 255, 0.25);

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 60px;
  --space-9: 110px;
  --head-gap: 60px;                  /* title → content gap inside a section: 60 / 40 / 32 */
  --section-y: 110px;                /* top + bottom padding of every section: 110 desktop / 60 tablet / 50 mobile */

  /* Layout */
  --container: 1440px;
  --gutter: 60px;
  --pad-x: 0px;                       /* extra space between the gutter lines and content */
  --gx: calc(var(--gutter) + var(--pad-x));
  --nav-h: 77px;                      /* sticky nav height; js/nav.js writes the measured value */
}

@media (max-width: 1023px) {
  :root {
    --fs-display: 44px; --lh-display: 42px;
    --fs-h1: 40px;      --lh-h1: 44px;
    --fs-h2: 32px;      --lh-h2: 36px;
    --gutter: 24px;
    --pad-x: 30px;
    --section-y: 60px;
    --head-gap: 40px;
    --nav-h: 72px;
  }
}
@media (max-width: 599px) {
  :root {
    --fs-display: 41px; --lh-display: 41px;   /* mobile headings +5px */
    --fs-h1: 37px;      --lh-h1: 41px;
    --fs-h2: 31px;      --lh-h2: 35px;
    --fs-h3: 22px;      --lh-h3: 26px;
    --gutter: 16px;
    --pad-x: 12px;
    --section-y: 50px;
    --head-gap: 32px;
  }
}