/*
 * ModScrim brand override layer. Load AFTER design/tokens.css, never before.
 *
 * design/tokens.css is generated by the artistic-color-palettes skill and is
 * regenerated byte-identically on every re-run, so it must not be hand-edited.
 * Every ModScrim deviation from that generated baseline lives in this file, and
 * every value below traces to brand/DESIGN.md or to a measured contrast fix.
 *
 * Why a deviation is needed at all: the skill maps --color-bg to neutral-50 and
 * --color-text to neutral-900, and caps the neutral ramp's chroma at 0.03.
 * Wall green #123D2E has chroma 0.0547 (1.8x the cap), so the generated ramp
 * cannot reproduce it. The brand colours survive as --palette-* primitives in
 * the generated file, and this layer maps the semantic roles onto them.
 *
 * Measured with the skill's own validate.py. WCAG 2 gate: body text 4.5:1,
 * large text 3:1, meaningful non-text 3:1.
 */

/* ---- named primitives this layer adds ---- */
:root {
  /*
   * Hover fills, one per ground. Both are steps on the whistle-orange hue
   * (H 42.5) and both were measured; they live here so no component has to
   * repeat a hex. See the hover note in the light block for why they differ.
   */
  --accent-hover-on-light: #f05c00;  /* darker step; label 4.57:1 */
  --accent-hover-on-dark: #ff9970;   /* lighter step; label 7.36:1 */
  /* brand/DESIGN.md "deep green", the wells and sunken tones of the dark ground */
  --palette-deep-green: #051a12;
  /* brand orange-400: orange as text on the dark ground, 5.0:1 on wall green (the fill orange is 4.2:1) */
  --accent-text-on-dark: #ff844a;
}

/* ---- light: the chalk ground ---- */
:root,
[data-theme="light"] {
  /* page and card grounds (brand/DESIGN.md: background, surface) */
  --color-bg: var(--palette-chalk);            /* was neutral-50  #f3f8f6 */
  --color-surface: #ffffff;                    /* was neutral-50  #f3f8f6 - Paper, the one #fff DESIGN.md defines */
  --color-text: var(--palette-wall-green);     /* was neutral-900 #27302c - 10.61:1 on chalk */

  /*
   * EXEMPTION (narrow, deliberate, one colour only)
   * --------------------------------------------------------------------
   * Pairs:   accent fill #ff6a1f on bg #eef1e8      = 2.51:1  (gate wants 3:1)
   *          accent fill #ff6a1f on surface #ffffff = 2.86:1
   *          Both accepted: one colour, one cause, one mitigation.
   * Reason:  the control is identified by its label and its border-strong
   *          outline, not by the fill alone, so WCAG 1.4.11 is met through
   *          the border. Whistle orange is the brand's single action colour
   *          (brand/DESIGN.md: primary) and darkening it to reach 3:1 against
   *          chalk produced #d96531, which is off-brand.
   * Binding: ANY element using --color-action as a fill MUST also set
   *          border: 2px solid var(--color-action-border).
   *          Enforced by scripts/lint-action-border.mjs (npm run lint:tokens).
   * Scope:   this exemption covers --color-accent in light mode only, on both
   *          the chalk page and the Paper card. No other pair is exempt.
   *          Dark mode passes unexempted at 6.77:1.
   * -------------------------------------------------------------------- */
  --color-accent: var(--palette-whistle-orange);  /* was #d96531 */
  --color-on-accent: var(--palette-dugout);       /* was neutral-950 #1a211e - 5.37:1 on orange */

  /*
   * Hover, light. The generated #e25d1b sat 0.0008 L from the base fill, so the
   * state was invisible (validator flag: state_sibling). Replaced with a darker
   * step of the same hue (H 42.5). No darker same-hue step can hold the dark
   * label at 4.5:1 AND clear the 0.06 state_sibling threshold, so the residual
   * flag is answered with the non-colour cue the validator recommends: the
   * outline reads 1px heavier on hover.
   *
   * That cue is painted with box-shadow, never border-width, because changing
   * a border's width reflows the element and every element after it. Use:
   *   .control:hover { box-shadow: 0 0 0 1px var(--color-action-border); }
   * which draws outside the border box and costs no layout.
   * #f05c00: dL 0.0417, label 4.57:1.
   */
  --color-accent-hover: var(--accent-hover-on-light);  /* was #e25d1b */
  /* the no-layout-shift hover cue; apply as box-shadow, not border-width */
  --shadow-action-hover: 0 0 0 1px var(--color-action-border);

  /* chalk is darker than the generated bg, so the warning fill needed one more
     lightness step to hold 3:1. Lightness only; hue and chroma unchanged. */
  --color-warning: #b87f2c;                    /* was #bd8432 - 2.82:1 -> 3.01:1 on chalk */

  /* the 1px card outline from brand/DESIGN.md. Decorative separation only:
     1.35:1 on chalk, so it must never be the only thing marking a control. */
  --color-card-edge: #c9d3c5;

  /* every interactive control borrows this; 3.04:1 on chalk */
  --color-action-border: var(--color-border-strong);

  --skeleton-bg: var(--color-surface-sunken, #e2e7db);
}


/*
 * ONE dark ground (T-137). Dugout is the page, wall green is every card and
 * panel, deep green is every well. The generated tokens put near-black #080f0c
 * under the console and overlay while the shell, mod and landing pages used
 * dugout and wall green; this makes the semantic tier say the same thing for
 * every surface. Lighter ramp steps replace the few generated values that fell
 * below the gate on the greener ground (all measured with scripts/contrast-check.mjs;
 * the same values live in scripts/design-tokens/apply-override.py).
 */

/* ---- dark: follows the system unless data-theme=light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--palette-dugout);
    --color-bg-subtle: var(--palette-wall-green);
    --color-surface: var(--palette-wall-green);
    --color-surface-sunken: var(--palette-deep-green);
    --color-surface-hover: var(--voice-3-dark-700);
    --color-border-subtle: var(--voice-3-dark-700);
    --color-border: var(--voice-2-dark-600);
    --color-border-strong: var(--neutral-dark-400);
    --color-accent-text: var(--accent-text-on-dark);
    --color-voice-2-mark: var(--voice-2-dark-400);
    --color-voice-3-mark: var(--voice-3-dark-400);
    --color-success: var(--success-dark-300);
    --color-on-success: var(--palette-dugout);
    --color-danger: var(--danger-dark-300);
    --color-info: var(--info-dark-300);
    --color-on-info: var(--palette-dugout);
    --color-on-accent: var(--palette-dugout);  /* was neutral-dark-950 #080f0c */
    /* generated hover was #d8b9ad, a pink-beige hue jump rather than a state.
       Replaced with a lighter step of the same hue: dL 0.0786 (clears
       state_sibling), label 7.36:1. */
    --color-accent-hover: var(--accent-hover-on-dark);   /* was accent-dark-200 #d8b9ad */
    --color-card-edge: var(--color-border);
    --color-action-border: var(--color-border-strong);
    --shadow-action-hover: 0 0 0 1px var(--color-action-border);

    --skeleton-bg: var(--color-surface-sunken, #082319);
  }
}

/* ---- dark: explicit opt-in ---- */
[data-theme="dark"] {
  --color-bg: var(--palette-dugout);
  --color-bg-subtle: var(--palette-wall-green);
  --color-surface: var(--palette-wall-green);
  --color-surface-sunken: var(--palette-deep-green);
  --color-surface-hover: var(--voice-3-dark-700);
  --color-border-subtle: var(--voice-3-dark-700);
  --color-border: var(--voice-2-dark-600);
  --color-border-strong: var(--neutral-dark-400);
  --color-accent-text: var(--accent-text-on-dark);
  --color-voice-2-mark: var(--voice-2-dark-400);
  --color-voice-3-mark: var(--voice-3-dark-400);
  --color-success: var(--success-dark-300);
  --color-on-success: var(--palette-dugout);
  --color-danger: var(--danger-dark-300);
  --color-info: var(--info-dark-300);
  --color-on-info: var(--palette-dugout);
  --color-on-accent: var(--palette-dugout);
  --color-accent-hover: var(--accent-hover-on-dark);
  --color-card-edge: var(--color-border);
  --color-action-border: var(--color-border-strong);
  --shadow-action-hover: 0 0 0 1px var(--color-action-border);

  --skeleton-bg: var(--color-surface-sunken, #082319);
}