/* theme.css — Single source of truth for design tokens.
   Apple HIG-inspired: clarity, deference, depth, restraint.
   Why centralize: every color/spacing/type value is defined once here so the
   whole app stays visually consistent and is trivial to re-theme. */

:root {
  /* ---- Color: light mode (default) ---- */
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-translucent: rgba(255, 255, 255, 0.72);
  --color-text: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-accent: #007aff;
  --color-accent-bright: #0a84ff;
  --color-key-face: #ffffff;
  --color-key-text: #1d1d1f;
  --color-key-border: rgba(0, 0, 0, 0.08);
  --color-key-shadow: rgba(0, 0, 0, 0.12);
  --color-divider: rgba(0, 0, 0, 0.08);
  --color-focus: #0a84ff;

  /* ---- Spacing: 8px grid ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;

  /* ---- Radius ---- */
  --radius-key: 8px;
  --radius-card: 16px;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono",
    Menlo, Consolas, monospace;
  --line-body: 1.5;

  /* ---- Motion ---- */
  --motion-press: 100ms ease-out;
  --motion-release: 150ms ease-in-out;

  /* ---- Keyboard sizing (fluid) ---- */
  --key-unit: clamp(34px, 4.4vw, 56px); /* width of a 1u key */
  --key-height: clamp(34px, 4.4vw, 56px);
  --key-gap: clamp(3px, 0.5vw, 6px);
}

/* ---- Dark mode (opt-in via OS preference) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-translucent: rgba(28, 28, 30, 0.72);
    --color-text: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-accent: #0a84ff;
    --color-accent-bright: #409cff;
    --color-key-face: #2c2c2e;
    --color-key-text: #f5f5f7;
    --color-key-border: rgba(255, 255, 255, 0.08);
    --color-key-shadow: rgba(0, 0, 0, 0.5);
    --color-divider: rgba(255, 255, 255, 0.1);
    --color-focus: #409cff;
  }
}