/* Panda Tech Lab — design tokens
   Source of truth for colors, type, spacing. Light values under :root; the dark
   palette is repeated twice (system preference + manual toggle) — keep both in sync.
   Violet = interactive (buttons, links, focus). Bamboo green = labels, data, decoration. */

:root {
  /* palette — light */
  --ink: #16181a;
  --paper: #fbfaf8;
  --bg: #f2f1ee;
  --surface: #ffffff;
  --border: #e2e0db;
  --border-strong: #d8d5cf;
  --text-secondary: #55534e;
  --text-muted: #7a7873;
  --accent: #6d4bc4;
  --accent-hover: #5e3fae;
  --accent-contrast: #fbfaf8;
  --accent-soft: rgba(109, 75, 196, 0.10);
  --green: #34785d;
  --green-soft: rgba(52, 120, 93, 0.10);
  --warn: #b4552a;
  --warn-soft: rgba(180, 85, 42, 0.10);
  --disabled-bg: #e6e4df;
  --disabled-text: #9a9892;
  --focus-ring: 0 0 0 3px rgba(109, 75, 196, 0.15);
  --shadow-card: 0 1px 2px rgba(22, 24, 26, 0.04);

  /* shape */
  --radius: 4px;
  --radius-card: 6px;
  --radius-band: 8px;

  /* type */
  --font-sans: "Space Grotesk", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* layout */
  --container: 1120px;
  --gutter: 24px;
  --section: clamp(56px, 8vw, 96px);
  --section-tight: clamp(32px, 5vw, 56px);
  --header-h: 72px;

  color-scheme: light;
}

/* dark palette: manual toggle, and any region that is always dark (header, hero, footer) */
[data-theme="dark"],
.on-dark {
  --ink: #fbfaf8;
  --paper: #16181a;
  --bg: #16181a;
  --surface: #2a2d31;
  --border: #3a3e43;
  --border-strong: #4a4f55;
  --text-secondary: #b3b1ac;
  --text-muted: #8b8983;
  --accent: #9a7ce8;
  --accent-hover: #a98ff0;
  --accent-contrast: #16181a;
  --accent-soft: rgba(154, 124, 232, 0.16);
  --green: #4e9a7b;
  --green-soft: rgba(78, 154, 123, 0.14);
  --warn: #d1774f;
  --warn-soft: rgba(209, 119, 79, 0.14);
  --disabled-bg: #2a2d31;
  --disabled-text: #6f6d68;
  --focus-ring: 0 0 0 3px rgba(154, 124, 232, 0.25);
  --shadow-card: none;
  color-scheme: dark;
}

/* dark palette: system preference, unless the visitor chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #fbfaf8;
    --paper: #16181a;
    --bg: #16181a;
    --surface: #2a2d31;
    --border: #3a3e43;
    --border-strong: #4a4f55;
    --text-secondary: #b3b1ac;
    --text-muted: #8b8983;
    --accent: #9a7ce8;
    --accent-hover: #a98ff0;
    --accent-contrast: #16181a;
    --accent-soft: rgba(154, 124, 232, 0.16);
    --green: #4e9a7b;
    --green-soft: rgba(78, 154, 123, 0.14);
    --warn: #d1774f;
    --warn-soft: rgba(209, 119, 79, 0.14);
    --disabled-bg: #2a2d31;
    --disabled-text: #6f6d68;
    --focus-ring: 0 0 0 3px rgba(154, 124, 232, 0.25);
    --shadow-card: none;
    color-scheme: dark;
  }
}

/* regions that are always dark paint themselves */
.on-dark {
  background: var(--bg);
  color: var(--ink);
}