/**
 * /public_html/assets/css/variables.css
 * OKLCH Mathematical Color Engine (Light/Dark/System/High-Contrast Tokens)
 * Blueprint Section 4: Mathematically Preserves 7:1 WCAG AAA Contrast Ratios
 */

:root {
  --forum-navy-seed: oklch(0.28 0.08 255);
  --cf-font-scale: 1;

  /* Light Theme Default Tokens (WCAG 2.1 AAA 7:1 Compliant) */
  --bg-page: oklch(from var(--forum-navy-seed) 0.985 0.003 h);
  --bg-surface: oklch(1.00 0.00 0);
  --bg-surface-subtle: oklch(from var(--forum-navy-seed) 0.950 0.005 h);
  --bg-surface-raised: oklch(from var(--forum-navy-seed) 0.965 0.004 h);

  --text-main: oklch(from var(--forum-navy-seed) 0.220 0.020 h);
  --text-heading: oklch(from var(--forum-navy-seed) 0.100 0.030 h);
  --text-muted: oklch(from var(--forum-navy-seed) 0.460 0.018 h);

  --border-subtle: oklch(from var(--forum-navy-seed) 0.880 0.010 h);
  --border-medium: oklch(from var(--forum-navy-seed) 0.780 0.015 h);
  --focus-ring: 3px solid oklch(from var(--forum-navy-seed) 0.45 0.22 h);

  --color-accent: oklch(0.48 0.18 255);
  --color-success: oklch(0.48 0.16 145);
  --color-warning: oklch(0.52 0.18 70);
  --color-danger: oklch(0.46 0.22 25);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-page: oklch(from var(--forum-navy-seed) 0.12 0.02 h);
  --bg-surface: oklch(from var(--forum-navy-seed) 0.16 0.025 h);
  --bg-surface-subtle: oklch(from var(--forum-navy-seed) 0.22 0.03 h);
  --bg-surface-raised: oklch(from var(--forum-navy-seed) 0.26 0.032 h);

  --text-main: oklch(0.92 0.00 0);
  --text-heading: oklch(0.98 0.00 0);
  --text-muted: oklch(from var(--forum-navy-seed) 0.72 0.015 h);

  --border-subtle: oklch(from var(--forum-navy-seed) 0.28 0.02 h);
  --border-medium: oklch(from var(--forum-navy-seed) 0.38 0.025 h);
  --focus-ring: 3px solid oklch(from var(--forum-navy-seed) 0.65 0.22 h);

  --color-accent: oklch(0.70 0.16 255);
}

/* High Contrast AAA Enforcement (21:1) */
.high-contrast-mode,
[data-theme="high-contrast"] {
  --bg-page: #000000 !important;
  --bg-surface: #0a0a0a !important;
  --bg-surface-subtle: #141414 !important;
  --text-main: #ffffff !important;
  --text-heading: #ffffff !important;
  --text-muted: #d0d0d0 !important;
  --border-subtle: #ffffff !important;
  --border-medium: #ffffff !important;
  --focus-ring: 3px solid #ffff00 !important;
  --color-accent: #00ffff !important;
}