/* ================= THE MUSIC NETWORK — one set of tokens for the three apps =================
 * The portfolio (this repo), the map and the studio read as one product because their chrome draws
 * from this file: the same type, one black, one white, one yellow, the same corners, the same glow.
 * Colour comes from the art; the chrome stays black, white and one yellow.
 * (Content-Studio/Network/Design_Cohesion.md, steps 1-3.)
 *
 * EDIT IT ONLY HERE: Credits_Claude_Code_Music_Only/app/swajbeats-catalog-v5/network-tokens.css.
 * scripts/sync-tokens.sh copies it into the map (src/network-tokens.css) and the studio
 * (UI/network-tokens.css, and inline in UI/index.html, since the studio serves one page), and the
 * font files it names (assets/fonts/*.woff2 here) into the map's src/assets/fonts/ and the studio's
 * UI/assets/fonts/, so url(assets/fonts/...) resolves the same way in all three.
 *
 * Each app loads it BEFORE its own styles and maps its own variable names onto these, so its old
 * names keep working. Nothing here styles an element: tokens only.
 *
 * Themes. Both sets are always defined (--dark-*, --light-*), so an app picks the set that matches
 * the way it switches:
 *   portfolio  light by default, dark under [data-theme="dark"]  -> reads --color-* (below)
 *   studio     dark by default,  light under [data-theme="light"] -> maps --dark-* / --light-* itself
 *   map        dark only                                         -> maps --dark-* itself
 * --color-* is the light set on :root and the dark set under [data-theme="dark"].
 *
 * The accent is for STATE: live, selected, following, the signal dot, the focus ring. Never a
 * button fill. Since 2026-10-18 it is the ink itself (the owner dropped the yellow): white on
 * black, black on white, so the chrome has no third colour and the only colour is the art's.
 * A state that must glow uses --glow-state (the ink at 55%, as a shadow).
 */
/* ---- the fonts, self-hosted: nothing is fetched from Google (web best practice and privacy; 2026-10-18) ----
   Inter (Rasmus Andersson, SIL Open Font License), as Google Fonts' CSS API serves it to a modern browser: one
   variable file, the latin subset, weights 300-700. Inter Display's cuts are the portfolio's own and stay in its
   catalog-shelf.css. */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(assets/fonts/InterVariable.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* ---- type: Inter for everything, Inter Display for headlines; --font-num stays as a name for the number face ---- */
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
  --font-display:"Inter Display","Inter",system-ui,-apple-system,sans-serif;
  --font-num:"Inter",system-ui,-apple-system,sans-serif;   /* numbers in Inter too (the owner, 2026-10-18: one face) */

  /* ---- the two poles ---- */
  --black:#0a0908;                  /* warm near-black: the ground at night, the ink by day */
  --white:#f2f3f5;                  /* cool white: the ink at night, the ground by day */

  /* ---- the dark set: white on black ---- */
  --dark-bg:var(--black);
  --dark-surface:#161514;           /* a panel on the ground (white 5% over black) */
  --dark-surface-2:#1f1e1d;         /* a control inside a panel (9%) */
  --dark-surface-3:#282727;         /* pressed, a chip inside a control (13%) */
  --dark-raise:#343333;             /* the highest step: a popover's hover (18%) */
  --dark-ink:var(--white);          /* 17.9:1 */
  --dark-muted:rgba(242,243,245,.6);   /* the second voice: 6.6:1 on the ground */
  --dark-faint:rgba(242,243,245,.38);  /* hints and ticks, never something that must be read: 3.2:1 */
  --dark-line:rgba(242,243,245,.08);
  --dark-line-strong:rgba(242,243,245,.14);
  --dark-accent:var(--white);       /* the ink: state in white, 17.9:1 */
  --dark-on-accent:var(--black);
  --dark-warn:#ffb02e;              /* amber: needs a look. 10.9:1 */
  --dark-glow-state:0 0 12px rgba(242,243,245,.55);   /* a live dot's glow */

  /* ---- the light set: black on white ---- */
  --light-bg:var(--white);
  --light-surface:#ffffff;
  --light-surface-2:#eff0f2;
  --light-surface-3:#e6e7ea;
  --light-raise:#ffffff;
  --light-ink:var(--black);         /* 17.9:1 */
  --light-muted:rgba(10,9,8,.62);   /* 5.6:1 on the ground */
  --light-faint:rgba(10,9,8,.38);
  --light-line:rgba(10,9,8,.08);
  --light-line-strong:rgba(10,9,8,.14);
  --light-accent:var(--black);      /* the ink: state in black, 17.9:1 */
  --light-on-accent:var(--white);
  --light-warn:#8a5a00;             /* amber, deepened: 5.3:1 */
  --light-glow-state:0 0 12px rgba(10,9,8,.35);

  /* ---- the theme in use: light here, dark under [data-theme="dark"] ---- */
  --color-bg:var(--light-bg);
  --color-surface:var(--light-surface);
  --color-surface-2:var(--light-surface-2);
  --color-surface-3:var(--light-surface-3);
  --color-raise:var(--light-raise);
  --color-ink:var(--light-ink);
  --color-muted:var(--light-muted);
  --color-faint:var(--light-faint);
  --color-line:var(--light-line);
  --color-line-strong:var(--light-line-strong);
  --color-accent:var(--light-accent);
  --color-on-accent:var(--light-on-accent);
  --color-warn:var(--light-warn);
  --glow-state:var(--light-glow-state);

  /* ---- corners: pills for actions and filters, 12px for cards, round for faces ---- */
  --radius-pill:999px;
  --radius-card:12px;
  --radius-round:50%;

  /* ---- space: one 4px scale ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* ---- the artwork glow (lifted from the studio) ----
     --glow-1 and --glow-2 are the artwork's own two colours; a page sets them from the picture
     (the studio's applyPalette) and these neutral greys are the glow before there is one.
     --glow-env is the beat: 1 on a hit, dying away to 0. */
  --glow-1:#9a9aa2;
  --glow-2:#44444a;
  --glow-3:#18181b;
  --glow-env:0;
  /* a card that glows from inside: the background of a ::before at inset -20% behind its content */
  --glow-card:radial-gradient(60% 70% at 18% 8%,color-mix(in srgb,var(--glow-1) 62%,transparent) 0%,transparent 70%),
              radial-gradient(55% 65% at 92% 100%,color-mix(in srgb,var(--glow-2) 55%,transparent) 0%,transparent 72%);
  /* a card that glows around itself */
  --glow-shadow:0 0 0 1px var(--color-line),0 18px 50px color-mix(in srgb,var(--glow-1) 14%,transparent);
}
[data-theme="dark"]{
  --color-bg:var(--dark-bg);
  --color-surface:var(--dark-surface);
  --color-surface-2:var(--dark-surface-2);
  --color-surface-3:var(--dark-surface-3);
  --color-raise:var(--dark-raise);
  --color-ink:var(--dark-ink);
  --color-muted:var(--dark-muted);
  --color-faint:var(--dark-faint);
  --color-line:var(--dark-line);
  --color-line-strong:var(--dark-line-strong);
  --color-accent:var(--dark-accent);
  --color-on-accent:var(--dark-on-accent);
  --color-warn:var(--dark-warn);
  --glow-state:var(--dark-glow-state);
  --glow-shadow:0 0 0 1px var(--color-line),0 18px 50px color-mix(in srgb,var(--glow-1) 14%,transparent);
}