/* Mpangaj — teal/paper/serif re-theme.
   Unlayered :root override. Tailwind v4's own color/font/radius declarations
   live inside `@layer theme{:root,:host{...}}` — an unlayered rule always
   wins over a layered one regardless of load order, so this file retheme's
   every compiled utility (`.bg-brand-500`, `.text-slate-600`, `.font-serif`,
   `.rounded-xl`, …) app-wide without touching tailwind.min.css or rebuilding
   from input.css. See humming-knitting-newell.md Phase 0 for the full plan. */
:root {
  /* ---- brand (teal) ---- */
  --color-brand-50:  #EAF3F1;
  --color-brand-100: #D3E6E2;
  --color-brand-500: #1C6E64;
  --color-brand-600: #175850;
  --color-brand-700: #0F3634;
  --color-brand-900: #081F1D;

  /* ---- indigo, aliased to brand (legacy utility class survivors) ---- */
  --color-indigo-50:  var(--color-brand-50);
  --color-indigo-300: #8FC0B8;
  --color-indigo-600: var(--color-brand-600);
  --color-indigo-700: var(--color-brand-700);

  /* ---- slate, warm neutral anchored on paper/mist/silver/ink ---- */
  --color-slate-50:  #F7F6F1;
  --color-slate-100: #EBF0EA;
  --color-slate-200: #DCE2DC;
  --color-slate-300: #C3CBC6;
  --color-slate-400: #9BA69E;
  --color-slate-500: #748177;
  --color-slate-600: #566159;
  --color-slate-700: #3D4740;
  --color-slate-800: #24302B;
  --color-slate-900: #0A1F1B;

  /* ---- emerald + green, folded onto a single leaf-green accent ---- */
  --color-emerald-50:  #EEF7F1;
  --color-emerald-100: #DCEEE2;
  --color-emerald-400: #7FBD97;
  --color-emerald-500: #4F9D6E;
  --color-emerald-600: #3D8058;
  --color-emerald-700: #2E6244;
  --color-emerald-800: #204732;
  --color-green-50:  var(--color-emerald-50);
  --color-green-200: #B9DDC7;
  --color-green-600: var(--color-emerald-600);
  --color-green-700: var(--color-emerald-700);

  /* ---- red + rose, folded onto one warmed red — kept hue-distinct from
         amber and the orange accent so the red/amber/green severity
         gradient stays legible ---- */
  --color-red-50:  #FBEDEA;
  --color-red-100: #F5D6CE;
  --color-red-200: #EAB0A0;
  --color-red-300: #DD8871;
  --color-red-400: #CE6247;
  --color-red-500: #C1432B;
  --color-red-600: #A83420;
  --color-red-700: #862919;
  --color-rose-600: var(--color-red-600);
  --color-rose-700: var(--color-red-700);

  /* ---- orange, the single primary-action accent (tokens.css) — reserved for
         "add/create" CTAs, kept out of every other family above so it stays
         visually distinct. Never touched by Phase 0; added here so bg-orange-*
         utilities finally resolve to the real accent instead of stock Tailwind
         orange. 600 matches tmp/themes/css/components.css's .btn-orange:hover
         exactly. ---- */
  --color-orange-50:  #FBEEE6;
  --color-orange-100: #F5DBC7;
  --color-orange-200: #EBC09E;
  --color-orange-500: #E2712C;
  --color-orange-600: #C85F1E;
  --color-orange-700: #A04C18;

  /* ---- amber, gently warmed, hue-separated from red and orange ---- */
  --color-amber-50:  #FBF6E9;
  --color-amber-100: #F5E9C7;
  --color-amber-200: #ECD69B;
  --color-amber-300: #E1C06A;
  --color-amber-400: #D4A83F;
  --color-amber-500: #C2932A;
  --color-amber-600: #A67720;
  --color-amber-700: #855D19;
  --color-amber-800: #654513;

  /* ---- blue, aliased to brand/indigo-300 ----
         Pre-existing leftover from the old indigo-brand build (blue read fine
         next to indigo; it clashes now next to teal) — used for muted text on
         dark nav surfaces (sidebar tagline/role, mobile header icons) and one
         "Commercial Details" form accent. No distinct blue in the new palette,
         so it folds onto brand/indigo-300 like rose folded onto red. ---- */
  --color-blue-50:  var(--color-brand-50);
  --color-blue-100: var(--color-brand-100);
  --color-blue-200: var(--color-indigo-300);
  --color-blue-300: var(--color-indigo-300);
  --color-blue-400: var(--color-brand-500);
  --color-blue-500: var(--color-brand-500);
  --color-blue-700: var(--color-brand-700);

  /* ---- type ---- */
  --font-serif: 'Fraunces', serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* ---- radius: new sharper aesthetic ---- */
  --radius-lg:  4px;
  --radius-xl:  4px;
  --radius-2xl: 4px;
}

/* bg-brand-800 was never compiled by Tailwind (the original scale only ever had
   50/100/500/600/700/900) but the mobile-header currency select references it —
   a pre-existing dead class. Patched here rather than in the template, same as
   every other Phase-0 fix: one override file, zero template edits for color. */
.bg-brand-800 { background-color: #0C2B29; }