/* EMIM authoring UI — token layer.
 *
 * The single source of truth for colour, spacing, radius, elevation and type in
 * the authoring application. Every authoring rule reads from here; a raw hex in
 * authoring CSS is a bug (see docs/ui/COMPONENTS.md, enforced by
 * tests/unit/test_ui_component_audit.py).
 *
 * Not for the participant runtime or the public site: those keep their own
 * per-campaign visual identity (--game-*, runtime.css, campaign.css,
 * landing.css) and must not inherit authoring chrome.
 *
 * Colours come from the public site (static/css/landing.css) so the product and
 * the marketing site read as one brand: the site's blue #2268c8 (5.41:1 on
 * white, and for white text on the blue) and its navy #152e58 (13.43:1).
 *
 * Two deliberate departures from the site. The authoring ground stays a cool
 * neutral rather than the site's cream: dense tool screens are mostly white
 * cards, and a warm ground muddies them. And teal stays the "verified" colour,
 * darkened from the logo's #279f91 to pass 4.5:1 — that is a functional signal,
 * not a brand colour.
 */

:root {
  /* Text */
  --emim-ink: #152e58;        /* headings, primary text (13.4:1 on surface) */
  --emim-ink-2: #334866;      /* labels, secondary text (9.2:1) */
  --emim-muted: #5b7085;      /* captions, meta (4.9:1) */
  --emim-disabled: #93a5b8;   /* non-text only: icons, rules, placeholder marks */

  /* Action */
  --emim-primary: #2268c8;
  --emim-primary-hover: #1a54a6;
  --emim-primary-tint: #eff7ff;
  --emim-on-primary: #ffffff;

  /* Verified / approved */
  --emim-accent: #157f72;
  --emim-accent-hover: #106257;
  --emim-accent-tint: #e6f4f1;
  --emim-on-accent: #ffffff;

  /* Needs attention */
  --emim-attention: #8a5a00;
  --emim-attention-tint: #fdf3e0;
  --emim-attention-line: #f2e3c4;

  /* Destructive */
  --emim-danger: #a32020;
  --emim-danger-hover: #861919;
  --emim-danger-tint: #fceded;

  /* Surfaces */
  --emim-ground: #f4f6f9;
  --emim-surface: #ffffff;
  --emim-surface-quiet: #fcfdfe;
  --emim-line: #dde4ec;
  --emim-line-strong: #c6d2de;

  /* Radius: three steps, each tied to a purpose. */
  --emim-radius-control: 8px;
  --emim-radius-card: 12px;
  --emim-radius-pill: 999px;

  /* Elevation: one level. Depth is not a hierarchy device here; spacing is. */
  --emim-shadow-card: 0 1px 2px rgba(13, 27, 42, 0.05);
  --emim-shadow-overlay: 0 12px 32px rgba(13, 27, 42, 0.14);

  /* Spacing */
  --emim-space-1: 4px;
  --emim-space-2: 8px;
  --emim-space-3: 12px;
  --emim-space-4: 16px;
  --emim-space-5: 20px;
  --emim-space-6: 24px;
  --emim-space-7: 32px;
  --emim-space-8: 48px;

  /* Type. One family. Numerals align through font-variant-numeric rather than a
   * second monospace face, so tables line up without a typeface switch. */
  --emim-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --emim-text-label: 13px;    /* field labels, sentence case */
  --emim-text-small: 13px;    /* captions, meta */
  --emim-text-ui: 14px;       /* buttons, table cells, navigation */
  --emim-text-body: 15px;     /* inputs, running text */
  --emim-text-section: 17px;  /* card headings */
  --emim-text-page: 24px;     /* page titles */
  --emim-leading-tight: 1.3;
  --emim-leading-body: 1.55;

  /* Controls: 44px primary targets, 36px for secondary and icon controls. */
  --emim-control-height: 44px;
  --emim-control-height-compact: 36px;

  --emim-focus-ring: 2px solid var(--emim-primary);
  --emim-focus-offset: 2px;

  /* Motion. Three durations, two easings. Anything longer than 240ms in an
   * authoring tool reads as waiting rather than responsiveness. */
  --emim-motion-instant: 90ms;    /* state changes: hover, selection, chips */
  --emim-motion-quick: 160ms;     /* content swaps, disclosures */
  --emim-motion-panel: 220ms;     /* drawers and sheets entering or leaving */
  --emim-ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --emim-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --emim-transition: var(--emim-motion-instant) var(--emim-ease-out);
}

/* Reduced motion removes movement, not feedback: durations collapse so state
 * changes are instant, and the components below drop transforms entirely. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --emim-motion-instant: 0ms;
    --emim-motion-quick: 0ms;
    --emim-motion-panel: 0ms;
    --emim-transition: 0ms;
  }
}