/* === Extracted from foundation file — do not hand-edit ===
   Source: variables bound in the Homepage frame (FICS - UX Post-MVP, node 236:52304),
   names mirror Figma variables (slash -> hyphen). Alias tokens only.
   NOTE: only the single mode resolved at the 1440px frame (Desktop Small) was returned.
   Tablet / Mobile / Desktop (>=1536) values still need a full Foundations extraction. */
:root {
  /* Colour: surface */
  --fi-surface-color-default: #eaf0ee;
  --fi-surface-color-default-dark: #dbe5e2;
  --fi-surface-color-highlight-strong: #006443;
  --fi-surface-color-neutral: #ffffff;
  /* Colour: text / heading */
  --fi-text-color-inverse: #ffffff;
  --fi-text-color-regular: #606060;
  --fi-heading-color-default: #07272c;
  --fi-heading-color-inverse: #ffffff;
  --fi-heading-color-accent: #005338;
  /* Colour: actions */
  --fi-action-utility-label-default: #07272c;
  --fi-action-utility-fill-default: #80b1a1;
  --fi-action-primary-label-default: #183434;
  --fi-action-primary-fill-default: #ffffff;
  --fi-action-secondary-label-default: #ffffff;
  --fi-action-secondary-fill-default: #ffffff00;
  --fi-action-secondary-stroke-default: #ffffff;
  --fi-action-text-link-label-default: #00422c;
  /* Colour: inputs, borders, accents */
  --fi-input-form-color-fill-default: #ffffff;
  --fi-input-form-color-stroke-default: #00000080;
  --fi-border-color-light: #07272c1a;
  --fi-border-color-lightest: #1834340d;
  --fi-border-light: #07272c1a;
  --fi-accent-color-accent-one: #fa4a5f;
  --fi-accent-color-accent-two: #0075c9;
  --fi-accent-color-accent-three: #9b26b6;
  --fi-accent-color-accent-four: #f5aa24;
  /* Typography */
  --fi-brand-font-copy: "Cera Pro";
  --fi-brand-font-display: "Cera Pro";
  --fi-font-weight-regular: 400;
  --fi-font-weight-bold: 700;
  --fi-text-tiny: 12px;
  --fi-text-small: 14px;
  --fi-text-regular: 16px;
  --fi-text-large: 18px;
  --fi-text-xlarge: 20px;
  --fi-heading-small: 20px;
  --fi-heading-medium: 20px;
  --fi-heading-xlarge: 28px;
  --fi-heading-hero-title: 32px;
  /* Layout: gap */
  --fi-layout-space-gap-tiny: 4px;
  --fi-layout-space-gap-xxxsmall: 8px;
  --fi-layout-space-gap-xxsmall: 12px;
  --fi-layout-space-gap-xsmall: 16px;
  --fi-layout-space-gap-regular: 16px;
  --fi-layout-space-gap-medium: 24px;
  --fi-layout-space-gap-large: 24px;
  --fi-layout-space-gap-xxlarge: 40px;
  /* Layout: padding */
  --fi-layout-space-padding-tiny: 4px;
  --fi-layout-space-padding-xxxsmall: 8px;
  --fi-layout-space-padding-xxsmall: 12px;
  --fi-layout-space-padding-xsmall: 16px;
  --fi-layout-space-padding-small: 20px;
  --fi-layout-space-padding-regular: 20px;
  --fi-layout-space-padding-medium: 24px;
  --fi-layout-space-padding-large: 28px;
  --fi-layout-space-padding-xlarge: 32px;
  --fi-layout-space-padding-xxlarge: 56px;
  /* Layout: section margins, item spacing */
  --fi-layout-space-section-margin-horizontal-medium: 20px;
  --fi-layout-space-section-margin-horizontal-xlarge: 20px;
  --fi-layout-space-section-margin-vertical-default: 44px;
  --fi-layout-space-section-margin-vertical-large: 48px;
  --fi-layout-space-item-action-group-box: 20px;
  /* Containers, borders, radius */
  --fi-container-size-medium: 1456px;
  --fi-container-size-xlarge: 1536px;
  --fi-border-stroke-xsmall: 1px;
  --fi-border-stroke-small: 2px;
  --fi-border-stroke-largest: 10px;
  --fi-border-radius-small: 8px;
  --fi-border-radius-medium: 16px;
  --fi-border-radius-pill: 1000px;
}

/* Device modes — values from Tablet (236:60032) and Mobile (236:60046) frames; base values above are Mobile.
   NOTE: Tablet frame is 1024px wide (= Desktop Small boundary per CLAUDE.md); applied here for 768-1023px, to confirm.
   Desktop (>=1536) values not yet extracted: uses Desktop Small. */
@media (min-width: 768px) {
  :root {
  --fi-layout-space-gap-regular: 20px;
  --fi-layout-space-gap-large: 24px;
  --fi-layout-space-gap-medium: 24px;
  --fi-layout-space-gap-xxlarge: 48px;
  --fi-layout-space-padding-regular: 20px;
  --fi-layout-space-padding-medium: 24px;
  --fi-layout-space-padding-large: 32px;
  --fi-layout-space-padding-xlarge: 40px;
  --fi-layout-space-section-margin-horizontal-xlarge: 24px;
  --fi-layout-space-section-margin-vertical-default: 48px;
  --fi-layout-space-section-margin-vertical-large: 64px;
  --fi-heading-hero-title: 36px;
  --fi-heading-xlarge: 32px;
  --fi-heading-medium: 24px;
  --fi-text-xlarge: 20px;
  }
}
@media (min-width: 1024px) {
  :root {
  --fi-layout-space-gap-regular: 24px;
  --fi-layout-space-gap-large: 32px;
  --fi-layout-space-gap-medium: 32px;
  --fi-layout-space-gap-xxlarge: 56px;
  --fi-layout-space-padding-regular: 24px;
  --fi-layout-space-padding-medium: 32px;
  --fi-layout-space-padding-large: 40px;
  --fi-layout-space-padding-xlarge: 48px;
  --fi-layout-space-section-margin-horizontal-xlarge: 24px;
  --fi-layout-space-section-margin-vertical-default: 56px;
  --fi-layout-space-section-margin-vertical-large: 80px;
  --fi-heading-hero-title: 64px;
  --fi-heading-xlarge: 36px;
  --fi-heading-medium: 24px;
  --fi-text-xlarge: 24px;
  --fi-layout-space-section-margin-horizontal-medium: 40px;
  }
}

/* === Discovered mid-build — append only, one token per line, comment with date + page === */
:root {
  --fi-action-primary-fill-on-light: #f6b540; /* 2026-10-15 homepage: fill of primary button on light surfaces (Search, Sign up); resolved value from Figma frame, official token name to confirm */
  --fi-surface-color-neutral-70: #ffffffb2; /* 2026-10-15 homepage tablet: play button frosted fill */
  --fi-text-color-muted: #e0dcd2; /* 2026-10-15 homepage mobile: Pause video label */
  --fi-border-radius-xsmall: 4px; /* 2026-10-15 homepage tablet: play button */
  --fi-layout-space-section-margin-horizontal-large: 24px; /* 2026-10-15 homepage tablet: CTA Detailed side margin (Tablet value only) */
  --fi-border-color-white-strong: #ffffff66; /* 2026-10-15 global search modal */
  --fi-elevation-large: 5px 4px 15px #00422c0a, 22px 18px 28px #00422c0a, 49px 40px 38px #00422c05, 86px 70px 45px #00422c03, 135px 110px 49px #00422c00; /* 2026-10-15 global search modal: Figma fi-elevation-large (duplicate effects dropped) */
}