/* ═══════════════════════════════════════════════════════════════════════════
   D18 design tokens — v0 (UIF-002)
   Source: docs/design/DESIGN-SYSTEM.md sections 3.2, 4, 5, 6.1, 12 (PR #122).

   This is the ONLY file in the client shell that holds raw color values, and it
   holds them only as --d18-* tokens. Everything else uses var(--d18-*), or the
   MudBlazor theme in Client/Layout/D18Theme.cs, which carries the same values
   (Client.Tests checks both, and every pairing's WCAG ratio).

   Modes, set on <html> by js/d18-theme.js before first paint:
     .d18-dark   (default)  dark theme, the brand
     .d18-field             field mode: high-contrast light, for direct sun
   :root holds dark; :root.d18-field overrides only what changes.

   Rules (DESIGN-SYSTEM 3.4): no white text on Pitch Green; --d18-line is
   decorative only, never a control's only edge (controls use --d18-line-strong);
   Mint is for action and focus only; no gradients, glows or glass.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Color — dark (default) */
  --d18-bg: #111111;                  /* Charcoal */
  --d18-surface: #1C1C1C;             /* Carbon Gray */
  --d18-surface-raised: #2B302E;      /* Slate */
  --d18-chrome: #000000;              /* app bar, both modes (DL-07) */
  --d18-on-chrome: #FFFFFF;           /* 21.00 on chrome */
  --d18-text: #FFFFFF;                /* 18.88 on bg */
  --d18-text-muted: #BAC1BC;          /* 10.29 on bg, 9.29 on surface */
  --d18-text-disabled: #7A827D;       /* 4.78 on bg */
  --d18-action: #B6FDD3;              /* Electric Mint, 16.17 on bg */
  --d18-on-action: #111111;           /* 16.17 on action */
  --d18-action-secondary: #548C4B;    /* Pitch Green */
  --d18-on-action-secondary: #000000; /* 5.23; never white (4.02 fails) */
  --d18-line: #2F3432;                /* decorative only, 1.35 on surface */
  --d18-line-strong: #7A827D;         /* control edges, 4.31 on surface */
  --d18-pitch-line: #548C4B;          /* signature line work, 4.70 on bg */
  --d18-focus: #B6FDD3;               /* 16.17 on bg */
  --d18-success: #7EE2A8;             /* 11.99 on bg */
  --d18-warning: #F2C14E;             /* 11.25 on bg */
  --d18-error: #FF8A80;               /* 8.27 on bg */
  --d18-info: #8CC8FF;                /* 10.63 on bg */
  --d18-on-status: #111111;           /* label on a status fill, >= 8.27 */

  /* Focus ring */
  --d18-focus-width: 2px;

  /* Radius (DL-06): square by default; 4 px on controls so they read as tappable */
  --d18-radius-0: 0;
  --d18-radius-control: 4px;
  --d18-radius-pill: 999px;

  /* Spacing, 4 px base */
  --d18-space-1: 4px;
  --d18-space-2: 8px;
  --d18-space-3: 12px;
  --d18-space-4: 16px;
  --d18-space-6: 24px;
  --d18-space-8: 32px;
  --d18-space-12: 48px;

  /* Touch targets */
  --d18-target: 44px;
  --d18-target-touchline: 56px;

  /* Type. Fonts are placeholders until Ryan sends the brand kit (DL-OPEN-2); they name the
     font the app already loads (Roboto) so new components match MudBlazor text today. */
  --d18-font-display: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --d18-font-body: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --d18-font-numeric: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --d18-bib: clamp(2.5rem, 2rem + 3vw, 4rem);
  --d18-score: 1.5rem;

  /* Motion: short, and only to explain (DESIGN-SYSTEM 6.7) */
  --d18-motion-fast: 120ms;
  --d18-motion-base: 200ms;
}

:root.d18-field {
  color-scheme: light;

  /* Color — field mode (high-contrast light). Unlisted tokens are the same as dark. */
  --d18-bg: #FFFFFF;
  --d18-surface: #F2F4F3;             /* Chalk */
  --d18-surface-raised: #FFFFFF;      /* paired with --d18-line-strong edge */
  --d18-text: #000000;                /* 21.00 on bg */
  --d18-text-muted: #4A524E;          /* 8.05 on bg; deliberately high, sun eats contrast */
  --d18-text-disabled: #6B726E;       /* 4.93 on bg */
  --d18-action: #2A512A;              /* Dark Turf, 9.10 on bg */
  --d18-on-action: #FFFFFF;           /* 9.10 on action */
  --d18-line: #D5DAD7;                /* decorative only */
  --d18-line-strong: #595F5C;         /* 6.53 on bg */
  --d18-pitch-line: #2A512A;          /* 9.10 on bg */
  --d18-focus: #000000;               /* 21.00 on bg */
  --d18-success: #1E6B34;             /* 6.55 on bg */
  --d18-warning: #8A5A00;             /* 5.93 on bg */
  --d18-error: #B00020;               /* 7.33 on bg */
  --d18-info: #0B4F8A;                /* 8.40 on bg */
  --d18-on-status: #FFFFFF;           /* >= 5.93 on a status fill */

  /* Field mode is more than a palette (DESIGN-SYSTEM 4): thicker focus, one step larger body.
     2 px control borders need selectors into MudBlazor's input DOM, which DL-11 rules out;
     they wait for the D18 input components. */
  --d18-focus-width: 3px;
  --d18-body: clamp(1.0625rem, 1rem + 0.35vw, 1.15rem);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html,
body {
  background-color: var(--d18-bg);
  color: var(--d18-text);
}

/* Visible keyboard focus everywhere it matters (WCAG 2.4.7 / 2.4.11). The ring sits outside the
   control (offset), so it is measured against the page, not the button fill. */
.mud-icon-button:focus-visible,
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-chip:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: var(--d18-focus-width) solid var(--d18-focus);
  outline-offset: 2px;
}

/* On the black chrome the ring follows the icon color (white), in both modes: field mode's
   black ring would vanish on black (DL-07). */
.mud-appbar :focus-visible,
.d18-splash :focus-visible {
  outline-color: currentColor;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */

/* Drawer: a ruled edge instead of a shadow (DL-06). Dark drawer and page share Charcoal. */
.d18-drawer {
  border-right: 1px solid var(--d18-line);
}

/* Navigation rows are full 44 px targets. */
.mud-nav-link {
  min-height: var(--d18-target);
}

/* DEVELOPMENT / environment banner. Was black on #E65100 (UIF-001); now the warning token pair:
   Charcoal on Amber 11.25:1 (dark), white on #8A5A00 5.93:1 (field). */
.d18-env-banner {
  background-color: var(--d18-warning);
  color: var(--d18-on-status);
  font-weight: 900;
  text-align: center;
  padding: 5px 0;
  letter-spacing: 4px;
  font-size: 0.8rem;
}

/* Field mode toggle (drawer). The visible On/Off word mirrors aria-pressed. */
.d18-field-toggle .d18-toggle-state {
  margin-left: auto;
  padding-left: var(--d18-space-2);
  color: var(--d18-text-muted);
  font-weight: 500;
}

/* Muted text that doesn't go through a MudBlazor Color (e.g. the page header subtitle). */
.d18-text-muted {
  color: var(--d18-text-muted);
}

/* Boot splash (index.html). Sits on the black chrome in both modes, like the app bar. */
.d18-splash {
  position: fixed;
  inset: 0;
  background-color: var(--d18-chrome);
  color: var(--d18-on-chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .d18-splash { transition: none; }
}