/*
 * Design tokens — ProStyle Lab website.
 * Brand = PSampler "Noir & Champagne" theme (ios/Player/PSampler/UI/PSamplerTheme.swift):
 * near-black surfaces, champagne highlight, steel-blue select, sage "on".
 * Fonts follow the app: Space Grotesk (app default), Be Vietnam Pro for long Vietnamese text,
 * JetBrains Mono for numbers. Components read only these variables.
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f3f0ea;
  --surface: #ffffff;
  --surface-hi: #f1ede5;
  --well: #ece7dd;
  --border: #ded6c6;
  --border-strong: #bdb3a1;

  /* Text */
  --text: #221d14;
  --text-strong: #17130c;
  --text-2: #5e5545;

  /* Champagne highlight: fills use dark text on top */
  --accent: #d8b676;
  --accent-hover: #c9a45f;
  --accent-on: #1a1207;
  --accent-text: #8c6418;
  --accent-subtle: rgba(216, 182, 118, 0.22);
  --focus: #8c6418;

  /* Secondary signals from the app */
  --select: #4f7f9f;
  --on: #5e9468;
  --danger: #c43b35;

  /* Keyboard split diagram (bar text is always --accent-on) */
  --part-left: #d9b58e;
  --part-r1: #8db8d6;
  --part-r2: #9ed0a6;
  --part-r3: #f0a35a;
  --key-white: #ffffff;
  --key-black: #1b1e25;
  --key-edge: rgba(0, 0, 0, 0.30);

  /* Device frame + glow */
  --device: #0b0b0d;
  --glow: rgba(216, 182, 118, 0.30);

  /* Type */
  --font-display: "Space Grotesk", "Be Vietnam Pro", system-ui, sans-serif;
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-display: clamp(2.3rem, 1.3rem + 4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3: 1.15rem;
  --fs-stat: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --fs-small: 0.875rem;

  /* Spacing (4 px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radius by role */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-phone: 34px;
  --r-tablet: 26px;

  /* Layout */
  --page-max: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 60px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 180ms;
}

/* Dark: the app's default look. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09090a;
    --surface: #111113;
    --surface-hi: #17171a;
    --well: #050506;
    --border: #2b2822;
    --border-strong: #433d33;
    --text: #e9e0d0;
    --text-strong: #f7f0e3;
    --text-2: #b8ad9a;
    --accent: #e8c47f;
    --accent-hover: #f3e0b6;
    --accent-on: #1a1207;
    --accent-text: #f2d08e;
    --accent-subtle: rgba(232, 196, 127, 0.12);
    --focus: #f2d08e;
    --select: #8db8d6;
    --on: #9ed0a6;
    --danger: #f05a52;
    --key-white: #e9ecf2;
    --key-black: #0b0c10;
    --key-edge: rgba(0, 0, 0, 0.55);
    --device: #000000;
    --glow: rgba(232, 196, 127, 0.16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090a;
  --surface: #111113;
  --surface-hi: #17171a;
  --well: #050506;
  --border: #2b2822;
  --border-strong: #433d33;
  --text: #e9e0d0;
  --text-strong: #f7f0e3;
  --text-2: #b8ad9a;
  --accent: #e8c47f;
  --accent-hover: #f3e0b6;
  --accent-on: #1a1207;
  --accent-text: #f2d08e;
  --accent-subtle: rgba(232, 196, 127, 0.12);
  --focus: #f2d08e;
  --select: #8db8d6;
  --on: #9ed0a6;
  --danger: #f05a52;
  --key-white: #e9ecf2;
  --key-black: #0b0c10;
  --key-edge: rgba(0, 0, 0, 0.55);
  --device: #000000;
  --glow: rgba(232, 196, 127, 0.16);
}