/* =====================================================================
   SIDEWIZE V4.1 — DESIGN TOKENS
   Two brand routes for owner selection. Switch with <html data-route="brass|teal">.
   Mirror of /docs/tokens.json — keep in sync.
   Contrast: all text tokens checked against --bg-2 (#0F1726 / #0C1420).
   ===================================================================== */
:root,
:root[data-route="brass"]{
  /* Surfaces (dark premium) */
  --bg:        #0A101B;   /* page base */
  --bg-2:      #0F1726;   /* hero / section base */
  --surface:   #141E31;   /* cards */
  --surface-2: #1A2640;   /* raised / hover */
  --surface-3: #22304D;   /* inputs on cards, tracks */
  --line:      #243350;   /* hairlines */
  --line-2:    #33466B;   /* strong borders, input borders */

  /* Text */
  --ink:    #F3EFE6;      /* primary text   — 15.8:1 on --bg-2 */
  --ink-2:  #C8D0DF;      /* secondary text — 11.3:1 */
  --muted:  #97A3BA;      /* tertiary/meta  — 6.9:1  */
  --faint:  #6E7B94;      /* disabled only  — 4.1:1 (non-essential text) */

  /* Brand / interaction */
  --accent:        #D4A24C;  /* primary action fill (brass) */
  --accent-hover:  #E2B35F;
  --accent-press:  #BF8E3B;
  --on-accent:     #17110A;  /* text on accent — 9.4:1 */
  --accent-ink:    #EBC984;  /* accent used as text/icon on dark — 11.0:1 */
  --accent-soft:   rgba(212,162,76,.14);
  --accent-line:   rgba(212,162,76,.38);

  /* Semantic */
  --success:      #6CCB97;   --success-soft: rgba(108,203,151,.13);
  --warning:      #E9B44C;   --warning-soft: rgba(233,180,76,.13);
  --danger:       #F08C82;   --danger-soft:  rgba(240,140,130,.13);
  --info:         #8DB4EC;   --info-soft:    rgba(141,180,236,.13);
  --sample:       #B9A6F0;   --sample-soft:  rgba(185,166,240,.12);  /* "Sample / Preview" labels */

  --focus: #F5D28E;
}
:root[data-route="teal"]{
  --bg:        #081016;
  --bg-2:      #0C1420;
  --surface:   #111C2B;
  --surface-2: #172538;
  --surface-3: #1E2F46;
  --line:      #213247;
  --line-2:    #2F4662;

  --ink:    #F2F5F7;
  --ink-2:  #C6D1DC;
  --muted:  #93A3B5;
  --faint:  #697A8E;

  --accent:        #2CC5B5;
  --accent-hover:  #45D6C6;
  --accent-press:  #22A99B;
  --on-accent:     #03201C;
  --accent-ink:    #6FE3D6;
  --accent-soft:   rgba(44,197,181,.13);
  --accent-line:   rgba(44,197,181,.40);

  --success:      #7BD88F;   --success-soft: rgba(123,216,143,.13);
  --warning:      #F0BE5A;   --warning-soft: rgba(240,190,90,.13);
  --danger:       #F2907F;   --danger-soft:  rgba(242,144,127,.13);
  --info:         #8EB7F0;   --info-soft:    rgba(142,183,240,.13);
  --sample:       #BDA9F3;   --sample-soft:  rgba(189,169,243,.12);

  --focus: #9DF0E6;
}

:root{
  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);  /* 38 → 68 */
  --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 3.25rem);       /* 32 → 52 */
  --fs-h2:      clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);    /* 26 → 40 */
  --fs-h3:      clamp(1.125rem, 1.05rem + .35vw, 1.375rem); /* 18 → 22 */
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);    /* 17 → 20 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-sm:      .9375rem;   /* 15 */
  --fs-xs:      .8125rem;   /* 13 — meta only */
  --fs-label:   .75rem;     /* 12 — mono uppercase labels */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* 8-pt spacing */
  --s-1: 4px;  --s0: 8px;  --s1: 12px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px;  --s6: 48px; --s7: 64px; --s8: 80px; --s9: 96px; --s10: 128px;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18);
  --e2: 0 6px 18px -6px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.3);
  --e3: 0 24px 60px -20px rgba(0,0,0,.6), 0 8px 20px -8px rgba(0,0,0,.4);

  /* Controls */
  --ctl-h-sm: 40px; --ctl-h: 48px; --ctl-h-lg: 56px;   /* touch ≥ 44px except sm on desktop */
  --maxw: 1200px;
  --maxw-text: 66ch;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;
}
@media (prefers-reduced-motion: reduce){
  :root{ --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}