/* ============================================================
   Obseras color system
   Base palettes are literal scales; semantic aliases are what
   components should consume. Dark theme = [data-theme="dark"].
   Tone: warm neutrals (hue 85, chroma ≤ 0.009) + deep teal accent
   (hue 185). Diff semantics: green = added, red = removed,
   amber = changed/pending.
   ============================================================ */
:root {
  /* --- Base: warm neutrals --- */
  --neutral-0:   oklch(1 0 0);
  --neutral-50:  oklch(0.985 0.004 85);
  --neutral-100: oklch(0.965 0.005 85);
  --neutral-200: oklch(0.93 0.006 85);
  --neutral-300: oklch(0.87 0.007 85);
  --neutral-400: oklch(0.71 0.008 85);
  --neutral-500: oklch(0.56 0.009 85);
  --neutral-600: oklch(0.45 0.009 85);
  --neutral-700: oklch(0.37 0.009 85);
  --neutral-800: oklch(0.27 0.008 85);
  --neutral-900: oklch(0.215 0.008 85);
  --neutral-950: oklch(0.165 0.007 85);

  /* --- Base: teal (brand accent) --- */
  --teal-100: oklch(0.955 0.028 185);
  --teal-200: oklch(0.90 0.055 185);
  --teal-300: oklch(0.82 0.085 185);
  --teal-400: oklch(0.72 0.105 185);
  --teal-500: oklch(0.62 0.108 185);
  --teal-600: oklch(0.535 0.098 186);
  --teal-700: oklch(0.455 0.085 187);
  --teal-800: oklch(0.375 0.068 188);
  --teal-900: oklch(0.30 0.052 190);

  /* --- Base: status hues (chroma-matched) --- */
  --green-100: oklch(0.955 0.045 150);
  --green-500: oklch(0.62 0.13 150);
  --green-600: oklch(0.53 0.115 150);
  --green-700: oklch(0.45 0.10 150);
  --red-100:   oklch(0.955 0.028 25);
  --red-500:   oklch(0.60 0.16 25);
  --red-600:   oklch(0.52 0.15 25);
  --red-700:   oklch(0.45 0.13 25);
  --amber-100: oklch(0.965 0.045 85);
  --amber-500: oklch(0.75 0.135 78);
  --amber-700: oklch(0.55 0.115 70);
  --blue-100:  oklch(0.955 0.028 240);
  --blue-500:  oklch(0.60 0.13 240);
  --blue-700:  oklch(0.46 0.11 242);

  /* --- Semantic: surfaces --- */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-hover:   oklch(0.955 0.005 85);
  --surface-inverse: var(--neutral-900);

  /* --- Semantic: text --- */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-inverse:   var(--neutral-50);
  --text-on-accent: oklch(0.985 0.01 185);

  /* --- Semantic: borders --- */
  --border-default: oklch(0.91 0.006 85);
  --border-strong:  oklch(0.84 0.007 85);
  --border-focus:   var(--teal-500);

  /* --- Semantic: accent --- */
  --accent:        var(--teal-600);
  --accent-hover:  var(--teal-700);
  --accent-active: var(--teal-800);
  --accent-soft:   var(--teal-100);
  --accent-text:   var(--teal-700);

  /* --- Semantic: status --- */
  --success:      var(--green-600);
  --success-soft: var(--green-100);
  --success-text: var(--green-700);
  --danger:       var(--red-600);
  --danger-hover: var(--red-700);
  --danger-soft:  var(--red-100);
  --danger-text:  var(--red-700);
  --warning:      var(--amber-500);
  --warning-soft: var(--amber-100);
  --warning-text: var(--amber-700);
  --info:         var(--blue-500);
  --info-soft:    var(--blue-100);
  --info-text:    var(--blue-700);

  /* --- Semantic: diffs (the product's core visual) --- */
  --diff-added-bg:     oklch(0.955 0.045 150);
  --diff-added-accent: var(--green-600);
  --diff-added-text:   var(--green-700);
  --diff-removed-bg:     oklch(0.955 0.028 25);
  --diff-removed-accent: var(--red-600);
  --diff-removed-text:   var(--red-700);
}

[data-theme="dark"] {
  --surface-page:    oklch(0.17 0.008 85);
  --surface-card:    oklch(0.215 0.009 85);
  --surface-raised:  oklch(0.255 0.009 85);
  --surface-sunken:  oklch(0.145 0.007 85);
  --surface-hover:   oklch(0.245 0.009 85);
  --surface-inverse: var(--neutral-50);

  --text-primary:   oklch(0.94 0.005 85);
  --text-secondary: oklch(0.72 0.008 85);
  --text-tertiary:  oklch(0.58 0.009 85);
  --text-inverse:   var(--neutral-900);
  --text-on-accent: oklch(0.985 0.01 185);

  --border-default: oklch(0.30 0.009 85);
  --border-strong:  oklch(0.38 0.009 85);
  --border-focus:   var(--teal-400);

  --accent:        var(--teal-500);
  --accent-hover:  var(--teal-400);
  --accent-active: var(--teal-300);
  --accent-soft:   oklch(0.28 0.04 188);
  --accent-text:   var(--teal-300);

  --success:      var(--green-500);
  --success-soft: oklch(0.27 0.05 150);
  --success-text: oklch(0.80 0.11 150);
  --danger:       var(--red-500);
  --danger-hover: oklch(0.66 0.16 25);
  --danger-soft:  oklch(0.27 0.06 25);
  --danger-text:  oklch(0.78 0.11 25);
  --warning:      var(--amber-500);
  --warning-soft: oklch(0.28 0.05 80);
  --warning-text: oklch(0.83 0.11 82);
  --info:         var(--blue-500);
  --info-soft:    oklch(0.27 0.05 240);
  --info-text:    oklch(0.78 0.09 240);

  --diff-added-bg:     oklch(0.26 0.045 150);
  --diff-added-accent: var(--green-500);
  --diff-added-text:   oklch(0.82 0.11 150);
  --diff-removed-bg:     oklch(0.26 0.045 25);
  --diff-removed-accent: var(--red-500);
  --diff-removed-text:   oklch(0.80 0.10 25);
}