:root {
  /* Community Hub palette */
  --bg-background: oklch(0.98 0.005 85);
  --bg-panel: oklch(1 0 0);
  --bg-panel-muted: oklch(0.96 0.01 85);
  --bg-panel-hover: oklch(0.94 0.015 85);
  --text-foreground: oklch(0.25 0.01 85);
  --text-muted: oklch(0.55 0.015 85);
  --text-muted-foreground: oklch(0.45 0.015 85);
  --border-color: oklch(0.91 0.01 85);
  --border-strong: oklch(0.85 0.02 85);
  --accent-primary: oklch(0.55 0.12 150);
  --accent-primary-hover: oklch(0.45 0.12 150);
  --accent-secondary: oklch(0.7 0.14 45);
  --accent-sage-soft: oklch(0.72 0.08 145);
  --accent-forest-deep: oklch(0.43 0.11 150);

  /* Backward-compatible aliases used across existing CSS */
  --accent-indigo: var(--accent-primary);
  --accent-indigo-hover: var(--accent-primary-hover);
  --accent-pink: var(--accent-secondary);

  /* Semantic colors */
  --ok-red-bg: oklch(0.96 0.02 25);
  --ok-red-text: oklch(0.55 0.12 25);
  --ok-red-border: oklch(0.88 0.05 25);
  --ok-green-bg: oklch(0.96 0.02 145);
  --ok-green-text: oklch(0.5 0.1 145);
  --ok-green-border: oklch(0.88 0.05 150);
  --ok-blue-bg: oklch(0.96 0.02 200);
  --ok-blue-text: oklch(0.5 0.1 200);
  --ok-blue-border: oklch(0.89 0.04 200);

  --glass-border: oklch(0 0 0 / 0.1);

  /* Shared neutral colors */
  --color-white: oklch(1 0 0);
  --color-black: oklch(0 0 0);

  /* Legacy utility names remapped to community-friendly hues */
  --color-indigo-50: oklch(0.96 0.02 145);
  --color-indigo-200: oklch(0.9 0.03 145);
  --color-indigo-300: oklch(0.84 0.05 145);
  --color-indigo-400: oklch(0.76 0.08 145);
  --color-indigo-500: oklch(0.65 0.1 145);
  --color-indigo-600: oklch(0.58 0.11 145);
  --color-indigo-700: oklch(0.5 0.11 145);
  --color-indigo-900: oklch(0.34 0.07 145);
  --color-indigo-600-30: oklch(0.58 0.11 145 / 0.3);

  --color-pink-400: oklch(0.78 0.1 45);
  --color-pink-500: oklch(0.7 0.14 45);
  --color-pink-600-30: oklch(0.62 0.13 45 / 0.3);

  --color-purple-500: oklch(0.64 0.12 40);
  --color-purple-400: oklch(0.72 0.09 40);

  --color-blue-400: oklch(0.76 0.08 165);
  --color-blue-500: oklch(0.66 0.1 165);
  --color-blue-700: oklch(0.5 0.09 165);

  --color-green-400: oklch(0.76 0.11 145);
  --color-green-500: oklch(0.64 0.13 145);
  --color-green-700: oklch(0.5 0.1 145);
  --color-green-500-20: oklch(0.64 0.13 145 / 0.2);

  --color-orange-400: oklch(0.79 0.11 70);
  --color-orange-500: oklch(0.72 0.14 70);
  --color-yellow-400: oklch(0.86 0.1 100);
  --color-yellow-500: oklch(0.82 0.12 100);
  --color-red-400: oklch(0.72 0.18 25);
  --color-red-500-20: oklch(0.54 0.18 25 / 0.2);

  --color-amber-50: oklch(0.97 0.03 88);
  --color-amber-200: oklch(0.9 0.05 88);
  --color-amber-800: oklch(0.46 0.11 88);

  --shadow-black-08: oklch(0 0 0 / 0.08);
  --shadow-black-25: oklch(0 0 0 / 0.25);
  --shadow-black-30: oklch(0 0 0 / 0.3);

  /* Layout + spacing */
  --layout-max-width: 64rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Radius */
  --radius-lg: 0.85rem;
  --radius-xl: 1.25rem;
  --radius-pill: 9999px;

  --bg-organic-sage: color-mix(in oklab, var(--accent-primary) 10%, transparent);
  --bg-organic-terra: color-mix(in oklab, var(--accent-secondary) 10%, transparent);
  --bg-grain-opacity: 0.08;
}

:root.dark {
  /* Community Hub dark palette */
  --bg-background: oklch(0.18 0.01 85);
  --bg-panel: oklch(0.23 0.015 85);
  --bg-panel-muted: oklch(0.28 0.015 85);
  --bg-panel-hover: oklch(0.32 0.02 85);

  --text-foreground: oklch(0.95 0.01 85);
  --text-muted: oklch(0.75 0.015 85);
  --text-muted-foreground: oklch(0.85 0.01 85);

  --border-color: oklch(0.32 0.02 85);
  --border-strong: oklch(0.4 0.02 85);

  --accent-primary: oklch(0.75 0.1 150);
  --accent-primary-hover: oklch(0.82 0.08 150);
  --accent-secondary: oklch(0.78 0.1 45);
  --accent-sage-soft: oklch(0.79 0.06 145);
  --accent-forest-deep: oklch(0.65 0.09 150);
  --accent-indigo: var(--accent-primary);
  --accent-indigo-hover: var(--accent-primary-hover);
  --accent-pink: var(--accent-secondary);

  --glass-border: oklch(1 0 0 / 0.1);
  --bg-organic-sage: color-mix(in oklab, var(--accent-primary) 11%, transparent);
  --bg-organic-terra: color-mix(in oklab, var(--accent-secondary) 9%, transparent);
  --bg-grain-opacity: 0.05;
}