/* Vedastro's executable design authority. Shared by the React app and API docs.
 * Color channels support Tailwind alpha modifiers. No supported light theme.
 * Persona/chart paint is domain data and stays with its owning renderer. */
:root {
  color-scheme: dark;
  --color-cosmic-950: 8 7 13;
  --color-cosmic-900: 13 13 20;
  --color-cosmic-800: 26 26 36;
  --color-cosmic-700: 43 43 64;
  --color-cosmic-600: 61 61 82;
  --color-cosmic-500: 112 108 128;
  --color-cosmic-400: 154 150 170;
  --color-cosmic-300: 192 188 203;
  --color-cosmic-200: 223 223 228;
  --color-cosmic-100: 240 240 244;
  --color-cosmic-50: 250 249 252;
  --color-gold: 214 174 63;
  --color-gold-light: 229 199 107;
  --color-gold-dark: 184 150 15;
  --color-premium-void: 11 10 18;
  --color-premium-night: 21 19 33;
  --color-premium-panel: 33 30 49;
  --color-premium-text: 255 250 240;
  --color-premium-muted: 185 176 200;
  --color-premium-highlight: 240 206 106;
  --color-error: 254 202 202;
  --color-success: 167 243 208;
  --color-warning: 253 230 138;
  --color-info: 186 230 253;
  --color-unknown: var(--color-cosmic-300);

  --surface-canvas: rgb(var(--color-premium-void));
  --surface-chrome: var(--surface-canvas);
  --surface-panel: rgb(var(--color-premium-panel));
  --surface-input: #1b1927;
  --surface-reading: #1a1823;
  --surface-selected: #262216;
  --text-heading: rgb(var(--color-cosmic-100));
  --text-body: rgb(var(--color-cosmic-200));
  --text-muted: rgb(var(--color-cosmic-300));
  --text-placeholder: rgb(var(--color-cosmic-400));
  --text-on-gold: #17110a;
  --border-subtle: rgb(var(--color-cosmic-600) / .5);
  --border-control: rgb(var(--color-cosmic-500));
  --border-hover: rgb(var(--color-gold-light));
  --focus-ring: rgb(var(--color-gold-light));
  --focus-halo: rgb(var(--color-gold) / .28);
  --action-flat: rgb(var(--color-gold));
  --action-flat-hover: rgb(var(--color-gold-light));
  --action-flat-pressed: rgb(var(--color-gold-dark));
  --action-home-hover: #efd88d;
  --action-primary: rgb(var(--color-gold-light));
  --action-primary-hover: var(--action-home-hover);
  --action-primary-pressed: rgb(var(--color-gold));
  --state-error-text: rgb(var(--color-error));
  --state-error-surface: rgb(var(--color-error) / .08);
  --state-error-border: rgb(var(--color-error) / .5);
  --state-success-text: rgb(var(--color-success));
  --state-success-surface: rgb(var(--color-success) / .08);
  --state-success-border: rgb(var(--color-success) / .5);
  --state-warning-text: rgb(var(--color-warning));
  --state-warning-surface: rgb(var(--color-warning) / .08);
  --state-warning-border: rgb(var(--color-warning) / .5);
  --state-info-text: rgb(var(--color-info));
  --state-info-surface: rgb(var(--color-info) / .08);
  --state-info-border: rgb(var(--color-info) / .5);
  --state-unknown-text: var(--text-muted);
  --state-unknown-surface: rgb(var(--color-unknown) / .08);
  --state-unknown-border: rgb(var(--color-unknown) / .5);

  --font-body: Manrope, "Noto Sans", Mukta, system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, Cambria, "Times New Roman", ui-serif, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-metadata: .75rem;
  --text-detail: .8125rem;
  --text-trust: var(--text-detail);
  --text-helper: .875rem;
  --text-home-action: .92rem;
  --text-control: .95rem;
  --text-reading: 1rem;
  --text-lead: 1.125rem;
  --text-section: 1.25rem;
  --text-subtitle: 1.5rem;
  --text-task: 1.875rem;
  --text-task-wide: 2.25rem;
  /* The rem contribution keeps fluid type responsive to user text sizing. */
  --text-display: clamp(2.25rem, 1rem + 3.2vw, 4.25rem);
  --text-private-title: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
  --text-private-quote: clamp(1.3rem, 1rem + .85vw, 1.75rem);
  --leading-display: 1.1;
  --leading-title: 1.25;
  --leading-control: 1.4;
  --leading-label: 1.5;
  --leading-quote: 1.6;
  --leading-helper: 1.65;
  --leading-body: 1.7;
  --leading-reading: 1.75;
  --tracking-title: -.025em;
  --tracking-display: -.03em;
  --measure-reading: 65ch;
  --measure-brief: 68ch;
  --measure-short: 45ch;

  --space-1: .25rem;
  --space-1-5: .375rem;
  --space-2: .5rem;
  --space-2-5: .625rem;
  --space-3: .75rem;
  --space-3-5: .875rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --layout-shell: 80rem;
  --layout-gutter: var(--space-3);
  --layout-header-height: 68px;
  --layout-hero: 72rem;
  --layout-task: 42rem;
  --layout-private: 48rem;
  --layout-concern: 50rem;
  --layout-docs: 56.25rem;
  --target-compact: 44px;
  --target-task: 48px;
  --target-public: 52px;
  --target-field: 54px;
  --radius-control: 8px;
  --radius-input: 12px;
  --radius-panel: 16px;
  --radius-feature: 24px;
  --radius-hero: 30px;
  --radius-hero-mobile: 23px;
  --radius-pill: 9999px;
  --border-width: 1px;
  --elevation-panel: 0 24px 80px rgb(0 0 0 / .34);
  --elevation-card: 0 4px 20px rgb(0 0 0 / .3);
  --elevation-pressed: inset 0 2px 8px rgb(0 0 0 / .3);
  --duration-state: 160ms;

  /* Compatibility adapters. Gold is deliberately migrated D4AF37 → D6AE3F.
     Persona sage accent D4AF37 remains a separate domain value. */
  --gold-rgb: 214, 174, 63;
  --gold-light-rgb: 229, 199, 107;
  --magician-secondary-rgb: 155, 109, 255;
  --white-rgb: 255, 255, 255;
  --saffron-rgb: 184, 92, 30;
  --space-black-rgb: 11, 10, 20;
  --space-deep-rgb: 14, 13, 25;
  --space-mid-rgb: 24, 22, 42;
  --premium-gold: var(--action-flat);
  --premium-gold-2: rgb(var(--color-premium-highlight));
  --premium-text: rgb(var(--color-premium-text));
  --premium-muted: rgb(var(--color-premium-muted));
  --premium-faint: var(--text-placeholder);
  --premium-input-bg: var(--surface-input);
  --premium-input-border: var(--border-control);
  --premium-input-placeholder: var(--text-placeholder);
  --premium-focus: var(--focus-halo);
  --premium-shadow: var(--elevation-panel);
}

@media (min-width: 640px) {
  :root {
    --layout-gutter: var(--space-6);
    --layout-header-height: 76px;
  }
}

@media (min-width: 1024px) {
  :root { --layout-gutter: var(--space-8); }
}