/*
 * design-tokens.css — single shared design-token source.
 *
 * Canonical token names ratified in Phase 0 of the design-token migration
 * (see .kiro/DESIGN-TOKEN-MIGRATION.md, TEAM DECISION 2026-09-01). This file
 * replaces the four duplicated per-page :root blocks (--mr-* / --op-* / --mc-*
 * / --pf-*). Values are unchanged from those blocks — only the names are
 * unified.
 *
 * Phase 1 is additive: no page consumes these yet. Phase 2 migrates each token
 * file to reference these names and drops its local prefix block.
 *
 * Load order still matters: pages that add their own <style> overrides must
 * place them AFTER css/app.min.css in <head> (see design-standards.md §3a).
 * This token file may be linked before or after app.min.css since it only
 * declares custom properties (no rulesets that compete with the theme).
 */
:root {
  /* Primary / brand */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-soft: #eff5ff;

  /* Borders */
  --color-border: #e6e9ef;
  --color-border-strong: #d7dce5;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-muted: #f7f8fb;

  /* Text */
  --color-text: #1f2733;
  --color-text-muted: #6b7280;

  /* Semantic / accent */
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warn: #ea8f19;
  --color-purple: #7c4dff;
  --color-folder: #f0b429;

  /* WhiteCoats brand (teal) — used by shared .wc-* components so they match the app's
     login/header/button brand rather than the generic --color-primary blue. */
  --wc-brand: #0fb59b;
  --wc-brand-dark: #0c9a84;
  --wc-brand-soft: #e6f7f3;

  /* Semantic soft-tint surfaces + strong text (status pills, alerts — design-standards §7). */
  --color-danger-soft: #fde8e8;
  --color-danger-strong: #b91c1c;
  --color-success-soft: #dcfce7;
  --color-success-strong: #15803d;
  --color-warn-soft: #fef1e2;
  --color-warn-strong: #b45309;
  --color-info-soft: #e0edff;
  --color-info-strong: #1d4ed8;
  --color-mapped-soft: #ede9fe;
  --color-mapped-strong: #6d28d9;
  --color-pending-soft: #eef1f5;
  --color-pending-strong: #475467;

  /* Radius */
  --radius-md: 10px;
  --radius-sm: 8px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
}
