/* =========================================================
   Aurafil Health — Design Tokens v1
   Single source of truth for color, type, space, motion.
   Consumed by every other stylesheet.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* -------------------------------------------------------
     COLOR — Chevron blue ramp (matches Aurafil logo gradient)
     Brand primary = --brand-500 (#0AB4EF, chevron base)
     Gradient stops from the wordmark SVG:
       #8FE4FE (top) → #38C5F6 (mid) → #0AB4EF (base)
     ------------------------------------------------------- */
  --brand-50:  #E6F7FE;
  --brand-100: #C7EEFC;
  --brand-200: #A3E1F9;
  --brand-300: #8FE4FE;   /* Chevron TOP stop */
  --brand-400: #38C5F6;   /* Chevron MID stop */
  --brand-500: #0AB4EF;   /* Chevron BASE — PRIMARY BRAND */
  --brand-600: #0895C8;
  --brand-700: #0774A0;
  --brand-800: #075674;
  --brand-900: #073B50;

  /* Chevron gradient — use as background-image for hero accents.
     Angle picked to match the wordmark: light at top, deep at base. */
  --brand-gradient: linear-gradient(180deg,
                      #8FE4FE 0%,
                      #38C5F6 45%,
                      #0AB4EF 100%);
  --brand-gradient-h: linear-gradient(90deg,
                       #0AB4EF 0%,
                       #38C5F6 55%,
                       #8FE4FE 100%);

  /* Legacy aliases so existing rules still resolve while we migrate */
  --cyan-50:  var(--brand-50);
  --cyan-100: var(--brand-100);
  --cyan-200: var(--brand-200);
  --cyan-300: var(--brand-300);
  --cyan-400: var(--brand-400);
  --cyan-500: var(--brand-500);
  --cyan-600: var(--brand-600);
  --cyan-700: var(--brand-700);
  --cyan-800: var(--brand-800);
  --cyan-900: var(--brand-900);

  /* -------------------------------------------------------
     COLOR — Warm paper neutrals (NOT cool gray)
     This is the single biggest premium lever.
     ------------------------------------------------------- */
  --paper-0:   #FBFAF8;   /* Primary background — warm off-white */
  --paper-50:  #F5F3EE;
  --paper-100: #EBE8E1;
  --paper-200: #DAD6CC;
  --paper-300: #B8B3A6;
  --paper-400: #8F8A7D;
  --paper-500: #6B665A;
  --paper-600: #4E4A40;
  --paper-700: #38352E;
  --paper-800: #24221C;
  --paper-900: #16150F;   /* Near-black, warm */

  /* -------------------------------------------------------
     COLOR — Dark ground (DEFAULT background — dark theme)
     Cool blue-black, tuned to make the chevron sing.
     ------------------------------------------------------- */
  --ground-1000: #000000;   /* absolute black — logo-source parity */
  --ground-950:  #05080B;   /* deepest bg */
  --ground-900:  #0A0E13;   /* PRIMARY BG */
  --ground-850:  #0D131A;   /* surface */
  --ground-800:  #12181F;   /* surface elevated */
  --ground-750:  #171E27;   /* surface elevated more */
  --ground-700:  #1E2732;   /* muted / hover surface */
  --ground-600:  #2B3644;   /* borders strong */
  --ground-500:  #3E4A5A;   /* borders */
  --ground-400:  #566374;
  --ground-300:  #7A8595;   /* text subtle */
  --ground-200:  #9AA3B0;   /* text muted */
  --ground-100:  #C3CAD3;
  --ground-50:   #E4E7EB;   /* text primary on dark */
  --ground-25:   #F2F4F7;   /* text primary max contrast */

  /* -------------------------------------------------------
     COLOR — Semantic status (small role, only when needed)
     ------------------------------------------------------- */
  --success: oklch(66% 0.15 145);
  --warning: oklch(75% 0.15 75);
  --error:   oklch(60% 0.20 25);

  /* -------------------------------------------------------
     COLOR — Semantic aliases (DARK THEME by default)
     Use these in components, never hardcode hex.
     ------------------------------------------------------- */
  --bg:            var(--ground-900);
  --bg-subtle:     var(--ground-850);
  --bg-muted:      var(--ground-800);
  --bg-deep:       var(--ground-950);
  --bg-inverse:    var(--paper-0);

  --surface:       var(--ground-850);
  --surface-elev:  var(--ground-800);
  --surface-raised:var(--ground-750);
  --surface-sunk:  var(--ground-950);

  --border:        rgba(255 255 255 / 0.08);
  --border-strong: rgba(255 255 255 / 0.16);
  --border-subtle: rgba(255 255 255 / 0.05);
  --hairline-color: rgba(255 255 255 / 0.10);

  --text:          var(--ground-25);           /* #F2F4F7 primary */
  --text-muted:    var(--ground-200);          /* #9AA3B0 */
  --text-subtle:   var(--ground-300);          /* #7A8595 */
  --text-inverse:  var(--paper-900);
  --text-brand:    var(--brand-400);           /* chevron mid */

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-400);
  --accent-text:   var(--brand-400);
  --accent-fg:     var(--ground-950);          /* dark text on cyan buttons */

  /* Warm cream — used sparingly on dark for editorial contrast (serif quotes,
     the Line's soft-white type, footer wordmark shadow) */
  --cream:         #F5F1E8;
  --cream-muted:   #C9C3B4;

  /* -------------------------------------------------------
     TYPOGRAPHY — Font families
     Geist (display + mono) and Inter (body) self-hosted.
     Instrument Serif for editorial clinician quotes only.
     ------------------------------------------------------- */
  --font-display: 'Geist', 'Söhne', ui-sans-serif, system-ui,
                  -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui,
                  -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono',
                  Menlo, Monaco, Consolas, monospace;
  --font-serif:   'Instrument Serif', 'Tiempos Text',
                  Georgia, 'Times New Roman', serif;

  /* -------------------------------------------------------
     TYPOGRAPHY — Fluid type scale
     Hero uses svh so it breathes with viewport height.
     Body scales are clamp() min–preferred–max.
     ------------------------------------------------------- */
  --text-hero:  clamp(2.375rem, 1.125rem + 5.5vw, 5.625rem); /* 38 → 90 */
  --text-6xl:   clamp(2.5rem, 1.75rem + 3vw, 4.5rem);      /* 40 → 72 */
  --text-5xl:   clamp(2rem, 1.5rem + 2vw, 3.5rem);         /* 32 → 56 */
  --text-4xl:   clamp(1.75rem, 1.375rem + 1.5vw, 2.75rem); /* 28 → 44 */
  --text-3xl:   clamp(1.5rem, 1.25rem + 1vw, 2.25rem);     /* 24 → 36 */
  --text-2xl:   clamp(1.25rem, 1.125rem + 0.5vw, 1.625rem);/* 20 → 26 */
  --text-xl:    1.25rem;    /* 20 */
  --text-lg:    1.125rem;   /* 18 */
  --text-base:  1.0625rem;  /* 17 — Apple readability spec */
  --text-sm:    0.9375rem;  /* 15 */
  --text-xs:    0.8125rem;  /* 13 */
  --text-2xs:   0.75rem;    /* 12 — floor for eyebrows/mono labels */

  /* -------------------------------------------------------
     TYPOGRAPHY — Line height & tracking
     ------------------------------------------------------- */
  --lh-hero:    0.95;
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --track-hero:   -0.035em;   /* Aggressive negative for display */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-body:   0.005em;    /* Slight positive for body — Apple spec */
  --track-mono:   0;
  --track-caps:   0.08em;

  /* Font weights — Geist and Inter variable */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* -------------------------------------------------------
     SPACE SCALE — 4px base, geometric progression
     No gaps in the scale (no missing --space-7 bugs).
     ------------------------------------------------------- */
  --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.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */
  --space-40:  10rem;     /* 160 */
  --space-48:  12rem;     /* 192 */
  --space-56:  14rem;     /* 224 */
  --space-64:  16rem;     /* 256 */

  /* Section rhythm — vertical space between homepage modules */
  --section-y:       clamp(4rem, 3rem + 5vw, 8rem);
  --section-y-tight: clamp(2.5rem, 2rem + 2.5vw, 5rem);

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-text: 68ch;   /* Ideal measure for body reading */
  --gutter:         clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  /* -------------------------------------------------------
     RADIUS
     ------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-pill: 999px;

  /* -------------------------------------------------------
     BORDERS
     ------------------------------------------------------- */
  --hairline:    1px;
  --border-w:    1px;
  --border-w-2:  2px;

  /* -------------------------------------------------------
     SHADOWS — subtle, warm
     ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(22 21 15 / 0.04);
  --shadow-sm: 0 2px 8px rgb(22 21 15 / 0.06);
  --shadow-md: 0 8px 24px rgb(22 21 15 / 0.08);
  --shadow-lg: 0 20px 48px rgb(22 21 15 / 0.12);
  --shadow-glow-cyan: 0 0 32px rgb(6 182 212 / 0.28);

  /* -------------------------------------------------------
     MOTION
     ------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);       /* expo out */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:   linear;

  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    500ms;
  --dur-slower:  800ms;
  --dur-cinema:  1200ms;

  /* -------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* -------------------------------------------------------
   OPTIONAL LIGHT SECTIONS — applied per-section, not globally.
   Add class="theme-paper" to a container to invert it to a warm
   cream editorial band (used for founder quote, single trust module).
   ------------------------------------------------------- */
.theme-paper {
  --bg:            var(--paper-50);
  --bg-subtle:     var(--paper-100);
  --bg-muted:      var(--paper-200);

  --surface:       var(--paper-0);
  --surface-elev:  #FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunk:  var(--paper-100);

  --border:        var(--paper-200);
  --border-strong: var(--paper-300);
  --border-subtle: var(--paper-100);
  --hairline-color: var(--paper-200);

  --text:          var(--paper-900);
  --text-muted:    var(--paper-500);
  --text-subtle:   var(--paper-400);
  --text-inverse:  var(--ground-25);
  --text-brand:    var(--brand-700);

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-text:   var(--brand-700);
  --accent-fg:     #FFFFFF;

  background: var(--bg);
  color: var(--text);
}

/* -------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-slower:  0ms;
    --dur-cinema:  0ms;
  }
}