/*
 * Palette contract
 * Components use these semantic roles, never palette-specific hex values.
 * Studio is the default. To add a palette, append matching light/dark blocks
 * and change data-palette in index.html. See THEME-GUIDE.md for the recipe.
 * Typography and shape tokens are independent of colors.
 */
:root {
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --radius-button: 999px;
  --radius-card: 24px;
  --radius-project: 17px;
  --radius-panel: 20px;
  --radius-contact: 26px;
  --radius-tag: 999px;
  --device-bg: #141513;
  --device-border: #22251f;
  --device-shadow: 0 14px 18px -12px #0006, 0 1px 1px #0004;
}

:root,
:root[data-palette="studio"] {
  color-scheme: light;
  --page-bg: #f5f6fc;
  --text-primary: #25283d;
  --text-muted: #636780;
  --border-color: #d8dbea;
  --accent: #5650bd;
  --accent-soft: #e6e5fc;
  --on-accent: #ffffff;
  --project-maker-bg: #e3e7f6;
  --project-pro-bg: #eae1f5;
  --project-text: #343956;
  --surface: #edeffa;
  --contact-bg: #3b3a78;
  --contact-text: #f6f3ff;
  --contact-muted: #d1cfee;
}

:root[data-theme="dark"],
:root[data-palette="studio"][data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #171824;
  --text-primary: #eeeefb;
  --text-muted: #b2b3cf;
  --border-color: #3a3c56;
  --accent: #b9b0ff;
  --accent-soft: #34314e;
  --on-accent: #24213e;
  --project-maker-bg: #2b324b;
  --project-pro-bg: #3c2f4e;
  --project-text: #e3e5f8;
  --surface: #23263b;
  --contact-bg: #33305e;
  --contact-text: #f5f2ff;
  --contact-muted: #cecaeb;
}