/* ============================================================================
   AmbySound — tokens.ambysound.css · Brand axis (#2) override over ds.shadcn.css

   LANGUAGE v3 — «SHADER ARCHIVE». The first screen is the specification:
   a warm sepia WebGL mesh behind everything, white type on it, glass surfaces,
   pill controls, light weights, small copy. Every other screen is derived from
   that screen — this file is where the derivation lives.

   Five rules the hero states and the rest of the site obeys:
     1. The BACKGROUND is the shader. No page paints its own canvas colour.
     2. Surfaces are GLASS: translucent dark + hairline + blur. Never opaque.
     3. White speaks for the interface, amber speaks for the SOUND — and only
        the sound. white = CTA · active · selected · badge;
        amber = play affordances · waveform progress · the playing state.
        Prices, counts and meta stay neutral: an accent on data is confetti.
     4. Type is LIGHT and SMALL: display 300, accent 500 italic, body xs/sm at
        70% white. Only the page title is allowed to be large.
     5. Every control is a pill; every surface is 24px; art is 16px.

   Contrast is budgeted against the shader's WORST case (a pure-white spot,
   dimmed to 32% on inner pages) — numbers in the comments are computed, not
   estimated: white on glass 15.5:1 · amber on glass 6.8:1 · white70 8.3:1.

   §1 tokens · §2 light modifier (structure kept, toggle OFF) · §3 DS gaps
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* ---------------------------------------------------------------------------
   §1 — TOKEN OVERRIDE
   --------------------------------------------------------------------------- */
:root {
  /* the page itself is the shader's fallback colour: warm near-black. Nothing
     else paints a full-bleed background — surfaces float on the shader. */
  --background: #0B0A09;
  --foreground: #FFFFFF;

  /* GLASS LADDER — the hero's own values (bg-white/5 on the badge) generalised.
     panel = the quiet plate, card = the object, popover = the lifted object. */
  --glass-1: rgb(255 255 255 / 0.05);            /* hero glass-badge */
  --glass-2: rgb(255 255 255 / 0.08);
  --panel: rgb(18 15 13 / 0.55);
  --card: rgb(24 20 17 / 0.72);                  /* white on it: 15.5:1 */
  --card-foreground: #FFFFFF;
  --popover: rgb(28 24 20 / 0.92);
  --popover-foreground: #FFFFFF;

  /* white is the primary action — exactly the hero's solid button */
  --primary: #FFFFFF;
  --primary-foreground: #000000;                 /* 21:1 */
  --primary-hover: rgb(255 255 255 / 0.9);
  --primary-soft: rgb(255 255 255 / 0.1);

  /* amber is the SOUND and nothing else: play glyphs, waveform progress, the
     playing state. On glass it reads 6.8:1 — it may carry text here, unlike
     on cream, but it is never spent on prices or counts. */
  --audio: #D9A24B;
  --audio-soft: rgb(217 162 75 / 0.16);
  --audio-hover: #E4B368;
  /* --primary-ink kept as an alias so v2 rules that used it keep working */
  --primary-ink: var(--audio);

  --secondary: var(--glass-1);
  --secondary-foreground: #FFFFFF;
  --secondary-hover: var(--glass-2);
  --muted: var(--glass-1);
  --muted-foreground: rgb(255 255 255 / 0.7);    /* the hero's body colour */
  --faint: rgb(255 255 255 / 0.5);
  --accent: var(--glass-2);
  --accent-foreground: #FFFFFF;
  --destructive: #FF6B5E;
  --destructive-foreground: #000000;
  --destructive-hover: rgb(255 107 94 / 0.9);
  --success: #6FD69B;
  --success-foreground: #000000;

  /* hairlines: the hero uses white/30 on the ghost button and white/20 on the
     badge's top edge. Structure lines are quieter than interactive edges. */
  --line: rgb(255 255 255 / 0.1);                /* grids, tables, separators */
  --border: rgb(255 255 255 / 0.14);             /* field edges */
  --border-strong: rgb(255 255 255 / 0.3);       /* ghost-button edge */
  --input: var(--border);
  --ghost-hover: var(--glass-2);
  --row-hover: rgb(255 255 255 / 0.04);
  --ring: rgb(255 255 255 / 0.6);
  --ring-shadow: 0 0 0 3px rgb(255 255 255 / 0.25);
  --ring-shadow-error: 0 0 0 3px rgb(255 107 94 / 0.3);

  --background-glass: transparent;               /* the header floats on the shader */
  --scrim-fill: rgb(0 0 0 / 0.6);
  --wave-fill: rgb(255 255 255 / 0.3);
  --watermark-ink: rgb(255 255 255 / 0.04);
  --prose-foreground: rgb(255 255 255 / 0.75);

  /* --ink is no longer a contrasting plate: on a dark site the footer is just
     a deeper pane of the same glass. */
  --ink: rgb(0 0 0 / 0.45);
  --ink-foreground: #FFFFFF;
  --ink-muted: rgb(255 255 255 / 0.55);
  --ink-border: rgb(255 255 255 / 0.1);

  /* on-art text (over cover gradients) — unchanged role, restated for dark */
  --on-art: #FFFFFF;
  --on-art-strong: rgb(255 255 255 / 0.85);
  --on-art-muted: rgb(255 255 255 / 0.8);
  --on-art-soft: rgb(255 255 255 / 0.75);
  --on-art-border: rgb(255 255 255 / 0.35);
  --on-art-fill: rgb(255 255 255 / 0.1);
  --img-shade-strong: rgb(0 0 0 / 0.85);
  --img-shade-soft: rgb(0 0 0 / 0.45);

  /* RADIUS — two honest knobs plus art. The v2 sm/md/lg/xl ladder collapsed to
     one value under four names (design-system.html · Contradictions #2); the
     aliases below now point at the two real knobs instead of pretending. */
  --radius-pill: 999px;                          /* every control */
  --radius-surface: 1.5rem;                      /* every card/panel/sheet */
  --radius-art: 1rem;                            /* covers, thumbs, wells */
  --radius: var(--radius-surface);
  --radius-sm: var(--radius-pill);
  --radius-md: var(--radius-pill);
  --radius-lg: var(--radius-art);
  --radius-xl: 1.25rem;
  --radius-2xl: var(--radius-surface);
  --radius-field: var(--radius-pill);

  /* SHADOW — on a dark page a diffuse shadow is invisible; depth comes from
     the glass fill and the hairline. Shadows stay only where an object must
     read as lifted OFF the shader (media, sheets, the hero's own objects). */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / 0.45);
  --shadow-md: 0 14px 34px -12px rgb(0 0 0 / 0.6);
  --shadow-float: 0 24px 60px -24px rgb(0 0 0 / 0.75), 0 6px 16px -8px rgb(0 0 0 / 0.5);
  --shadow-float-hover: 0 30px 70px -26px rgb(0 0 0 / 0.8), 0 8px 20px -10px rgb(0 0 0 / 0.55);

  --section-gap-tight: var(--space-6);
  --section-gap-loose: var(--space-16);

  /* ONE family. The «mono» role is tabular numerals, not a second face. */
  --font-sans: 'Roboto Flex', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Flex', ui-sans-serif, system-ui, sans-serif;

  --container: 100%;

  /* the ambient CSS blobs are retired: the WebGL shader IS the background now.
     Kept at transparent so the old modifier cannot paint over it. */
  --shader-blob-1: transparent;
  --shader-blob-2: transparent;
  --shader-blob-3: transparent;
}

/* ---------------------------------------------------------------------------
   §2 — LIGHT as MODIFIER. The Soft Archive cream palette, kept whole so the
        instance can flip back without a rewrite. Applied only under an explicit
        [data-theme="light"] — never by prefers-color-scheme.
   --------------------------------------------------------------------------- */
:root[data-theme='light'] {
  --background: oklch(0.955 0.013 88);
  --foreground: oklch(0.235 0.006 80);
  --glass-1: oklch(0.235 0.006 80 / 0.04);
  --glass-2: oklch(0.235 0.006 80 / 0.07);
  --panel: oklch(0.974 0.005 92);
  --card: oklch(0.992 0.003 95);
  --card-foreground: oklch(0.235 0.006 80);
  --popover: oklch(0.992 0.003 95);
  --popover-foreground: oklch(0.235 0.006 80);

  --primary: oklch(0.235 0.006 80);
  --primary-foreground: oklch(0.992 0.003 95);
  --primary-hover: oklch(0.300 0.008 80);
  --primary-soft: oklch(0.235 0.006 80 / 0.08);

  --audio: oklch(0.520 0.115 66);
  --audio-soft: oklch(0.748 0.122 76.3 / 0.16);
  --audio-hover: oklch(0.470 0.110 64);

  --secondary: oklch(0.923 0.009 88);
  --secondary-foreground: oklch(0.235 0.006 80);
  --secondary-hover: oklch(0.895 0.011 88);
  --muted: oklch(0.923 0.009 88);
  --muted-foreground: oklch(0.500 0.012 80);
  --faint: oklch(0.565 0.012 80);
  --accent: oklch(0.895 0.011 88);
  --accent-foreground: oklch(0.235 0.006 80);
  --destructive: oklch(0.577 0.245 27.3);
  --destructive-foreground: oklch(0.992 0.003 95);
  --success: oklch(0.527 0.154 150);
  --success-foreground: oklch(0.992 0.003 95);

  --line: oklch(0.235 0.006 80 / 0.1);
  --border: oklch(0.898 0.010 88);
  --border-strong: oklch(0.860 0.012 88);
  --input: oklch(0.898 0.010 88);
  --ghost-hover: oklch(0.895 0.011 88);
  --row-hover: oklch(0.923 0.009 88 / 0.5);
  --ring: var(--audio);
  --ring-shadow: 0 0 0 3px oklch(0.520 0.115 66 / 0.30);

  --background-glass: oklch(0.955 0.013 88 / 0.82);
  --scrim-fill: oklch(0.20 0.010 70 / 0.4);
  --wave-fill: oklch(0.235 0.006 80 / 0.35);
  --prose-foreground: oklch(0.42 0.010 80);

  --ink: oklch(0.240 0.020 70);
  --ink-foreground: oklch(0.955 0.013 88);
  --ink-muted: oklch(0.655 0.012 84);
  --ink-border: oklch(0.345 0.015 75);

  --shadow-xs: 0 1px 2px 0 oklch(0.30 0.02 70 / 0.05);
  --shadow-sm: 0 2px 6px -1px oklch(0.30 0.02 70 / 0.07), 0 1px 2px -1px oklch(0.30 0.02 70 / 0.05);
  --shadow-md: 0 12px 28px -10px oklch(0.30 0.02 70 / 0.15), 0 4px 10px -6px oklch(0.30 0.02 70 / 0.09);
  --shadow-float: 0 18px 40px -18px oklch(0.30 0.02 70 / 0.24), 0 6px 14px -8px oklch(0.30 0.02 70 / 0.12);
  --shadow-float-hover: 0 26px 52px -20px oklch(0.30 0.02 70 / 0.28), 0 8px 18px -10px oklch(0.30 0.02 70 / 0.14);
}

/* ---------------------------------------------------------------------------
   §3 — DS GAPS. Places where ds.shadcn.css cannot be reached by a token.
   --------------------------------------------------------------------------- */

/* F1 — one font token, applied once on body. The numeric role needs selectors. */
.mono, .price, .meta-mono, .player-time, .otp input, .table td, .kv dd, .count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.01em;
}
/* the hero sets display type at 300 and only the accent at 500; the DS ships
   every heading at 600, which reads heavy-handed in this language */
h1, h2 { font-weight: 300; letter-spacing: -0.025em; }
h3, h4 { font-weight: 500; letter-spacing: -0.005em; }

/* F2 — the select arrow is a data-URI with a baked-in zinc stroke */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* F3 — cover-art gradients are literals tuned for a violet brand. On a dark
   page the art must GLOW rather than sit flat, so the range shifts up. */
.cover, .cover-thumb {
  background:
    linear-gradient(135deg,
      oklch(0.72 0.105 var(--hue, 42)),
      oklch(0.50 0.095 calc(var(--hue, 42) + 16)));
}
.post-cover {
  background-image:
    radial-gradient(120% 120% at 18% 12%, oklch(0.74 0.110 var(--hue, 42)), transparent 62%),
    linear-gradient(135deg, oklch(0.60 0.100 var(--hue, 42)), oklch(0.34 0.060 calc(var(--hue, 42) + 18)));
}

/* F4 — two controls that must NOT be pills even though the scale is pill-first */
.textarea, .field .textarea { border-radius: var(--radius-xl); }
.field:has(.textarea) { border-radius: var(--radius-xl); }
.otp input { border-radius: var(--radius-art); }

/* --- brand specifics, not DS debt ---------------------------------------- */
@media (max-width: 640px) { .logo { height: 1.5rem; } }
@media (max-width: 360px) { .logo { width: 2rem; } }