/* Colors — Figma collections "Basics / Colors" (primitives) and "Modes" (semantic).
   Variable names match the Figma variable paths verbatim. */

:root {
  /* ── Primitives: Grey ───────────────────────────────────────── */
  --basic-colors-white: rgb(255, 255, 255);
  --basic-colors-grey-50: rgb(250, 250, 250);
  --basic-colors-grey-100: rgb(245, 245, 245);
  --basic-colors-grey-200: rgb(230, 230, 230);
  --basic-colors-grey-300: rgb(217, 217, 217);
  --basic-colors-grey-400: rgb(163, 163, 163);
  --basic-colors-grey-500: rgb(114, 114, 114);
  --basic-colors-grey-600: rgb(83, 83, 83);
  --basic-colors-grey-700: rgb(64, 64, 64);
  --basic-colors-grey-800: rgb(45, 45, 45);
  --basic-colors-grey-900: rgb(11, 11, 11);
  --basic-colors-black: rgb(0, 0, 0);
  /* Off-ramp greys used by individual components */
  --basic-colors-grey-near-white-fe: rgb(254, 254, 254);
  --basic-colors-grey-mid-bc: rgb(188, 188, 188);
  --basic-colors-grey-dark-1c: rgb(28, 27, 31);
  --basic-colors-grey-dark-primary: rgb(35, 32, 28);

  /* ── Primitives: Beige (brand warm neutral) ─────────────────── */
  --basic-colors-beige-50: rgb(252, 251, 250);
  --basic-colors-beige-100: rgb(245, 241, 239);
  --basic-colors-beige-200: rgb(240, 227, 211);
  --basic-colors-beige-300: rgb(206, 166, 112);
  --basic-colors-beige-400: rgb(165, 123, 68);
  --basic-colors-beige-600: rgb(155, 125, 84);
  --basic-colors-beige-700: rgb(124, 100, 67);
  --basic-colors-beige-800: rgb(93, 75, 50);
  --basic-colors-beige-900: rgb(72, 58, 39);
  --basic-colors-beige-900-2: rgb(60, 56, 51);
  --basic-colors-beige-1000: rgb(35, 32, 28);
  --basic-colors-beige-mid-ce: rgb(206, 154, 85);

  /* ── Primitives: Orange (brand accent) ─────────────────────── */
  --basic-colors-orange-50: rgb(250, 241, 230);
  --basic-colors-orange-100: rgb(248, 234, 217);
  --basic-colors-orange-200: rgb(240, 213, 176);
  --basic-colors-orange-300: rgb(207, 118, 0);
  --basic-colors-orange-400: rgb(186, 106, 0);
  --basic-colors-orange-600: rgb(155, 89, 0);
  --basic-colors-orange-700: rgb(124, 71, 0);
  --basic-colors-orange-800: rgb(93, 53, 0);
  --basic-colors-orange-900: rgb(72, 41, 0);

  /* ── Primitives: Accent (warm cream tints — glow / light washes) ── */
  --color-accent-50: rgb(255, 252, 248);
  --color-accent-100: rgb(255, 246, 233);
  --color-accent-200: rgb(255, 241, 222);
  --color-accent-300: rgb(255, 235, 207);
  --color-accent-400: rgb(255, 231, 198);
  --color-accent-500: rgb(255, 225, 184);
  --color-accent-600: rgb(232, 205, 167);
  --color-accent-700: rgb(181, 160, 131);
  --color-accent-800: rgb(140, 124, 101);
  --color-accent-900: rgb(107, 95, 77);

  /* ── Semantic: Content ─────────────────────────────────────── */
  --color-content-primary: var(--basic-colors-grey-900);
  --color-content-primary-disabled: var(--basic-colors-grey-400);
  --color-content-secondary: var(--basic-colors-grey-600);
  --color-content-secondary-disabled: var(--basic-colors-grey-300);
  --color-content-inverted: var(--basic-colors-grey-50);
  --color-content-inverted-disabled: var(--basic-colors-grey-400);
  --color-content-accent: var(--basic-colors-orange-300);
  --color-content-accent-disabled: var(--basic-colors-orange-200);

  /* ── Semantic: Background ──────────────────────────────────── */
  --color-background-base: var(--basic-colors-white);
  --color-background-primary: var(--basic-colors-grey-50);
  --color-background-primary-inverted: var(--basic-colors-grey-900);
  --color-background-secondary: var(--basic-colors-grey-100);
  --color-background-secondary-inverted: var(--basic-colors-grey-800);
  --color-background-brand-primary: var(--basic-colors-orange-300);
  --color-background-brand-secondary: var(--basic-colors-beige-200);
  --color-background-primary-beige: var(--basic-colors-beige-50);
  --color-background-secondary-beige: var(--basic-colors-beige-100);

  /* ── Semantic: Stroke ──────────────────────────────────────── */
  --color-stroke-primary: var(--basic-colors-grey-900);
  --color-stroke-primary-inverted: var(--basic-colors-grey-50);
  /* Hairline used on documentation swatches and quiet dividers */
  --color-stroke-subtle: var(--basic-colors-grey-200);

  /* ── Semantic: Text / Button ───────────────────────────────── */
  --color-text-primary: var(--basic-colors-grey-900);
  --color-text-secondary: var(--basic-colors-grey-500);
  --color-button-primary: var(--basic-colors-grey-800);
}

/* Dark mode — Figma "Modes" collection, Dark mode column.
   Dark is beige-warm, not neutral: surfaces move to Beige/1000. */
:root[data-theme='dark'],
.dark {
  --color-content-primary: var(--basic-colors-grey-50);
  --color-content-primary-disabled: var(--basic-colors-grey-400);
  --color-content-secondary: var(--basic-colors-grey-300);
  --color-content-secondary-disabled: var(--basic-colors-grey-600);
  --color-content-inverted: var(--basic-colors-grey-900);
  --color-content-accent: var(--basic-colors-orange-200);

  --color-background-base: var(--basic-colors-beige-1000);
  --color-background-primary: var(--basic-colors-beige-1000);
  --color-background-primary-inverted: var(--basic-colors-grey-50);
  --color-background-secondary: var(--basic-colors-beige-900-2);
  --color-background-secondary-inverted: var(--basic-colors-grey-100);
  --color-background-brand-primary: var(--basic-colors-orange-400);
  --color-background-primary-beige: var(--basic-colors-beige-1000);
  --color-background-secondary-beige: var(--basic-colors-beige-900-2);

  --color-stroke-primary: var(--basic-colors-grey-50);
  --color-stroke-primary-inverted: var(--basic-colors-grey-900);
  --color-stroke-subtle: var(--basic-colors-beige-900-2);

  --color-text-primary: var(--basic-colors-grey-50);
  --color-text-secondary: var(--basic-colors-grey-300);
  --color-button-primary: var(--basic-colors-grey-100);
}