/* ============================================================
   FILESURE DESIGN SYSTEM — Foundations
   Colors + Typography tokens (base + semantic)
   Source of truth: "Filesure Design System.fig" (Built by Phionike, 2026)
   ============================================================ */

/* ---- Webfonts ----
   Geist + Geist Mono are SELF-HOSTED from /fonts (variable woff2, official v1.7.1, OFL).
   Secondary families load from Google Fonts; TASA Orbiter Display from Fontshare.
   SUBSTITUTION (flagged): the .fig uses "Menlo" for code (a macOS system mono)
   — substituted with the brand's own "Geist Mono". */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist[wght].woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Italic[wght].woff2') format('woff2-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono[wght].woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* The marketing homepage uses only Geist + Geist Mono (self-hosted above) and
   Material Symbols (loaded in index.html). The design system's secondary families
   (Outfit, DM Sans, Inter, Lato, Manrope, Figtree, TASA Orbiter) are intentionally
   NOT loaded here — they're unused on this page and would cost 7 extra font fetches.
   Re-add the relevant @import if a future page uses one of them. */

:root {
  /* ============ BRAND / PRIMARY — Lavender ============ */
  --lavender-200: #F6EFF8;
  --lavender-300: #F2E7F5;
  --lavender-400: #E4CEE9;
  --lavender-500: #A860B9;   /* MAIN brand color */
  --lavender-600: #864D94;   /* hover / pressed */
  --lavender-disabled: #E7CDED;
  --lavender-tint: #FBEBFF;  /* active nav background */
  --lavender-hover-bg: #FCEFFF;

  --brand: var(--lavender-500);
  --brand-hover: var(--lavender-600);

  /* ============ SECONDARY — Rust ============ */
  --rust-200: #F6EEE6;
  --rust-300: #F2E6DA;
  --rust-400: #E4CBB2;
  --rust-500: #A75707;   /* MAIN secondary color */
  --rust-600: #864606;
  --rust-tint: #FFF6ED;       /* badge/pill background */
  --rust-tint-border: #FFF0E7;
  --rust-dot: #E07000;

  /* ============ NEUTRALS (text & stroke ramp) ============ */
  --neutral-0:   #FFFFFF;
  --neutral-300: #A4A4A4;
  --neutral-500: #777777;
  --neutral-900: #323232;

  /* ---- Foreground / text ---- */
  --fg-strong:   #192839;  /* page titles, hero headings (blue-black) */
  --fg-1:        #262728;  /* primary headings */
  --fg-2:        #393939;  /* dark body */
  --fg-body:     #545454;  /* default body text */
  --fg-3:        #5C5C5C;  /* descriptions */
  --fg-muted:    #717171;  /* secondary / supporting */
  --fg-label:    #828282;  /* small labels */
  --fg-slate:    #768EA7;  /* eyebrow / category labels (blue-grey) */
  --fg-faint:    #6B6E78;  /* placeholder, faint meta — darkened from #8A8D97 for WCAG AA (4.5:1 on white) */

  /* ---- Surfaces ---- */
  --bg:          #FFFFFF;
  --surface-1:   #FAFAFA;  /* section background */
  --surface-2:   #F9FAFB;  /* table zebra / subtle panel */
  --surface-3:   #F2F2F2;  /* sidebar / inset */

  /* ---- Borders / strokes ---- */
  --border:        #E5E7EB;  /* default 1px border */
  --border-strong: #E9EAEB;
  --border-input:  #D1D5DB;  /* form field border */
  --border-faint:  #E3EAF3;  /* hairline / section dividers (blue-grey) */
  --border-card:   rgba(229,231,235,0.6); /* card border @ 60% */

  /* ============ SEMANTIC / FEEDBACK ============ */
  /* Success (green) */
  --success-bg:     #052E16;  /* deep green banner */
  --success-500:    #16A34A;
  --success-400:    #4ADE80;
  --success-200:    #BBF7D0;
  --success-text:   #86EFAC;
  --success-tint:   #ECFDF3;

  /* Error (red) */
  --error-bg:       #450A0A;  /* deep red banner */
  --error-500:      #DE1818;
  --error-400:      #F87171;
  --error-200:      #FECACA;
  --error-tint:     #FEF2F2;

  /* Warning / neutral signal (amber) */
  --warning-500:    #E07000;
  --warning-400:    #F59E0B;
  --warning-tint:   #FFF6ED;

  /* Info (lavender reuse) */
  --info-500:       var(--lavender-500);
  --info-tint:      var(--lavender-200);

  /* ============ TYPOGRAPHY — families ============ */
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;        /* default UI / body / headings */
  --font-display: 'Outfit', 'Geist', sans-serif;                        /* alt display titles */
  --font-tasa:    'TASA Orbiter Display', 'Geist', sans-serif;          /* section labels in spec sheets */
  --font-alt:     'DM Sans', 'Geist', sans-serif;                       /* do/don't, micro UI */
  --font-mono:    'Geist Mono', 'Menlo', ui-monospace, monospace;       /* code (Menlo → Geist Mono) */
  --font-micro:   'Manrope', 'Geist', sans-serif;                       /* 8px swatch labels */

  /* ============ TYPE SCALE (size / line-height / tracking) ============
     Default typeface is Geist. Negative tracking only on Display sizes. */
  --display-lg:   64px;  --display-lg-lh:   70px;  --display-lg-ls:   -0.01em;
  --display-md:   56px;  --display-md-lh:   64px;  --display-md-ls:   -0.01em;
  --display-sm:   48px;  --display-sm-lh:   56px;  --display-sm-ls:   -0.01em;
  --heading-2xl:  40px;  --heading-2xl-lh:  46px;  --heading-2xl-ls:  0;
  --heading-xl:   32px;  --heading-xl-lh:   38px;  --heading-xl-ls:   0;
  --heading-lg:   24px;  --heading-lg-lh:   32px;  --heading-lg-ls:   0;
  --heading-md:   20px;  --heading-md-lh:   26px;  --heading-md-ls:   0;
  --heading-sm:   18px;  --heading-sm-lh:   24px;  --heading-sm-ls:   0;
  --body-lg:      16px;  --body-lg-lh:      24px;
  --body-md:      14px;  --body-md-lh:      20px;
  --body-sm:      12px;  --body-sm-lh:      18px;
  --body-xs:      10px;  --body-xs-lh:      14px;
  --caption:      11px;  --caption-lh:      16px;
  --code-md:      12px;  --code-md-lh:      18px;
  --code-sm:      10px;  --code-sm-lh:      14px;

  /* ---- weights ---- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ============ SPACING (4px base grid) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* ============ RADII ============ */
  --radius-xs:  4px;   /* nav item, tiny chips */
  --radius-sm:  6px;   /* inputs, small buttons */
  --radius-md:  7px;   /* default buttons */
  --radius-lg:  8px;   /* swatches, search bar */
  --radius-xl:  14px;  /* large cards */
  --radius-2xl: 16px;  /* elevated cards */
  --radius-pill: 9999px; /* badges, icon-only buttons */

  /* ============ ELEVATION / SHADOW ============ */
  --shadow-card: 0px 2px 20px 0px rgba(0,0,0,0.04);
  --shadow-pop:  0px 8px 28px 0px rgba(16,24,40,0.10);

  /* ============================================================
     v2 ADDITIONS — bolder accent, ink band, elevation, rhythm
     ============================================================ */
  /* Accent — "Iris": a deeper, bolder sibling of the brand lavender */
  --iris-700: #5B1A86;   /* pressed / deep gradient stop */
  --iris-600: #8A2BB2;   /* PRIMARY action — bolder than #A860B9 */
  --orchid-400: #C77DD6; /* light gradient / glow highlight */
  --accent-grad: linear-gradient(100deg, var(--iris-600), var(--orchid-400));

  /* Dark contrast band (plum-black, not flat charcoal) */
  --ink-900: #160C20;
  --ink-800: #241433;
  --ink-700: #33204A;
  --ink-fg: #EDE7F2;
  --ink-fg-muted: #A99BB8;
  --ink-border: rgba(199,125,214,0.16);

  /* Section-rhythm spacing (extends the 4px grid) */
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Larger radius for image frames / feature panels */
  --radius-3xl: 24px;

  /* Elevation scale */
  --elev-1: 0 1px 2px rgba(16,12,32,.04), 0 2px 8px rgba(16,12,32,.05);
  --elev-2: 0 4px 12px rgba(16,12,32,.06), 0 14px 30px rgba(16,12,32,.09);
  --elev-3: 0 2px 6px rgba(16,12,32,.06), 0 10px 28px rgba(16,12,32,.12);
  --elev-4: 0 8px 24px rgba(16,12,32,.10), 0 30px 64px -16px rgba(36,18,52,.30);

  /* Hero glow mesh (Iris → Orchid) */
  --glow-iris: radial-gradient(60% 60% at 70% 28%, rgba(138,43,178,.30), transparent 70%),
               radial-gradient(52% 52% at 26% 78%, rgba(199,125,214,.22), transparent 72%);

  /* Hero display size */
  --display-hero: clamp(44px, 6.2vw, 84px);
}

/* ============================================================
   SEMANTIC TEXT HELPERS — apply directly or copy into components
   ============================================================ */
.fs-display-lg { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--display-lg); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); color: var(--fg-strong); }
.fs-display-md { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--display-md); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); color: var(--fg-strong); }
.fs-display-sm { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--display-sm); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); color: var(--fg-strong); }
.fs-h1 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--heading-2xl); line-height: var(--heading-2xl-lh); color: var(--fg-strong); }
.fs-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--heading-xl);  line-height: var(--heading-xl-lh);  color: var(--fg-strong); }
.fs-h3 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--heading-lg); line-height: var(--heading-lg-lh); color: var(--fg-1); }
.fs-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--heading-md); line-height: var(--heading-md-lh); color: var(--fg-1); }
.fs-h5 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--heading-sm); line-height: var(--heading-sm-lh); color: var(--fg-1); }
.fs-body-lg { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--body-lg); line-height: var(--body-lg-lh); color: var(--fg-body); }
.fs-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--fg-body); }
.fs-body-sm { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--fg-muted); }
.fs-caption { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--caption); line-height: var(--caption-lh); color: var(--fg-label); }
.fs-eyebrow { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--body-sm); line-height: var(--body-sm-lh); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-slate); }
.fs-code { font-family: var(--font-mono); font-weight: var(--w-regular); font-size: var(--code-md); line-height: var(--code-md-lh); color: var(--fg-2); }