/* brand.css — Intelligent Planning styling laid over the compiled XER Cleaner
   bundle (app/assets/*.css, Tailwind output from the separate xerclean project).
   Do not edit the bundle CSS: it is replaced on every recompile. Everything
   brand-related lives here and survives a re-copy of app/. Unlayered rules beat
   Tailwind's @layer output, so these overrides win regardless of load order. */

:root {
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Tailwind palette remapped to the brand: blue -> rust, slate -> warm neutrals. */
  --color-blue-50: #FEF6F1;
  --color-blue-500: #C93B12;
  --color-blue-700: #A63412;
  --color-slate-50: #FEF6F1;
  --color-slate-100: #FAEBE1;
  --color-slate-300: #DCC2B2;
  --color-slate-400: #B89C8C;
  --color-slate-500: #5C4A40;
  --color-slate-600: #5C4A40;
  --color-slate-700: #3B2D25;
  --color-slate-800: #201712;
  --color-amber-50: #FFF6DB;
  --color-amber-700: #8A5A00;
  --color-green-50: #F1F8F1;
  --color-green-100: #DDEEDD;
  --color-green-800: #2F7D32;
  --color-green-900: #1F5A22;
}

body { background: #FEF6F1; color: #201712; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }
#root h1, #root h2, #root h3, #root h4, #root button { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; }
#root h2, #root h3 { color: #201712; }

/* The wrapper page owns the <h1> (with the BETA badge); hide the app's own. */
#root header h1 { display: none; }

/* Cards: flat, no outline shadows; small corners. */
#root aside { box-shadow: none; background: #FEF6F1; border-color: #DCC2B2; }
#root .bg-white { background: #FFFFFF; }
#root .rounded { border-radius: 4px; }

/* Primary buttons: rust with white text (5.0:1); hover deepens. */
#root button.bg-slate-800, #root button.bg-blue-700 { background: #C93B12; color: #fff; }
#root button.bg-slate-800:hover:not(:disabled), #root button.bg-blue-700:hover:not(:disabled) { background: #A63412; }
#root button:disabled { opacity: .5; cursor: not-allowed; }
#root a { color: #A63412; }
#root :focus-visible { outline: 3px solid #201712; outline-offset: 2px; }