/* ===========================================================================
   SARMENT — Design Tokens
   ---------------------------------------------------------------------------
   Aesthetic: "Terminal × Swiss" — dark, monochrome, square, flat.
   No rounded corners. No drop shadows. Grey accent (no colour branding).
   Bold + generously spaced, but restrained in size. Functional first.

   Every value is a CSS custom property → ports 1:1 to a Rust/Leptos token
   module. Components reference tokens only; never hardcode.
   =========================================================================== */

:root {
  /* --- Semantic surfaces (dark is the default) ------------------------ */
  --bg:           #0C0D10;
  --bg-sunken:    #08090B;
  --surface:      #14161A;
  --surface-tint: #1B1E23;
  --text:         #ECEEF1;
  --text-soft:    #8A8F98;
  --border:       #2A2E35;
  --hairline:     #1E2127;

  /* --- Accent = neutral grey (NO sarment / colour) ---------------------- */
  --accent:          #E6E8EB;   /* near-white — primary actions, active */
  --accent-deep:     #C7CACF;
  --on-accent:       #0C0D10;
  --accent-contrast: #0C0D10;

  /* --- Functional status (muted terminal tones, used sparingly) ------- */
  --c-mint:  #3FB984; --c-mint-wash:  #10241C;
  --c-coral: #E0635C; --c-coral-wash: #2A1513;
  --c-amber: #D9A441; --c-amber-wash: #272013;

  /* legacy palette aliases (kept so older references still resolve) */
  --c-ink: #0C0D10; --c-paper: #ECEEF1; --c-paper-2: #1B1E23; --c-paper-edge: #2A2E35;
  --c-sarment: #8A8F98; --c-sarment-deep: #6A6F78; --c-sarment-wash: #1B1E23;

  /* --- Flat: no drop shadows ------------------------------------------ */
  --shadow:        none;
  --shadow-sm:     none;
  --shadow-lg:     none;
  --shadow-accent: 0 0 0 1px var(--accent);   /* focus ring only, not a drop */

  /* --- Typography ----------------------------------------------------- */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-ui:      "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* bold, not huge — restrained scale */
  --t-mega: clamp(2rem, 3.2vw, 2.6rem);   /* hero balance / wordmark */
  --t-xxl:  1.7rem;                        /* page titles            */
  --t-xl:   1.35rem;
  --t-lg:   1.15rem;
  --t-md:   1rem;
  --t-base: 0.95rem;
  --t-sm:   0.82rem;
  --t-xs:   0.72rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;

  --track-tight: -0.01em;
  --track-wide:  0.18em;

  /* --- Spacing (generous) --------------------------------------------- */
  --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;

  /* --- Geometry: square + hairline ------------------------------------ */
  --radius:    0;
  --radius-lg: 0;
  --radius-pill: 0;
  --border-w:  1px;
  --border-w-thick: 1px;

  /* --- Layout --------------------------------------------------------- */
  --rail:  0;
  --maxw:  1180px;
  --botnav-h: 60px;

  /* --- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  /* --- Layering scale -------------------------------------------------
     Single source for stacking order (low → high). Every overlay's z-index
     comes from one of these so the order-of-importance never drifts:
     chrome < popovers < drawers < modals < bottom sheet < toast < alerts. */
  --z-chrome:    20;    /* sticky topnav + fixed botnav                     */
  --z-popover:  100;    /* tooltips, select + search dropdowns (above chrome)*/
  --z-scrim:    200;    /* drawer / search overlay scrim                    */
  --z-drawer:   210;    /* slide-in drawer panel                           */
  --z-scrim-2:  220;    /* stacked (top) drawer scrim                      */
  --z-drawer-2: 230;    /* stacked (top) drawer panel                      */
  --z-modal:    300;    /* modal scrim + dialog (sits above any drawer)     */
  --z-modal-2:  320;    /* nested (l2) modal                               */
  --z-sheet:    400;    /* pager bottom sheet                              */
  --z-toast:    500;    /* transient pending-auth toast                    */
  --z-alerts:   600;    /* alerts drawer — top-most focused surface         */
}

/* ===========================================================================
   LIGHT VARIANT — toggled via [data-theme="light"] on <html>.
   Stark white swiss inverse; accent flips to near-black.
   =========================================================================== */
:root[data-theme="light"] {
  --bg:           #FFFFFF;
  --bg-sunken:    #F4F4F5;
  --surface:      #FFFFFF;
  --surface-tint: #F2F2F3;
  --text:         #0A0A0A;
  --text-soft:    #6B6B6B;
  --border:       #111315;
  --hairline:     #E4E4E7;

  --accent:       #111315;
  --accent-deep:  #000000;
  --on-accent:    #FFFFFF;

  --c-mint:  #1E9E6A; --c-mint-wash:  #E7F4EE;
  --c-coral: #D23F38; --c-coral-wash: #FBE6E4;
  --c-amber: #B7791F; --c-amber-wash: #F7EFD9;

  --c-ink: #0A0A0A; --c-paper: #FFFFFF; --c-paper-2: #F2F2F3; --c-paper-edge: #E4E4E7;
  --c-sarment: #6B6B6B; --c-sarment-deep: #444; --c-sarment-wash: #F2F2F3;

  --shadow-accent: 0 0 0 1px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  /* not when the user forces motion "full" — their choice overrides the OS */
  :root:not([data-motion="full"]) { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}
/* explicit "off" collapses the duration tokens regardless of OS setting */
:root[data-motion="off"] { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }