/* ============================================================
   MHD Detailing — Color tokens
   Dark-first palette. Neutral greyscale + pastel-green accent.
   ============================================================ */
:root {
  /* --- Base: White --- */
  --color-white: #ffffff;

  /* --- Base: Neutral (greyscale, lightest → darkest) --- */
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d9d9d9;
  --color-neutral-light: #b3b3b3;
  --color-neutral: #818181;
  --color-neutral-dark: #4e4e4e;
  --color-neutral-darker: #1c1c1c;
  --color-neutral-darkest: #030303;

  /* --- Base: Pastel Green (brand accent) --- */
  --color-pastel-green-lightest: #f1fcee;
  --color-pastel-green-lighter: #e4fadd;
  --color-pastel-green-light: #a0ee8a;
  --color-pastel-green: #78e758; /* primary accent */
  --color-pastel-green-dark: #60b846; /* accent hover */
  --color-pastel-green-darker: #305c23;
  --color-pastel-green-darkest: #24451a; /* deep green surface */

  /* --- Base: Mine Shaft (warm-neutral dark, for elevated surfaces) --- */
  --color-mine-shaft-lightest: #ebebeb;
  --color-mine-shaft-lighter: #d8d8d8;
  --color-mine-shaft-light: #767676;
  --color-mine-shaft: #3c3c3c;
  --color-mine-shaft-dark: #303030;
  --color-mine-shaft-darker: #181818;
  --color-mine-shaft-darkest: #121212;

  /* --- White alpha ramp (overlays, borders, hovers on dark) --- */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);

  /* --- Dark alpha ramp (overlays, borders, hovers on light) --- */
  --color-neutral-darkest-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-neutral-darkest-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-neutral-darkest-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-neutral-darkest-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-neutral-darkest-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-neutral-darkest-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-neutral-darkest-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* ----------------------------------------------------------
     Semantic aliases — default (Scheme 1 / deep-green dark)
     Override these on a scheme scope. UI components read these.
     ---------------------------------------------------------- */
  --color-accent: var(--color-pastel-green);
  --color-accent-hover: var(--color-pastel-green-dark);

  --surface-page: var(--color-neutral-darker);          /* page background */
  --surface-card: var(--color-pastel-green-darkest);    /* card / nav fill */
  --text-primary: var(--color-white);                   /* body + headings */
  --text-muted: var(--color-white-60);                  /* secondary text  */
  --border-subtle: var(--color-white-20);               /* hairline border */
  --btn-text: var(--color-neutral-darkest);             /* text on accent  */

  --scheme-background: var(--surface-page);
  --scheme-foreground: var(--surface-card);
  --scheme-text: var(--text-primary);
  --scheme-border: var(--border-subtle);
  --scheme-btn-text: var(--btn-text);
}

/* ============================================================
   Color schemes — apply one per section. Children inherit
   text / accent / border automatically. Derived from a single
   background color, matching the source design exactly.
   ============================================================ */

/* Scheme 1 — deep pastel-green surface, white text (default) */
.scheme-1 {
  --scheme-background: var(--color-pastel-green-darkest);
  --scheme-foreground: var(--color-pastel-green-darkest);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-btn-text: var(--color-neutral-darkest);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

/* Scheme 2 — near-black neutral surface, white text */
.scheme-2 {
  --scheme-background: var(--color-neutral-darker);
  --scheme-foreground: var(--color-neutral-darker);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-btn-text: var(--color-neutral-darkest);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

/* Scheme 3 — light neutral surface, near-black text */
.scheme-3 {
  --scheme-background: var(--color-neutral-lightest);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-neutral-darkest-15);
  --scheme-btn-text: var(--color-neutral-darkest);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}