/* AMPD brand tokens — confirmed against the Brand Toolkit's "Our Digital Brand
   Colours" page (see QUESTIONS.md #1/#7, CLAUDE.md "Verified brand values").
   Two layers: the raw six-colour brand palette (never changes, never themed),
   and a semantic layer every component actually resolves colour through.
   [data-theme="..."] blocks in themes.css remap ONLY the semantic layer. */
:root {
  /* ---- Raw brand palette — six official colours, three flavour pairs.
     Fixed. Never invent a hex outside this set or outside the four official
     tint stops (80/60/40/20%). ---- */
  --brand-citrus-yellow: #FFDD15;
  --brand-citrus-orange: #F16522;
  --brand-ampd-blue: #00A8E9;
  --brand-ampd-purple: #AA2188;
  --brand-watermelon-green: #3DAE49;
  --brand-watermelon-red: #EC1C24;
  --brand-black: #0B0B0E;
  --brand-white: #ffffff;

  /* ---- Semantic layer — the default ("Citrus") scheme's values. Every
     component in styles.css/base.css resolves colour through these names,
     never through --brand-* directly. ---- */
  --accent-primary: var(--brand-citrus-orange);
  --accent-secondary: var(--brand-citrus-yellow);
  --accent-gradient: linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);

  --text-primary: var(--brand-black);
  --text-inverse: var(--brand-white);
  --text-body: #6E6E76;
  --text-body-strong: #3E3E44;
  --text-muted: #8A8A92;
  --text-label: #5F5F66;
  --text-strike: #A0A0A8;

  /* Official tint ramp of the current scheme's primary accent (80/60/40/20%,
     computed live so every scheme gets correct on-brand tints for free —
     nothing here is a hand-picked hex). */
  --tint-80: color-mix(in srgb, var(--accent-primary) 80%, white);
  --tint-60: color-mix(in srgb, var(--accent-primary) 60%, white);
  --tint-40: color-mix(in srgb, var(--accent-primary) 40%, white);
  --tint-20: color-mix(in srgb, var(--accent-primary) 20%, white);
  --tint-30: color-mix(in srgb, var(--accent-primary) 30%, white);
  --tint-10: color-mix(in srgb, var(--accent-primary) 10%, white);
  --ui-tint-strong: var(--tint-60);
  --ui-tint-mid: var(--tint-40);
  --ui-tint-soft: var(--tint-20);

  /* Accent-derived shadow/hover — colour-relative UI states (button glow,
     link hover) resolve through these instead of a hand-picked rgba/hex. */
  --accent-shadow: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  --accent-shadow-soft: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent-primary) 85%, black);

  /* Fixed across every scheme — see base.css for why. */
  --focus-ring: var(--brand-ampd-blue);
  /* Fixed across every scheme too — a guarantee checkmark reads as trust
     specifically because it's green; tying it to a shifting accent would
     undermine that signal. */
  --success: var(--brand-watermelon-green);

  /* Section backgrounds — the page's tonal rhythm. -default/-alt/-dark are
     scheme-swappable; the extra named stops preserve the page's existing
     multi-tone bleed between sections and are themselves tint-derived so
     they re-colour with the rest of the page. */
  --bg-section-default: #ffffff;
  --bg-section-alt: var(--tint-20);
  --bg-section-dark: var(--brand-black);
  --bg-hero-curve: color-mix(in srgb, var(--accent-primary) 4%, white);
  --bg-founder: color-mix(in srgb, var(--accent-primary) 3%, white);
  --bg-panel: var(--tint-20);
  --bg-results: color-mix(in srgb, var(--accent-primary) 6%, white);
  --bg-footer: #F8F8F8;
  --bg-white: #ffffff;

  /* Neutral structure — borders/lines/dots stay true neutral across every
     scheme (not accent-tinted) so layout structure reads consistently
     regardless of which colour scheme is active. */
  --line: #E7E8EE;
  --line-soft: #ECECEE;
  --line-softer: #F0F0F2;
  --line-softest: #F1F1F4;
  --dot-off: #D9DAE0;
  --divider: #E5E5E9;

  /* ---- Legacy aliases — kept so any code still written against the old
     names keeps working; new/edited code should use the semantic names
     above, never these directly. ---- */
  --ampd-black: var(--brand-black);
  --ampd-white: var(--brand-white);
  --ampd-citrus-yellow: var(--brand-citrus-yellow);
  --ampd-citrus-orange: var(--brand-citrus-orange);
  --ampd-blue: var(--brand-ampd-blue);
  --ampd-purple: var(--brand-ampd-purple);
  --ampd-watermelon-green: var(--brand-watermelon-green);
  --ampd-watermelon-red: var(--brand-watermelon-red);
  --ampd-cta-gradient: var(--accent-gradient);
  --ampd-ink: var(--text-primary);
  --ampd-body: var(--text-body);
  --ampd-body-strong: var(--text-body-strong);
  --ampd-muted: var(--text-muted);
  --ampd-label: var(--text-label);
  --ampd-line: var(--line);
  --ampd-line-soft: var(--line-soft);
  --ampd-line-softer: var(--line-softer);
  --ampd-line-softest: var(--line-softest);
  --ampd-dot-off: var(--dot-off);
  --ampd-strike: var(--text-strike);
  --ampd-divider: var(--divider);

  /* Type — unresolved brand contradiction, see QUESTIONS.md #8. Holding on
     Inconsolata/Archivo (best-supported reading of the toolkit) until the
     client confirms. */
  --font-display: 'Inconsolata', ui-monospace, monospace;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* Layout */
  --content-max: 480px;
}