/* ==========================================================================
   NextShot — design tokens
   styles/tokens.css

   Angle: PHOTO-FIRST finished iOS (Mobbin).
   Cobalt ink on cream, photo calendar home, floating glass chrome.
   Typography is system / SF Pro only — clean, never script, never italic.

   THEME RESOLUTION
   1. :root                                          -> light (default)
   2. @media (prefers-color-scheme: dark)
        :root:not([data-theme="light"])              -> dark follows the OS
   3. :root[data-theme="dark"]                       -> dark always wins
   So an explicit data-theme beats the OS preference in BOTH directions.
   ========================================================================== */


/* ==========================================================================
   1. LIGHT (default)
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------
     1.1 BRAND CONSTANTS — the palette of record.
     These six NEVER change between themes. They are the identity, not the
     UI. Do not paint interface chrome directly from them; use the semantic
     tokens (--ns-tint, --ns-label, --ns-surface…) which adapt. Use these
     only where the brand literally is the subject: the wordmark, the app
     icon, brand illustration, marketing.
     ------------------------------------------------------------------ */
  --ns-brand-ink:    #1e4db7;
  --ns-brand-deep:   #163a8a;
  --ns-brand-mid:    #4a74c9;
  --ns-brand-light:  #8eb0e8;
  --ns-brand-paper:  #f5f0e6;
  --ns-brand-raised: #faf7f0;

  /* Short aliases kept for parity with the original DCLogic constants. */
  --ns-ink:    var(--ns-brand-ink);
  --ns-deep:   var(--ns-brand-deep);
  --ns-mid:    var(--ns-brand-mid);
  --ns-light:  var(--ns-brand-light);
  --ns-paper:  var(--ns-brand-paper);
  --ns-raised: var(--ns-brand-raised);

  /* ------------------------------------------------------------------
     1.2 SCORE WASH — 0..5, dark → light (low → high).
     Empty calendar cells do NOT use a wash step — they use fills.
     ------------------------------------------------------------------ */
  --ns-wash-0: #122f73; /* darkest — score 0 */
  --ns-wash-1: #163a8a;
  --ns-wash-2: #2558a8;
  --ns-wash-3: #4a7fd0;
  --ns-wash-4: #8eb0e6;
  --ns-wash-5: #d6e3f7; /* lightest — score 5 */

  /* Cream on dark washes (0–2); ink on light washes (3–5). */
  --ns-wash-label-lo: #f8f4ea;
  --ns-wash-label-hi: #163a8a;
  --ns-wash-edge: rgba(22, 58, 138, 0.16);

  /* ------------------------------------------------------------------
     1.3 SURFACES — a warm cream ladder. Opaque, never alpha, so shadows
     and blurs composite predictably.
       sunken   E7DEC8  wells, input troughs, photo placeholders
       grouped  EDE5D3  grouped/list screens (Journey, Composer)
       bg       F5F0E6  plain screens (Home, Frames, Splash) = paper
       surface  FAF7F0  cards + list rows sitting on either bg
       sheet    FCFAF4  modal sheets
       elevated FDFBF7  menus, popovers, toasts — highest plane
     ------------------------------------------------------------------ */
  --ns-background:          #f5f0e6;
  --ns-grouped-background:  #ede5d3;
  --ns-surface-sunken:      #e7dec8;
  --ns-surface:             #faf7f0;
  --ns-surface-sheet:       #fcfaf4;
  --ns-surface-elevated:    #fdfbf7;

  /* ------------------------------------------------------------------
     1.4 FILLS — cool cobalt at low alpha over warm cream. The mix reads as
     a tinted neutral, never a flat grey. Use for unselected chips, empty
     calendar cells, segmented tracks, progress troughs.
     ------------------------------------------------------------------ */
  --ns-fill-1: rgba(30, 77, 183, 0.14);
  --ns-fill-2: rgba(30, 77, 183, 0.10);
  --ns-fill-3: rgba(30, 77, 183, 0.065);
  --ns-fill-4: rgba(30, 77, 183, 0.04);

  /* ------------------------------------------------------------------
     1.5 LABELS — every text colour is derived from the ink hue. No greys.
     Measured against --ns-surface (#faf7f0):
       label            9.8:1   AAA
       label-secondary  5.0:1   AA  (safe for 13–16px)
       label-tertiary   2.8:1   decorative / >=19px only
       label-quaternary 1.7:1   glyph washes, disabled marks — never copy
     ------------------------------------------------------------------ */
  --ns-label:            #163a8a;
  --ns-label-secondary:  rgba(22, 58, 138, 0.75);
  --ns-label-tertiary:   rgba(22, 58, 138, 0.50);
  --ns-label-quaternary: rgba(22, 58, 138, 0.28);
  --ns-label-inverse:    #f8f4ea;
  --ns-placeholder:      rgba(22, 58, 138, 0.38);

  /* ------------------------------------------------------------------
     1.6 TINT — action only. Buttons, links, selected tab items, the today
     ring, the primary +. Structure never uses raw tint; it uses --ns-fill-*.
     ------------------------------------------------------------------ */
  --ns-tint:          #1e4db7;
  --ns-tint-pressed:  #163a8a;
  --ns-tint-subtle:   rgba(30, 77, 183, 0.12);  /* selected chip ground   */
  --ns-tint-wash:     #d6e3f7;                  /* opaque selected ground */
  --ns-on-tint:       #f8f4ea;

  /* The one surviving piece of ballpoint personality: a barely-there hatch
     over the tint. Layer it as a background list, not a texture overlay.
     usage: background: var(--ns-hatch), var(--ns-tint); */
  --ns-hatch: repeating-linear-gradient(-49deg,
                rgba(248, 244, 234, 0.11) 0 1px,
                rgba(248, 244, 234, 0)    1px 5px);

  /* ------------------------------------------------------------------
     1.7 SEPARATORS — hairlines are 0.5px, drawn in ink alpha so they sit
     on top of blur correctly. -opaque is a warm cream-grey for the rare
     solid rule that must not let the layer beneath show through.
     ------------------------------------------------------------------ */
  --ns-hairline:          0.5px;
  --ns-separator:         rgba(22, 58, 138, 0.20);
  --ns-separator-strong:  rgba(22, 58, 138, 0.30);
  --ns-separator-opaque:  #dcd3be;
  --ns-border-hairline:   0.5px solid rgba(22, 58, 138, 0.20);

  /* ------------------------------------------------------------------
     1.8 MATERIALS — translucent chrome. saturate(180%) is what makes the
     cobalt bleeding through read as iOS glass rather than a frosted div.
     Always pair with an opaque @supports-not fallback.
     ------------------------------------------------------------------ */
  --ns-blur-thin:    blur(10px) saturate(180%);
  --ns-blur-regular: blur(20px) saturate(180%);
  --ns-blur-thick:   blur(30px) saturate(180%);

  --ns-material-thin:     rgba(245, 240, 230, 0.60);
  --ns-material-regular:  rgba(245, 240, 230, 0.72);  /* nav bar + tab bar */
  --ns-material-thick:    rgba(250, 247, 240, 0.90);  /* menus, HUDs       */
  --ns-material-opaque:   #f5f0e6;                    /* no-blur fallback  */

  /* Warm-black scrim. Not neutral black (cold on cream) and not the old
     paper-stain brown (reads as a filter, not a dim). */
  --ns-scrim: rgba(26, 20, 9, 0.38);

  /* ------------------------------------------------------------------
     1.9 ELEVATION — soft, wide, ink-tinted, <=12% alpha, blur 3–6x the
     y-offset. If you can see the shadow as a distinct shape, it is wrong.
       1  resting card / list section
       2  raised card, pressed parent, sticky header
       3  popover, menu, toast
       4  hero / dragged element
       sheet casts UPWARD because sheets are bottom-anchored
     ------------------------------------------------------------------ */
  --ns-shadow-1: 0 0.5px 1px rgba(22, 58, 138, 0.05),
                 0 1px 3px   rgba(22, 58, 138, 0.06);
  --ns-shadow-2: 0 1px 2px   rgba(22, 58, 138, 0.06),
                 0 4px 10px  rgba(22, 58, 138, 0.07);
  --ns-shadow-3: 0 2px 5px   rgba(22, 58, 138, 0.07),
                 0 10px 24px rgba(22, 58, 138, 0.09);
  --ns-shadow-4: 0 4px 10px  rgba(22, 58, 138, 0.08),
                 0 18px 44px rgba(22, 58, 138, 0.12);
  --ns-shadow-sheet: 0 -0.5px 0 rgba(22, 58, 138, 0.10),
                     0 -8px 28px rgba(22, 58, 138, 0.13),
                     0 -24px 64px rgba(22, 58, 138, 0.10);
  /* Coloured lift for the primary tint button only. */
  --ns-shadow-tint:  0 1px 2px rgba(22, 58, 138, 0.22),
                     0 4px 12px rgba(22, 58, 138, 0.20);
  --ns-focus-ring:   0 0 0 3px rgba(30, 77, 183, 0.32);

  /* ------------------------------------------------------------------
     1.10 PAPER GRAIN — the craft signal that survives the wobble removal.
     One full-bleed pointer-events:none layer at z-index 95.
       .ns-grain { background-image: var(--ns-grain-image);
                   mix-blend-mode: var(--ns-grain-blend);
                   opacity: var(--ns-grain-opacity); }
     Light multiplies a warm brown speck; dark screens a cool pale speck,
     because multiply on navy turns to mud.
     ------------------------------------------------------------------ */
  --ns-grain-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.34%200%200%200%200%200.27%200%200%200%200%200.13%200%200%200%200.055%200'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23g)'/%3E%3C/svg%3E");
  --ns-grain-blend: multiply;
  --ns-grain-opacity: 1;

  /* ------------------------------------------------------------------
     1.11 RADII — one continuous-corner scale. Nothing irregular, nothing
     percentage-based except --ns-r-full. Squircle feel, never wobble.
       xs   6  legend swatches, tiny badges, bar caps
       sm   8  chips, inline tags, small controls
       md  12  calendar cells, thumbnails, compact cards, buttons
       lg  16  cards, sheets, photos, list sections
       xl  20  media hero, capture preview
       2xl 28  milestone tiles, feature tiles
       full    pills, avatars, shutter, filter chips
     ------------------------------------------------------------------ */
  --ns-r-xs:   6px;
  --ns-r-sm:   8px;
  --ns-r-md:   12px;
  --ns-r-lg:   16px;
  --ns-r-xl:   20px;
  --ns-r-2xl:  28px;
  --ns-r-full: 999px;

  /* Semantic aliases so screens read intent, not numbers.
     Sheet uses 2xl — modern iOS sheets sit near 28–38pt continuous corners. */
  --ns-r-cell:  var(--ns-r-md);
  --ns-r-card:  var(--ns-r-lg);
  --ns-r-sheet: var(--ns-r-2xl);
  --ns-r-photo: var(--ns-r-md);
  --ns-r-tile:  var(--ns-r-2xl);

  /* Progressive enhancement: true superellipse where supported.
     @supports (corner-shape: squircle) { .card { corner-shape: var(--ns-corner-shape); } } */
  --ns-corner-shape: squircle;

  /* ------------------------------------------------------------------
     1.12 SPACING — 8pt grid, 4pt half-step. Screen gutter is 16 everywhere.
     ------------------------------------------------------------------ */
  --ns-sp-0:   0px;
  --ns-sp-hair: 2px;
  --ns-sp-1:   4px;
  --ns-sp-2:   8px;
  --ns-sp-3:   12px;
  --ns-sp-4:   16px;
  --ns-sp-5:   20px;
  --ns-sp-6:   24px;
  --ns-sp-7:   28px;
  --ns-sp-8:   32px;
  --ns-sp-10:  40px;
  --ns-sp-12:  48px;
  --ns-sp-16:  64px;

  /* ------------------------------------------------------------------
     1.13 MOTION
       spring    sheets, push/pop, detent snap, press release
       standard  default UI, selection, material on/off
       decel     entering elements
       accel     exiting elements
     ------------------------------------------------------------------ */
  --ns-ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --ns-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ns-ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ns-ease-accel:    cubic-bezier(0.4, 0, 1, 1);

  --ns-dur-instant: 100ms;  /* press down                       */
  --ns-dur-fast:    150ms;  /* selection, colour change         */
  --ns-dur-base:    250ms;  /* default transition, scrim, press release */
  --ns-dur-slow:    350ms;  /* nav push/pop, sheet dismiss      */
  --ns-dur-sheet:   400ms;  /* sheet present, detent change     */
  --ns-dur-toast:   2000ms; /* toast dwell                      */

  --ns-press-scale:    0.96; /* tappables under ~200pt wide */
  --ns-press-scale-lg: 0.98; /* full-width cards and rows   */
  --ns-press-opacity:  0.55; /* bare text buttons, bar items */
  --ns-disabled-opacity: 0.35;

  /* ------------------------------------------------------------------
     1.14 TYPE — clean finished iOS UI (Mobbin / HIG).
     System / SF Pro only. No script faces, no italics, no decorative fonts.
     Hierarchy is weight + size + color only.
     ------------------------------------------------------------------ */
  --ns-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ns-font-display: var(--ns-font-ui);
  --ns-font-body:    var(--ns-font-ui);
  --ns-font-caps:    var(--ns-font-ui);

  --ns-weight-display:        700;
  --ns-weight-display-strong: 700;
  --ns-weight-body:           400;
  --ns-weight-ui:             400;
  --ns-weight-ui-medium:      500;
  --ns-weight-ui-semibold:    600;
  --ns-weight-ui-bold:        700;
  --ns-weight-caps:           600;
  --ns-weight-caps-strong:    700;

  --ns-size-display-xl: 34px;
  --ns-size-display-lg: 28px;
  --ns-size-display-md: 22px;
  --ns-size-display-sm: 20px;
  --ns-size-numeral:    34px;
  --ns-size-headline:   17px;
  --ns-size-body:       17px;
  --ns-size-callout:    16px;
  --ns-size-subhead:    15px;
  --ns-size-footnote:   13px;
  --ns-size-caption:    12px;
  --ns-size-caption-sm: 11px;
  --ns-size-tab:        10px;
  --ns-size-section:    13px;
  --ns-size-micro:      11px;

  --ns-lh-display-xl: 41px;
  --ns-lh-display-lg: 34px;
  --ns-lh-display-md: 28px;
  --ns-lh-display-sm: 25px;
  --ns-lh-numeral:    41px;
  --ns-lh-headline:   22px;
  --ns-lh-body:       22px;
  --ns-lh-callout:    21px;
  --ns-lh-subhead:    20px;
  --ns-lh-footnote:   18px;
  --ns-lh-caption:    16px;
  --ns-lh-caption-sm: 13px;
  --ns-lh-tab:        12px;
  --ns-lh-section:    18px;
  --ns-lh-micro:      13px;

  --ns-tracking-display:    -0.02em;
  --ns-tracking-headline:   -0.022em;
  --ns-tracking-body:       -0.022em;
  --ns-tracking-callout:    -0.016em;
  --ns-tracking-subhead:    -0.016em;
  --ns-tracking-footnote:   -0.008em;
  --ns-tracking-caption:    0em;
  --ns-tracking-caption-sm: 0.006em;
  --ns-tracking-tab:        0.01em;
  --ns-tracking-section:    0.02em;
  --ns-tracking-micro:      0.06em;

  --ns-type-display-xl: var(--ns-weight-ui-bold) var(--ns-size-display-xl)/var(--ns-lh-display-xl) var(--ns-font-ui);
  --ns-type-display-lg: var(--ns-weight-ui-bold) var(--ns-size-display-lg)/var(--ns-lh-display-lg) var(--ns-font-ui);
  --ns-type-display-md: var(--ns-weight-ui-bold) var(--ns-size-display-md)/var(--ns-lh-display-md) var(--ns-font-ui);
  --ns-type-display-sm: var(--ns-weight-ui-semibold) var(--ns-size-display-sm)/var(--ns-lh-display-sm) var(--ns-font-ui);
  --ns-type-numeral:    var(--ns-weight-ui-bold) var(--ns-size-numeral)/var(--ns-lh-numeral) var(--ns-font-ui);
  --ns-type-headline:   var(--ns-weight-ui-semibold) var(--ns-size-headline)/var(--ns-lh-headline) var(--ns-font-ui);
  --ns-type-body:       var(--ns-weight-ui) var(--ns-size-body)/var(--ns-lh-body) var(--ns-font-ui);
  --ns-type-callout:    var(--ns-weight-ui) var(--ns-size-callout)/var(--ns-lh-callout) var(--ns-font-ui);
  --ns-type-subhead:    var(--ns-weight-ui) var(--ns-size-subhead)/var(--ns-lh-subhead) var(--ns-font-ui);
  --ns-type-footnote:   var(--ns-weight-ui) var(--ns-size-footnote)/var(--ns-lh-footnote) var(--ns-font-ui);
  --ns-type-caption:    var(--ns-weight-ui) var(--ns-size-caption)/var(--ns-lh-caption) var(--ns-font-ui);
  --ns-type-caption-sm: var(--ns-weight-ui) var(--ns-size-caption-sm)/var(--ns-lh-caption-sm) var(--ns-font-ui);
  --ns-type-tab:        var(--ns-weight-ui-medium) var(--ns-size-tab)/var(--ns-lh-tab) var(--ns-font-ui);
  --ns-type-section:    var(--ns-weight-ui-semibold) var(--ns-size-section)/var(--ns-lh-section) var(--ns-font-ui);
  --ns-type-micro:      var(--ns-weight-ui-semibold) var(--ns-size-micro)/var(--ns-lh-micro) var(--ns-font-ui);

  /* ------------------------------------------------------------------
     1.15 LAYOUT — 390 x 844 reference. Safe-area vars fall back to the
     iPhone 14/15 non-Pro values so the prototype is honest in a desktop
     browser where env() resolves to 0.
     ------------------------------------------------------------------ */
  --ns-screen-w: 390px;
  --ns-screen-h: 844px;

  --ns-safe-top:    env(safe-area-inset-top, 47px);
  --ns-safe-bottom: env(safe-area-inset-bottom, 34px);
  --ns-safe-left:   env(safe-area-inset-left, 0px);
  --ns-safe-right:  env(safe-area-inset-right, 0px);

  --ns-gutter:      16px;
  --ns-gutter-tight: 12px;

  --ns-navbar-h:       44px;  /* compact bar, below the status bar */
  --ns-navbar-large-h: 52px;  /* large-title region                */
  --ns-navbar-total:       calc(var(--ns-safe-top) + var(--ns-navbar-h));
  --ns-navbar-large-total: calc(var(--ns-safe-top) + var(--ns-navbar-h) + var(--ns-navbar-large-h));

  /* Fixed iOS tab bar — flush to bottom + safe-area (not a floating pill).
     log-lift / log-size keep the raised + readable above the bar. */
  --ns-tabbar-h:        49px;
  --ns-tabbar-margin:   0px;
  --ns-tabbar-log-size: 48px;
  --ns-tabbar-log-lift: 10px;
  --ns-tabbar-total: calc(
    var(--ns-tabbar-h) + var(--ns-safe-bottom) + var(--ns-tabbar-log-lift)
  );

  --ns-hit-min: 44px;
  --ns-scroll-pad-bottom: calc(var(--ns-tabbar-total) + var(--ns-sp-4));

  /* Soft scroll-edge fade under chrome */
  --ns-edge-fade-h: 28px;

  /* Sheets */
  --ns-sheet-top-inset: 10px;  /* gap above a .large sheet so the parent peeks */
  --ns-sheet-max-h: calc(100dvh - var(--ns-safe-top) - var(--ns-sheet-top-inset));
  --ns-sheet-medium-h: 50dvh;
  --ns-grabber-w: 36px;
  --ns-grabber-h: 5px;
  --ns-grabber-top: 5px;
  --ns-grabber-color: rgba(30, 77, 183, 0.28);
  --ns-sheet-content-top: 24px;

  /* Calendar heat grid: 7 columns, 16pt gutters, 8pt gaps -> 44.3pt cells */
  --ns-cell-gap: 8px;
  --ns-cell-size: 44px;

  /* Icon sizes */
  --ns-icon-sm: 18px;
  --ns-icon-md: 22px;   /* bar buttons     */
  --ns-icon-lg: 25px;   /* tab bar         */
  --ns-icon-xl: 30px;
  --ns-stroke-icon: 1.8;  /* hand-inked drink/brand stroke; Heroicons use 1.5 via data-family */
}

/* ==========================================================================
   2. DARK — deep-navy paper, warm cream ink. The brand relationship is
   inverted, not greyed: surfaces stay cobalt-family, text stays cream-family,
   fills lift ~1.7x because low-alpha overlays vanish on navy.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Brand constants do NOT change. --ns-brand-* stay as declared above. */

    /* Score wash inverts: dark/cold at 1, bright/hot at 8. */
    --ns-wash-0: #152448; /* darkest */
    --ns-wash-1: #1b2a4d;
    --ns-wash-2: #2a4678;
    --ns-wash-3: #4169b5;
    --ns-wash-4: #7ba2e1;
    --ns-wash-5: #c5d8f5; /* lightest */
    --ns-wash-label-lo: #efe7d6;  /* on dark steps 0–2 */
    --ns-wash-label-hi: #0c1224;  /* on light steps 3–5 */
    --ns-wash-edge: rgba(142, 176, 232, 0.20);

    --ns-background:          #0c1224;
    --ns-grouped-background:  #080d1c;
    --ns-surface-sunken:      #070c19;
    --ns-surface:             #151e37;
    --ns-surface-sheet:       #1b2440;
    --ns-surface-elevated:    #1d2745;

    --ns-fill-1: rgba(142, 176, 232, 0.22);
    --ns-fill-2: rgba(142, 176, 232, 0.16);
    --ns-fill-3: rgba(142, 176, 232, 0.11);
    --ns-fill-4: rgba(142, 176, 232, 0.07);

    --ns-label:            #efe7d6;
    --ns-label-secondary:  rgba(239, 231, 214, 0.66);
    --ns-label-tertiary:   rgba(239, 231, 214, 0.42);
    --ns-label-quaternary: rgba(239, 231, 214, 0.24);
    --ns-label-inverse:    #0c1224;
    --ns-placeholder:      rgba(239, 231, 214, 0.34);

    /* #1e4db7 on navy is 1.4:1 — unusable. The tint lifts to 6.8:1. */
    --ns-tint:         #7fa8e8;
    --ns-tint-pressed: #a5c4f2;
    --ns-tint-subtle:  rgba(127, 168, 232, 0.18);
    --ns-tint-wash:    #22375f;
    --ns-on-tint:      #0c1224;
    --ns-hatch: repeating-linear-gradient(-49deg,
                  rgba(12, 18, 36, 0.16) 0 1px,
                  rgba(12, 18, 36, 0)    1px 5px);

    --ns-separator:        rgba(142, 176, 232, 0.22);
    --ns-separator-strong: rgba(142, 176, 232, 0.34);
    --ns-separator-opaque: #232f4e;
    --ns-border-hairline:  0.5px solid rgba(142, 176, 232, 0.22);

    --ns-material-thin:    rgba(12, 18, 36, 0.60);
    --ns-material-regular: rgba(12, 18, 36, 0.72);
    --ns-material-thick:   rgba(21, 30, 55, 0.90);
    --ns-material-opaque:  #0c1224;
    --ns-scrim: rgba(3, 6, 14, 0.55);

    /* Shadows are near-invisible on navy: elevation is carried by lightness
       (surface -> sheet -> elevated). These only anchor the edge. */
    --ns-shadow-1: 0 0.5px 1px rgba(0, 0, 0, 0.28),
                   0 1px 3px   rgba(0, 0, 0, 0.24);
    --ns-shadow-2: 0 1px 2px   rgba(0, 0, 0, 0.32),
                   0 4px 10px  rgba(0, 0, 0, 0.28);
    --ns-shadow-3: 0 2px 5px   rgba(0, 0, 0, 0.36),
                   0 10px 24px rgba(0, 0, 0, 0.34);
    --ns-shadow-4: 0 4px 10px  rgba(0, 0, 0, 0.42),
                   0 18px 44px rgba(0, 0, 0, 0.44);
    --ns-shadow-sheet: 0 -0.5px 0 rgba(142, 176, 232, 0.16),
                       0 -10px 34px rgba(0, 0, 0, 0.50),
                       0 -28px 72px rgba(0, 0, 0, 0.36);
    --ns-shadow-tint:  0 1px 2px rgba(0, 0, 0, 0.40),
                       0 4px 12px rgba(0, 0, 0, 0.34);
    --ns-focus-ring:   0 0 0 3px rgba(127, 168, 232, 0.40);

    /* Multiply turns navy to mud — screen a cool pale speck instead. */
    --ns-grain-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='gd'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.66%200%200%200%200%200.74%200%200%200%200%200.92%200%200%200%200.05%200'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23gd)'/%3E%3C/svg%3E");
    --ns-grain-blend: screen;
    --ns-grain-opacity: 0.55;

    --ns-grabber-color: rgba(239, 231, 214, 0.30);
  }
}

/* Explicit dark — identical values, but wins even when the OS prefers light. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ns-wash-0: #152448;
  --ns-wash-1: #1b2a4d;
  --ns-wash-2: #2a4678;
  --ns-wash-3: #4169b5;
  --ns-wash-4: #7ba2e1;
  --ns-wash-5: #c5d8f5;
  --ns-wash-label-lo: #efe7d6;
  --ns-wash-label-hi: #0c1224;
  --ns-wash-edge: rgba(142, 176, 232, 0.20);

  --ns-background:          #0c1224;
  --ns-grouped-background:  #080d1c;
  --ns-surface-sunken:      #070c19;
  --ns-surface:             #151e37;
  --ns-surface-sheet:       #1b2440;
  --ns-surface-elevated:    #1d2745;

  --ns-fill-1: rgba(142, 176, 232, 0.22);
  --ns-fill-2: rgba(142, 176, 232, 0.16);
  --ns-fill-3: rgba(142, 176, 232, 0.11);
  --ns-fill-4: rgba(142, 176, 232, 0.07);

  --ns-label:            #efe7d6;
  --ns-label-secondary:  rgba(239, 231, 214, 0.66);
  --ns-label-tertiary:   rgba(239, 231, 214, 0.42);
  --ns-label-quaternary: rgba(239, 231, 214, 0.24);
  --ns-label-inverse:    #0c1224;
  --ns-placeholder:      rgba(239, 231, 214, 0.34);

  --ns-tint:         #7fa8e8;
  --ns-tint-pressed: #a5c4f2;
  --ns-tint-subtle:  rgba(127, 168, 232, 0.18);
  --ns-tint-wash:    #22375f;
  --ns-on-tint:      #0c1224;
  --ns-hatch: repeating-linear-gradient(-49deg,
                rgba(12, 18, 36, 0.16) 0 1px,
                rgba(12, 18, 36, 0)    1px 5px);

  --ns-separator:        rgba(142, 176, 232, 0.22);
  --ns-separator-strong: rgba(142, 176, 232, 0.34);
  --ns-separator-opaque: #232f4e;
  --ns-border-hairline:  0.5px solid rgba(142, 176, 232, 0.22);

  --ns-material-thin:    rgba(12, 18, 36, 0.60);
  --ns-material-regular: rgba(12, 18, 36, 0.72);
  --ns-material-thick:   rgba(21, 30, 55, 0.90);
  --ns-material-opaque:  #0c1224;
  --ns-scrim: rgba(3, 6, 14, 0.55);

  --ns-shadow-1: 0 0.5px 1px rgba(0, 0, 0, 0.28),
                 0 1px 3px   rgba(0, 0, 0, 0.24);
  --ns-shadow-2: 0 1px 2px   rgba(0, 0, 0, 0.32),
                 0 4px 10px  rgba(0, 0, 0, 0.28);
  --ns-shadow-3: 0 2px 5px   rgba(0, 0, 0, 0.36),
                 0 10px 24px rgba(0, 0, 0, 0.34);
  --ns-shadow-4: 0 4px 10px  rgba(0, 0, 0, 0.42),
                 0 18px 44px rgba(0, 0, 0, 0.44);
  --ns-shadow-sheet: 0 -0.5px 0 rgba(142, 176, 232, 0.16),
                     0 -10px 34px rgba(0, 0, 0, 0.50),
                     0 -28px 72px rgba(0, 0, 0, 0.36);
  --ns-shadow-tint:  0 1px 2px rgba(0, 0, 0, 0.40),
                     0 4px 12px rgba(0, 0, 0, 0.34);
  --ns-focus-ring:   0 0 0 3px rgba(127, 168, 232, 0.40);

  --ns-grain-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='gd'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.66%200%200%200%200%200.74%200%200%200%200%200.92%200%200%200%200.05%200'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23gd)'/%3E%3C/svg%3E");
  --ns-grain-blend: screen;
  --ns-grain-opacity: 0.55;

  --ns-grabber-color: rgba(239, 231, 214, 0.30);
}

/* Explicit light — restores the light values even when the OS prefers dark.
   (Redundant with rule 1 in most cases, but makes the toggle bulletproof if
   a future stylesheet ever re-declares dark at a higher specificity.) */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ==========================================================================
   3. REDUCED MOTION — retune the tokens rather than nuking every animation.
   Translation and scale go away; opacity cross-fades stay, at 150ms.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ns-ease-spring:   cubic-bezier(0.4, 0, 0.2, 1);
    --ns-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ns-ease-decel:    cubic-bezier(0.4, 0, 0.2, 1);
    --ns-ease-accel:    cubic-bezier(0.4, 0, 0.2, 1);

    --ns-dur-instant: 1ms;
    --ns-dur-fast:    120ms;
    --ns-dur-base:    150ms;
    --ns-dur-slow:    150ms;
    --ns-dur-sheet:   150ms;

    --ns-press-scale:    1;
    --ns-press-scale-lg: 1;
  }
}

/* ==========================================================================
   4. MINIMAL ROOT WIRING
   Everything else lives in the component stylesheets; these four rules only
   exist so a bare page already renders in-brand and in the right theme.
   ========================================================================== */

html {
  background: var(--ns-background);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ns-background);
  color: var(--ns-label);
  font: var(--ns-type-body);
  font-style: normal;
  letter-spacing: var(--ns-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::placeholder {
  color: var(--ns-placeholder);
  opacity: 1;
}

::selection {
  background: var(--ns-tint-subtle);
  color: var(--ns-label);
}