/* ───────────────────────────────────────────────────────────────
   Norm — Color tokens
   Primitive palette (from Figma "Primitives") + semantic aliases
   (from Figma "Base" + Color/Token board).
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Primitives ─────────────────────────────────────────────── */
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);

  /* Gray — the workhorse neutral (cool) */
  --gray-50:  rgb(249, 250, 251);
  --gray-100: rgb(243, 244, 246);
  --gray-200: rgb(229, 231, 235);
  --gray-300: rgb(209, 213, 219);
  --gray-400: rgb(156, 163, 175);
  --gray-500: rgb(107, 114, 128);
  --gray-600: rgb(75, 85, 99);
  --gray-700: rgb(55, 65, 81);
  --gray-800: rgb(31, 41, 55);
  --gray-900: rgb(3, 7, 18);

  /* Blue — links, selection, focus */
  --blue-50:  rgb(239, 247, 255);
  --blue-100: rgb(218, 235, 255);
  --blue-200: rgb(190, 221, 255);
  --blue-300: rgb(145, 201, 255);
  --blue-400: rgb(93, 171, 253);
  --blue-500: rgb(55, 136, 250);
  --blue-600: rgb(40, 110, 240);
  --blue-700: rgb(25, 83, 220);
  --blue-800: rgb(27, 68, 178);
  --blue-900: rgb(28, 61, 140);

  /* Green — high energy class, good condition */
  --green-50:  rgb(241, 248, 244);
  --green-100: rgb(220, 239, 225);
  --green-200: rgb(188, 222, 199);
  --green-300: rgb(144, 197, 165);
  --green-400: rgb(96, 167, 126);
  --green-500: rgb(59, 129, 91);
  --green-600: rgb(45, 110, 76);
  --green-700: rgb(36, 88, 62);
  --green-800: rgb(31, 70, 51);
  --green-900: rgb(26, 58, 43);

  /* Terracotta — low energy class, poor condition, warnings */
  --terracotta-50:  rgb(252, 244, 239);
  --terracotta-100: rgb(248, 225, 209);
  --terracotta-200: rgb(243, 199, 167);
  --terracotta-300: rgb(237, 177, 133);
  --terracotta-400: rgb(237, 133, 74);
  --terracotta-500: rgb(226, 114, 74);
  --terracotta-600: rgb(170, 62, 36);
  --terracotta-700: rgb(139, 45, 29);
  --terracotta-800: rgb(106, 35, 25);
  --terracotta-900: rgb(74, 27, 20);

  /* Red — danger, destructive */
  --red-50:  rgb(254, 242, 243);
  --red-100: rgb(253, 230, 231);
  --red-200: rgb(251, 208, 211);
  --red-300: rgb(247, 170, 177);
  --red-400: rgb(242, 122, 136);
  --red-500: rgb(232, 75, 96);
  --red-600: rgb(211, 42, 73);
  --red-700: rgb(178, 30, 61);
  --red-800: rgb(150, 27, 57);
  --red-900: rgb(128, 27, 54);

  /* Stone — warm neutral, used sparingly for imagery surfaces */
  --stone-50:  rgb(250, 250, 249);
  --stone-100: rgb(245, 245, 244);
  --stone-200: rgb(231, 229, 228);
  --stone-300: rgb(214, 211, 209);
  --stone-400: rgb(168, 162, 158);
  --stone-500: rgb(120, 113, 108);
  --stone-600: rgb(87, 83, 78);
  --stone-700: rgb(68, 64, 60);
  --stone-800: rgb(41, 37, 36);
  --stone-900: rgb(28, 25, 23);

  /* Extra energy-class hues that aren't on the primitive ramps */
  --lime-c: rgb(114, 167, 96);   /* class C / condition 3 */
  --lime-d: rgb(208, 218, 96);   /* class D */

  /* ── Semantic — text ────────────────────────────────────────── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-on-dark:   var(--white);
  --text-link:      var(--blue-600);

  /* ── Semantic — surfaces ────────────────────────────────────── */
  --surface:           var(--white);
  --surface-subtle:    var(--gray-50);
  --surface-container: var(--gray-100);
  --surface-inverse:   var(--gray-900);
  --surface-modal:     rgba(3, 7, 18, 0.70);
  --skeleton:          var(--gray-100);

  /* ── Semantic — borders & lines ─────────────────────────────── */
  --border:        var(--gray-300);
  --border-subtle: var(--gray-200);
  --divider:       rgba(3, 7, 18, 0.06);
  --focus-ring:    var(--blue-600);

  /* ── Buttons ────────────────────────────────────────────────── */
  --btn-primary-bg:          var(--gray-900);
  --btn-primary-bg-hover:    var(--gray-700);
  --btn-primary-bg-pressed:  var(--gray-500);
  --btn-primary-bg-disabled: var(--gray-300);
  --btn-primary-label:       var(--white);

  --btn-secondary-bg:          var(--white);
  --btn-secondary-bg-hover:    var(--gray-50);
  --btn-secondary-bg-pressed:  var(--gray-100);
  --btn-secondary-label:       var(--gray-900);
  --btn-secondary-label-hover: var(--gray-700);
  --btn-secondary-label-disabled: var(--gray-400);
  --btn-secondary-border:      var(--gray-300);

  /* ── Feedback ───────────────────────────────────────────────── */
  --danger-bg:    var(--red-50);
  --danger-label: var(--red-600);
  --warning:      var(--terracotta-400);
  --success:      var(--green-600);

  /* ── Lists & tables ─────────────────────────────────────────── */
  --list-bg:       var(--white);
  --list-hover:    var(--gray-50);
  --list-pressed:  var(--gray-100);
  --list-selected: var(--blue-100);

  /* ── Energy class scale (A best → G worst) ──────────────────── */
  --energy-a: var(--green-700);
  --energy-b: var(--green-500);
  --energy-c: var(--lime-c);
  --energy-d: var(--lime-d);
  --energy-e: var(--terracotta-300);
  --energy-f: var(--terracotta-400);
  --energy-g: var(--terracotta-600);

  /* ── Building condition scale (1 worst → 4 best) ────────────── */
  --condition-1: var(--terracotta-600);
  --condition-2: var(--terracotta-400);
  --condition-3: var(--lime-c);
  --condition-4: var(--green-700);
}