/*
 * Ctrl CV design tokens: the ONLY place colours are defined.
 * Change a base value below and every shade, line, glow and surface
 * on every page follows, because the rest are mixed from these five.
 */
:root {
  /* ---- Base palette (edit these) ---- */
  --navy: #2b4469;
  --ink: #0f172a;
  --slate: #64748b;
  --black: #000000;
  --white: #ffffff;

  /* ---- Derived shades (mixed from the base palette) ---- */
  --navy-700: color-mix(in oklab, var(--navy) 80%, var(--black));
  --navy-300: color-mix(in oklab, var(--navy) 55%, var(--white));
  --navy-100: color-mix(in oklab, var(--navy) 12%, var(--white));
  --navy-50: color-mix(in oklab, var(--navy) 5%, var(--white));
  --slate-300: color-mix(in oklab, var(--slate) 45%, var(--white));
  --slate-200: color-mix(in oklab, var(--slate) 22%, var(--white));
  --ink-800: color-mix(in oklab, var(--ink) 88%, var(--navy));
  --ink-700: color-mix(in oklab, var(--ink) 72%, var(--navy));

  /* ---- Semantic roles (light surfaces) ---- */
  --bg: var(--white);
  --bg-alt: var(--navy-50);
  --bg-tag: color-mix(in oklab, var(--black) 3%, var(--white));       /* reference #f8f8f8 */
  --bg-panel: color-mix(in oklab, var(--black) 4%, var(--white));     /* reference #f5f5f5 */
  --surface: var(--white);
  --text: var(--ink);
  --text-muted: var(--slate);
  --line: color-mix(in oklab, var(--slate) 18%, transparent);
  --line-strong: color-mix(in oklab, var(--slate) 35%, transparent);
  --accent: var(--navy);
  --accent-soft: var(--navy-100);
  --focus: var(--navy-300);

  /* ---- Semantic roles (dark surfaces) ---- */
  --dark-bg: var(--ink);
  --dark-surface: var(--ink-800);
  --dark-text: var(--white);
  --dark-muted: var(--slate-300);
  --dark-line: color-mix(in oklab, var(--white) 10%, transparent);
  --dark-line-strong: color-mix(in oklab, var(--white) 22%, transparent);
  --dark-accent: var(--navy-300);

  /* ---- Effects ---- */
  /* deep surface: About "Motivation" card 01, offerings hover wipes and visual stage */
  --surface-deep: linear-gradient(160deg, var(--ink) 0%, var(--ink-800) 55%, var(--navy-700) 100%);
  --glow: color-mix(in oklab, var(--navy-300) 40%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in oklab, var(--black) 6%, transparent);
  --shadow-md: 0 12px 32px -12px color-mix(in oklab, var(--ink) 22%, transparent);
  --shadow-lg: 0 40px 80px -30px color-mix(in oklab, var(--ink) 40%, transparent);
}