/**
 * Default palette: OKLCH from `--brand-hue` (no fixed brand hex).
 * Exact primary & emphasis colors come from `/settings/theme` color pickers → inline CSS vars + localStorage.
 */
:root {
  /* Branding guide: 10px radius across cards, buttons, inputs, modals */
  --radius: 10px;
  --brand-hue: 218deg;

  /* Neutral whitish surfaces — keep brand hue only on accents/buttons */
  --background: oklch(0.985 0.002 250);
  --foreground: oklch(0.22 0.02 var(--brand-hue));
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.02 var(--brand-hue));
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.02 var(--brand-hue));

  --primary: oklch(0.42 0.058 var(--brand-hue));
  --primary-foreground: oklch(0.98 0.005 250);
  --ring: oklch(0.42 0.058 var(--brand-hue));

  --secondary: oklch(0.96 0.004 250);
  --secondary-foreground: oklch(0.28 0.025 var(--brand-hue));
  --muted: oklch(0.965 0.004 250);
  --muted-foreground: oklch(0.45 0.02 var(--brand-hue));
  --accent: oklch(0.52 0.065 var(--brand-hue));
  --accent-foreground: oklch(0.98 0.005 250);

  --destructive: oklch(0.55 0.2 27);
  --destructive-foreground: oklch(0.98 0 0);

  --border: oklch(0.9 0.006 250);
  --input: oklch(0.97 0.004 250);

  --cream: oklch(0.985 0.002 250);
  --sand: oklch(0.92 0.01 250);
  --clay: oklch(0.52 0.065 var(--brand-hue));
  --cocoa: oklch(0.24 0.03 var(--brand-hue));

  /* Fallback until picker sets inline `--cta-red` */
  --cta-red: oklch(0.2 0.055 calc(var(--brand-hue) + 140deg));
  --cta-red-foreground: oklch(0.97 0.005 250);
}

.dark {
  --background: oklch(0.17 0.03 var(--brand-hue));
  --foreground: oklch(0.96 0.012 calc(var(--brand-hue) + 15deg));
  --card: oklch(0.22 0.035 var(--brand-hue));
  --card-foreground: oklch(0.96 0.012 calc(var(--brand-hue) + 15deg));
  --popover: oklch(0.22 0.035 var(--brand-hue));
  --popover-foreground: oklch(0.96 0.012 calc(var(--brand-hue) + 15deg));

  --primary: oklch(0.72 0.09 var(--brand-hue));
  --primary-foreground: oklch(0.16 0.035 var(--brand-hue));
  --ring: oklch(0.72 0.09 var(--brand-hue));

  --secondary: oklch(0.3 0.035 calc(var(--brand-hue) - 6deg));
  --secondary-foreground: oklch(0.96 0.012 calc(var(--brand-hue) + 15deg));
  --muted: oklch(0.28 0.03 var(--brand-hue));
  --muted-foreground: oklch(0.72 0.04 calc(var(--brand-hue) + 8deg));
  --accent: oklch(0.55 0.07 var(--brand-hue));
  --accent-foreground: oklch(0.98 0.01 calc(var(--brand-hue) + 15deg));

  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);

  --cta-red: oklch(0.55 0.12 calc(var(--brand-hue) + 140deg));
  --cta-red-foreground: oklch(0.98 0.01 calc(var(--brand-hue) + 15deg));
}