/* noir.css (drop-in replacement for blue.css)
   Professional monochrome noir + bright red CTA
   Mirrors blue.css structure: distinct page / border ring / surfaces
*/

:root{
  /* ---------------------------------------------------------
     Base palette (legacy tokens — DO NOT CHANGE NAMES)
     Monochrome steps (not identical):
     light-1 (inside) / light-2 (ring) / light-3 (page + separators)
     --------------------------------------------------------- */

  /* legacy primary hooks */
  --color-primary: hsl(0 0% 12%);        /* near-black (legacy accents) */
  --color-primary-dark: hsl(0 0% 0%);    /* true black */

  /* light variations (distinct) */
  --color-light-1: hsl(0 0% 100%);       /* surfaces/cards */
  --color-light-2: hsl(0 0% 96%);        /* container ring */
  --color-light-3: hsl(0 0% 90%);        /* page background + separators */

  /* dark variations (distinct) */
  --color-dark-1: hsl(0 0% 34%);         /* strong borders */
  --color-dark-2: hsl(0 0% 18%);         /* body text */
  --color-dark-3: hsl(0 0% 8%);          /* headings / deep bg */

  /* alerts */
  --red-alert: hsl(0 100% 40%);
  --yellow-alert: hsl(45 100% 52%);

  /* shadow colors (neutral) */
  --color-shadow-1: hsla(0 0% 0% / 0.08);
  --color-shadow-2: hsla(0 0% 0% / 0.18);

  /* ---------------------------------------------------------
     Callout boxes (distinct, premium, readable)
     Keep them differentiated (not the same gray), but subtle.
     --------------------------------------------------------- */

  --green-box-border: hsl(150 18% 34%);
  --green-box:        hsl(150 22% 93%);

  --yellow-box-border: hsl(42 22% 44%);
  --yellow-box:        hsl(42 28% 93%);

  --red-box-border: hsl(0 25% 40%);
  --red-box:        hsl(0 28% 95%);

  --purple-box-border: hsl(285 16% 42%);
  --purple-box:        hsl(285 18% 96%);

  --gray-box-border: hsl(0 0% 38%);
  --gray-box:        hsl(0 0% 95%);

  /* ---------------------------------------------------------
     Extended semantic tokens (match blue.css structure)
     --------------------------------------------------------- */

  /* Global surfaces / text */
  --page-background: var(--color-light-3);   /* outer page */
  --page-text: var(--color-dark-2);
  --heading-text: var(--color-dark-3);

  --surface-1: var(--color-light-1);         /* container interior */
  --surface-2: var(--color-light-2);         /* container border ring */
  --surface-3: hsl(0 0% 86%);                /* separators/shadow tint (distinct from page) */

  --border-subtle: hsl(0 0% 84%);            /* subtle borders */
  --border-strong: var(--color-dark-1);      /* stronger borders */

  --background-dark: hsl(0 0% 6%);           /* deep sections */
  --background-dark-heading: hsl(0 0% 100%);

  /* Accent (STRICT MONOCHROME: no hue) */
  --accent-color: hsl(0 0% 16%);             /* graphite */
  --accent-strong: hsl(0 0% 0%);             /* pure black emphasis */
  --accent-contrast: hsl(0 0% 100%);

  /* Links (match CTA red) */
  --link-color: var(--button-background);
  --link-color-hover: var(--button-background-hover);

  /* Focus */
  --focus-ring-color: hsla(0 0% 0% / 0.18);
  --focus-outline-color: var(--link-color-hover);

  /* ---------------------------------------------------------
     Buttons (primary CTA) — BRIGHT RED + NOIR HOVER
     --------------------------------------------------------- */

  --button-background: hsl(0 100% 40%);      /* vivid red */
  --button-background-hover: hsl(0 0% 0%);   /* black hover (premium) */
  --button-background-active: hsl(0 0% 10%); /* slightly lifted black */

  --button-text: hsl(0 0% 100%);
  --button-text-hover: hsl(0 0% 100%);
  --button-text-active: hsl(0 0% 100%);

  /* border behavior: subtle on red, crisp white on hover/active/focus */
  --button-border: hsla(0 0% 100% / 0.25);
  --button-border-hover: hsl(0 0% 100%);
  --button-border-active: hsl(0 0% 100%);
  --button-border-focus: hsl(0 0% 100%);

  --button-focus-ring: hsla(0 100% 40% / 0.20);

  /* buttons on dark panels */
  --button-dark-border: hsla(0 0% 100% / 0.22);

  /* ---------------------------------------------------------
     Form fields
     --------------------------------------------------------- */

  --field-background: var(--color-light-2);
  --field-background-focus: var(--color-light-1);

  --field-border: var(--border-subtle);
  --field-border-hover: hsl(0 0% 38%);
  --field-border-focus: hsl(0 0% 0%);

  --field-text: var(--color-dark-3);
  --field-placeholder: hsl(0 0% 28%);

  --field-focus-ring: var(--focus-ring-color);

  --checkbox-check: var(--accent-color);

  /* dark panel fields (offer-dark uses light inputs on dark) */
  --field-dark-background: var(--color-light-1);
  --field-dark-border: hsl(0 0% 20%);
  --field-dark-text: var(--color-dark-3);

  /* ---------------------------------------------------------
     Navigation
     --------------------------------------------------------- */

  --nav-background: var(--color-light-1);
  --nav-border-top: var(--border-subtle);
  --nav-border-bottom: hsl(0 0% 20%);

  --nav-link-color: var(--color-dark-2);
  --nav-link-divider: var(--nav-border-top);
  --nav-link-hover-background: var(--color-light-3);

  --nav-link-active-background: hsl(0 0% 10%);
  --nav-link-active-color: hsl(0 0% 100%);

  /* ---------------------------------------------------------
     Accordion
     --------------------------------------------------------- */

  --accordion-card-background: var(--color-light-1);
  --accordion-card-border: var(--border-subtle);
  --accordion-card-shadow: var(--surface-3);

  --accordion-summary-background: hsl(0 0% 10%);
  --accordion-summary-background-hover: hsl(0 0% 16%);
  --accordion-summary-text: hsl(0 0% 100%);

  /* ---------------------------------------------------------
     Panels / surfaces
     --------------------------------------------------------- */

  --panel-light-background: var(--color-light-1);
  --panel-light-text: var(--color-dark-3);

  --panel-dark-background: var(--background-dark);
  --panel-dark-text: var(--background-dark-heading);

  /* ---------------------------------------------------------
     Footer
     --------------------------------------------------------- */

  --footer-background: hsl(0 0% 8%);
  --footer-text: hsl(0 0% 90%);
  --footer-link-color: hsl(0 0% 88%);
  --footer-link-hover-color: hsl(0 0% 98%);
}