/* Public design tokens; colour values live here. */
:root {
  --content-width: 1080px;
  --gutter: 40px;
  --text-xs: 14px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --title-hero: clamp(36px, 4.2vw, 56px);
  --title-section: clamp(28px, 3vw, 36px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-panel: 12px;
  --radius-control: 999px;
  --radius-small: 8px;
  --weight-ui: 400;
  --weight-heading: 500;
  color-scheme: dark;
  --bg: #08090a;
  --surface: #131416;
  --surface-hover: #202124;
  --text: #f2f3f5;
  --muted: #a4a7ae;
  --subtle: #92969f;
  --header: rgba(8, 9, 10, 0.95);
  --shadow: rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9f6;
  --surface: #f0efec;
  --surface-hover: #e7e5e0;
  --text: #202124;
  --muted: #555960;
  --subtle: #60656d;
  --header: rgba(250, 249, 246, 0.95);
  --shadow: rgba(25, 23, 20, 0.1);
}
@media (max-width: 1000px) {
  :root {
    --gutter: 32px;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
  }
}
:root {
  --primary: var(--brand-mark);
  --on-primary: var(--brand-on-primary);
  --primary-hover: var(--brand-hover);
  --primary-active: var(--brand-active);
  --focus: var(--brand-focus);
  --line: var(--brand-divider);
  --wordmark-color: var(--brand-mark);
}
:root[data-theme="light"] {
  --primary: var(--brand-mark);
  --on-primary: var(--brand-on-primary);
  --primary-hover: var(--brand-hover);
  --primary-active: var(--brand-active);
  --focus: var(--brand-focus);
  --line: var(--brand-divider);
  --wordmark-color: var(--brand-mark);
}

/* Cocoa highlights primary actions, the brand signature and the connected supply diagram. */
:root {
  --duration-hover: 80ms;
  --radius-option: 10px;
  --radius-popover: 16px;
  --neutral-hover: rgba(255, 255, 255, 0.08);
  --neutral-selected: rgba(255, 255, 255, 0.12);
  --neutral-pressed: rgba(255, 255, 255, 0.16);
  --shadow-popover: 0 12px 40px var(--shadow);
}
:root[data-theme="light"] {
  --neutral-hover: rgba(0, 0, 0, 0.055);
  --neutral-selected: rgba(0, 0, 0, 0.085);
  --neutral-pressed: rgba(0, 0, 0, 0.12);
}

/* Branded comparison surface uses the existing chocolate palette in each theme. */
:root {
  --comparison-bg: var(--brand-soft);
  --comparison-text: var(--brand-logo);
  --comparison-muted: var(--brand-mark);
  --comparison-node: rgba(255, 255, 255, 0.06);
  --comparison-node-strong: rgba(255, 255, 255, 0.12);
}
:root[data-theme="light"] {
  --comparison-bg: var(--brand-mark);
  --comparison-text: var(--brand-on-primary);
  --comparison-muted: var(--brand-soft);
}