/* LAYER 02 — SEMANTIC (light, the default)
   Primitives mapped onto meaning. This is the layer that flips between themes.
   60/30/10: Light Water neutrals carry 60% of a screen, Deep Navy 30% as text and dense
   surfaces, Orka Blue is spent deliberately as the 10% that means "act here". */
:root {
  --brand: var(--orka-blue-600);
  --brand-hover: var(--orka-blue-700);
  --brand-active: var(--orka-blue-800);
  --brand-text: var(--orka-blue-700);
  --brand-subtle: var(--orka-blue-100);
  --brand-subtle-hover: var(--orka-blue-200);
  --brand-border: var(--orka-blue-300);
  --brand-on: var(--orka-neutral-0);
  --brand-disabled: #9CC8F6;

  /* Five background layers, canvas up to inverted */
  --bg-canvas: var(--orka-neutral-25);
  --bg-surface: var(--orka-neutral-0);
  --bg-surface-sunken: var(--orka-neutral-50);
  --bg-subtle: var(--orka-neutral-100);
  --bg-muted: var(--orka-neutral-150);
  --bg-inverse: var(--orka-neutral-850);
  --bg-on-inverse: var(--orka-neutral-25);

  --text-primary: var(--orka-neutral-850);
  --text-secondary: var(--orka-neutral-500);
  --text-tertiary: var(--orka-neutral-400);
  --text-disabled: var(--orka-neutral-300);
  --text-on-brand: var(--orka-neutral-0);
  --text-link: var(--orka-blue-700);
  --text-link-hover: var(--orka-blue-800);

  --border-subtle: var(--orka-neutral-150);
  --border-default: var(--orka-neutral-200);
  --border-strong: var(--orka-neutral-300);
  --border-brand: var(--orka-blue-300);

  /* Semantic states — four tones each: text, solid, subtle fill, border */
  --success-text: #06784F;
  --success-solid: var(--orka-success-600);
  --success-subtle: var(--orka-success-50);
  --success-border: #A6E3C8;

  --warning-text: #8A5B04;
  --warning-solid: var(--orka-warning-600);
  --warning-subtle: var(--orka-warning-50);
  --warning-border: #F0D49B;

  --error-text: #B0261B;
  --error-solid: var(--orka-error-600);
  --error-subtle: var(--orka-error-50);
  --error-border: #F3B7B1;

  --info-text: var(--orka-blue-700);
  --info-solid: var(--orka-blue-600);
  --info-subtle: var(--orka-blue-100);
  --info-border: var(--orka-blue-300);

  /* Count / notification badge — always the same red, regardless of state semantics */
  --count-solid: var(--orka-count-red);
  --count-on: var(--orka-neutral-0);

  /* AI accent — Indigo -> Teal. AI-assisted moments only, never standard UI. */
  --accent-indigo: var(--orka-accent-indigo);
  --accent-teal: var(--orka-accent-teal);
  --accent-ai-gradient: linear-gradient(90deg, var(--orka-accent-indigo), var(--orka-accent-teal));
  --accent-ai-surface: #F6F6FF;
  --accent-ai-border: #DDDCFB;
  --accent-ai-text: #4340C4;

  /* Chart slots resolve per theme */
  --chart-1: var(--orka-chart-1-light);
  --chart-2: var(--orka-chart-2-light);
  --chart-3: var(--orka-chart-3-light);
  --chart-4: var(--orka-chart-4-light);
  --chart-5: var(--orka-chart-5-light);
  --chart-6: var(--orka-chart-6-light);
  --chart-7: var(--orka-chart-7-light);
  --chart-8: var(--orka-chart-8-light);
  --chart-other: var(--orka-neutral-300);
  --chart-surface: var(--orka-neutral-0);
  --chart-grid: var(--orka-neutral-150);
  --chart-axis-text: var(--orka-neutral-400);
  --chart-track: var(--orka-neutral-100);

  /* Interaction fills, derived from the opacity scale */
  --state-hover: rgb(15 36 64 / var(--opacity-4));
  --state-pressed: rgb(15 36 64 / var(--opacity-8));
  --state-selected: var(--orka-blue-100);
  --state-focus-ring: rgb(30 143 236 / 0.40);
  --scrim: rgb(15 36 64 / 0.32);
}