/* ==========================================================================
   NOCTURN — design tokens
   Palette 4a “Neutral Onyx + amber”. The accent is a signal, not a fill:
   primary play action, one active state, progress. Nothing else.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Colour ---------------------------------------------------------- */
  --c-bg: #080808;            /* page base */
  --c-bg-raised: #0A0A0B;     /* drawer, footer */
  --c-bg-sunken: #0F0F10;     /* list rows */
  --c-surface: #121214;       /* inputs, chips, secondary controls */
  --c-card: #1B1B1E;          /* cards, thumbnail ground */
  --c-card-hover: #222226;
  --c-line: #2A2A2E;          /* borders that carry card edges */
  --c-line-soft: #1B1B1E;     /* dividers */
  --c-line-strong: #4A4A50;   /* hover borders */

  --c-text: #F5F5F6;
  --c-text-2: #A6A39E;        /* secondary / muted */
  --c-text-3: #8A8783;        /* tertiary, mono labels */
  --c-text-4: #6F6D6A;        /* disabled, captions on imagery */
  --c-ink: #0A0A0A;           /* text on white */

  /* The "on" fill: a selected chip, a checked box, a filled button. This was
     --c-text (#F5F5F6) and read as a slab of white on a near-black page —
     loud, and competing with the artwork the page is meant to be about.
     A warm light grey still reads as clearly on, and sits in the same warm
     ramp as --c-text-2 and --c-text-3. */
  --c-on: #D9D6D0;
  --c-on-hover: #E8E5E0;

  --c-accent: #F28A3C;
  --c-accent-hover: #F59A55;
  --c-accent-ink: #150C04;    /* text on accent */
  --c-accent-soft: rgba(242, 138, 60, .13);
  --c-accent-line: rgba(242, 138, 60, .5);

  --c-danger: #F0696D;
  --c-danger-soft: rgba(240, 105, 109, .12);
  --c-success: #5BC48A;

  --c-scrim: rgba(4, 4, 4, .66);
  --c-glass: rgba(8, 8, 8, .78);
  --c-glass-strong: rgba(18, 18, 20, .9);
  --c-glass-line: rgba(255, 255, 255, .08);
  --c-hover: rgba(255, 255, 255, .06);

  /* Tints — white over the dark ground. The ladder every glass control is
     built from; --c-hover and --c-glass-line are its first two steps. */
  --c-tint-1: rgba(255, 255, 255, .12);   /* hairline on glass */
  --c-tint-2: rgba(255, 255, 255, .14);   /* border on overlay-header controls */
  --c-tint-3: rgba(255, 255, 255, .16);   /* hover fill, inner top highlight */
  --c-tint-4: rgba(255, 255, 255, .22);   /* tracks, rings, unfilled progress */

  /* Shades — the page ground at partial alpha, for scrims laid over art.
     Written as the bg colour rather than `transparent` so the fade never
     runs through grey on the way out. */
  --c-shade-0: rgba(8, 8, 8, 0);
  --c-shade-1: rgba(8, 8, 8, .35);
  --c-shade-2: rgba(8, 8, 8, .55);
  --c-shade-3: rgba(8, 8, 8, .9);
  --c-scrim-soft: rgba(0, 0, 0, .5);      /* over imagery, lighter than --c-scrim */

  --c-line-hover: #37373C;    /* field borders under the cursor */
  --c-line-control: #3A3A40;  /* checkbox/radio outline, sheet grab bar */
  --c-hatch: #151518;         /* the stripe in "content is gone" hatching */

  /* The sheen that lifts a control off the page: brighter at the top edge,
     almost gone at the bottom. One definition because the header wears it in
     two states — on its own over a solid page, and layered over the dark
     scrim when the header floats above artwork. */
  --g-sheen: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));

  --c-warning: #E8B04B;

  /* ---- Data viz (validated against the #121214 chart surface) ----------
     Accent is the brand amber stepped into the dark chart band (L .48–.67);
     muted is the de-emphasis gray for comparison series.                 */
  --viz-surface: #121214;
  --viz-accent: #DB7431;
  --viz-muted: #65635F;
  --viz-grid: #232327;
  --viz-axis: #8A8783;
  --viz-seq-1: #24190F;
  --viz-seq-2: #4A2C18;
  --viz-seq-3: #7A4320;
  --viz-seq-4: #AC5C28;
  --viz-seq-5: #DB7431;

  /* ---- Type ------------------------------------------------------------ */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --t-hero: clamp(40px, 5.6vw, 76px);
  --t-display: clamp(34px, 4.4vw, 58px);
  --t-h1: clamp(26px, 3vw, 40px);
  --t-h2: clamp(19px, 2vw, 24px);
  --t-h3: 17px;
  --t-body-l: clamp(14px, 1.1vw, 15.5px);
  --t-body: 14px;
  --t-small: 13px;
  --t-caption: 12px;
  --t-micro: 10px;

  /* ---- Space ----------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  --container: 1480px;
  --gutter: clamp(16px, 4vw, 56px);
  --section-gap: clamp(40px, 4.5vw, 60px);
  --grid-gap: clamp(12px, 1.4vw, 22px);

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --sh-pop: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 1px var(--c-line);
  --sh-lift: 0 16px 36px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px var(--c-accent-soft);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 380ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-header: 40;
  --z-tabbar: 45;
  --z-mini: 50;
  --z-drawer: 60;

  /* ---- Chrome sizes ---------------------------------------------------- */
  --header-h: 66px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 767px) {
  :root {
    --header-h: 56px;
  }
}