/* ============================================================
   winsym.ai — Design Tokens v3 ("Studio Grey")
   Source of truth: design-system/MASTER.md
   Derived from the v3 reference boards: neutral grey surfaces,
   ink type, wide heavy uppercase display, one orange accent,
   lime/orange aurora glows (decorative only), chamfered media.
   Never use raw values in components — reference these tokens.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-var.woff2) format("woff2-variations"),
       url(/fonts/archivo-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-var.woff2) format("woff2-variations"),
       url(/fonts/archivo-latin-ext-var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback so the swap does not shift layout */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* ---- Surfaces ---- */
  --bg:          #ECECEC;   /* page */
  --bg-soft:     #F4F4F4;   /* raised panel */
  --white:       #FFFFFF;   /* cards, inputs, pills */
  --line:        #D9D9D9;   /* hairlines on light */
  --line-strong: #BDBDBD;

  --ink:         #111111;   /* type, icons, dark buttons */
  --ink-2:       #2A2A2A;
  --muted:       #555555;   /* body on --bg: 6.3:1 */
  --muted-2:     #6B6B6B;   /* meta on --white: 5.3:1 */

  --dark:        #171717;   /* dark frame sections */
  --dark-2:      #202020;   /* dark cards */
  --dark-3:      #2C2C2C;   /* dark hairline / hover */
  --on-dark:     #F2F2F2;
  --on-dark-2:   #B8B8B8;   /* 9.2:1 on --dark */
  --on-dark-3:   #8E8E8E;   /* meta on dark: 5.4:1 */

  /* ---- Accent (one) ---- */
  --accent:      #F0551A;   /* display highlight / glow — large text only (3.4:1 on white) */
  --accent-ink:  #B83E0C;   /* small text & links on light (5.6:1 on white) */
  --accent-soft: #FF7A45;   /* accent on dark (6.0:1 on --dark) */
  --accent-wash: rgba(240, 85, 26, 0.10);

  /* Aurora (decorative only, never carries meaning) */
  --glow-orange: rgba(255, 106, 38, 0.55);
  --glow-lime:   rgba(142, 222, 84, 0.55);

  /* ---- Semantic ---- */
  --ok:     #1F7A3A;
  --ok-bg:  #E3F3E8;
  --warn:   #8A5A00;
  --warn-bg:#FFF3D6;
  --err:    #B42318;
  --err-bg: #FDE7E5;

  /* ---- Type ---- */
  --font: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stretch-display: 118%;
  --stretch-body: 100%;

  --t-hero:  clamp(2.6rem, 1.2rem + 6.4vw, 6.6rem);
  --t-h1:    clamp(2.3rem, 1.3rem + 4.4vw, 4.8rem);
  --t-h2:    clamp(1.9rem, 1.1rem + 3.2vw, 3.7rem);
  --t-h3:    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --t-h4:    1.125rem;
  --t-lead:  clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-xs:    0.78rem;

  --lh-display: 0.98;
  --lh-tight:   1.15;
  --lh-body:    1.6;
  --track-display: -0.012em;
  --track-label:   0.08em;

  /* ---- Space (8px base) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;  --s-9: 6rem;
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter:  clamp(1rem, 0.5rem + 3vw, 3rem);
  --max:     1240px;
  --max-narrow: 760px;
  --prose:   66ch;

  /* ---- Shape ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;
  --cut:    clamp(22px, 3vw, 44px);   /* chamfer size on media & cards */
  --cut-sm: 16px;

  /* ---- Elevation ---- */
  --sh-pill: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 28px -12px rgba(17,17,17,0.28), 0 2px 6px -2px rgba(17,17,17,0.08);
  --sh-card: 0 18px 40px -24px rgba(17,17,17,0.35);
  --sh-lift: 0 26px 50px -24px rgba(17,17,17,0.45);
  --sh-float: 0 30px 60px -20px rgba(17,17,17,0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 150ms;
  --d-med:  250ms;
  --d-slow: 450ms;

  /* ---- Layers ---- */
  --z-nav: 100;
  --z-menu: 200;
  --z-toast: 400;
}