/* ── Design tokens ──
   The only file with literal colors and font stacks. Everything else uses var(--…).
   Light is the default; dark overrides the same color tokens when the OS asks for it.
   Derived shades (focus rings, faded placeholders) are computed from these tokens,
   not given tokens of their own. */

:root {
  color-scheme: light dark;

  /* Type (faces are declared in base.css). The greetings only use languages Timeless
     covers, so the serif fallbacks are just for the moment before the font loads. */
  --font-sans: 'Timeless Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Timeless Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Paper Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Page */
  --bg: #fffffc;
  --fg: #16160e;

  /* Music player: shader light spilling out of the bottom-right corner (player.css).
     The shader reads --accent plus these two companion hues (player.js); controls on
     top of it are always light, since the light is densest where they sit. */
  --player-fg: #fff;
  /* Safety net for the white title where the light thins out (light mode, phones). */
  --player-title-shadow: 0 1px 14px rgb(0 0 0 / 0.3);
  /* Liquid glass play button: a clear tinted lens that blurs and saturates the light
     behind it, with a bright top rim, a faint full rim and a soft lift. */
  --player-glass: rgb(255 255 255 / 0.1);
  --player-glass-hover: rgb(255 255 255 / 0.18);
  --player-glass-edge:
    inset 0 1px 0.5px rgb(255 255 255 / 0.65),
    inset 0 -1px 0.5px rgb(255 255 255 / 0.15),
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    0 6px 20px rgb(0 0 0 / 0.18);
  --player-glass-sheen: linear-gradient(170deg, rgb(255 255 255 / 0.38) 0%, rgb(255 255 255 / 0.06) 45%, transparent 60%);
  --player-art-2: #c8173a;
  --player-art-3: #2a0a3d;

  /* Accent, Braun-style: one orange, kept for the things that move or you operate
     (selection, the player light). Text on it uses --on-accent. */
  --accent: #ff7323;
  --on-accent: #16160e;

  /* Logo marquee (logos are monochrome-ised, then faded) */
  --logo-filter: grayscale(100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121210;
    --fg: #f2f2ea;

    --logo-filter: grayscale(100%) invert(1);
  }
}