/* V2 public visual contract: one semantic vocabulary for every listener route. */
:root {
  --color-canvas: #f9f9f7;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f1ec;
  --color-text: #171816;
  --color-text-muted: #777970;
  --color-border: #e2e3dc;
  --color-border-strong: #c9cbc1;
  --color-accent: #70694f;
  --color-accent-strong: #5e5842;
  --color-focus: #8c6b2f;
  --color-error: #9b5d4b;
  --radius-control: 999px;
  --radius-card: 14px;
  --radius-panel: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --content-width: 1280px;
  --font-sans: "Avenir Next", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Iowan Old Style", Baskerville, "Noto Serif CJK SC", "Songti SC", STSong, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --shadow-panel: 0 18px 60px rgba(23, 24, 22, .08);

  /* Compatibility aliases for existing Home/Album/Player styles. */
  --bg: var(--color-canvas);
  --bg-soft: var(--color-surface-muted);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: color-mix(in srgb, var(--color-border) 82%, transparent);
  --line-strong: var(--color-border-strong);
  --surface: color-mix(in srgb, var(--color-surface) 86%, transparent);
  --surface-strong: color-mix(in srgb, var(--color-surface) 96%, transparent);
  --surface-soft: color-mix(in srgb, var(--color-surface-muted) 94%, transparent);
  --sans: var(--font-sans);
  --serif: var(--font-serif);
  --serif-text: var(--font-serif);
  --mono: var(--font-mono);
}

html[data-experience="portfolio"] {
  --work-bg: var(--color-canvas);
  --work-ink: var(--color-text);
  --work-muted: var(--color-text-muted);
  --work-line: var(--color-border);
  --work-accent: var(--color-accent);
  --work-serif: var(--font-serif);
  --work-sans: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #101010;
    --color-surface: #181818;
    --color-surface-muted: #20201d;
    --color-text: #f2f2ee;
    --color-text-muted: #a6a6a0;
    --color-border: #3a3a35;
    --color-border-strong: #55554e;
    --color-accent: #b2aa82;
    --color-accent-strong: #c9bf91;
    --color-focus: #e4b85f;
    --color-error: #df987f;
    --shadow-panel: 0 26px 90px rgba(0, 0, 0, .34);
  }
}