/*
 * ezPlates product design tokens (issue #27).
 *
 * The 2026 brand palette lives in style.css; this file layers the *semantic*
 * product tokens on top — typography, spacing, radius, elevation, and the
 * status/badge token set the Brand Guidelines call for (§7 "Digital Product
 * Direction", A-011). Load this BEFORE style.css so components can consume it.
 * See docs/brand.md (§10 asset kit, §11 product design tokens).
 */
:root {
  /* Typography — Aptos Display for headlines, Inter/Aptos for UI/body/data.
     Font files are not bundled; stacks fall back gracefully to system fonts. */
  --font-display: "Aptos Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.2rem;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius & elevation */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 42, 36, 0.06);
  --shadow: 0 2px 10px rgba(31, 42, 36, 0.08);

  /* Semantic status tokens (map onto the palette) */
  --status-success: var(--green);
  --status-success-bg: var(--green-light);
  --status-info: var(--blue);
  --status-info-bg: #e7f0fd;
  --status-warning: var(--amber);
  --status-warning-bg: #fbf1d3;
  --status-danger: var(--red);
  --status-danger-bg: #fbe6e2;
  --status-muted: var(--muted);
  --status-muted-bg: #f1eddf;
}

/* Tabular numerals for data-dense surfaces (counters, tables, reports). */
.tabular-nums,
table td,
.stat .n,
.counter { font-variant-numeric: tabular-nums; }

/* Status badge tokens — reusable across statuses, badges, counters. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
}
.badge--success { color: var(--status-success); background: var(--status-success-bg); }
.badge--info    { color: var(--status-info);    background: var(--status-info-bg); }
.badge--warning { color: var(--status-warning); background: var(--status-warning-bg); }
.badge--danger  { color: var(--status-danger);  background: var(--status-danger-bg); }
.badge--muted   { color: var(--status-muted);   background: var(--status-muted-bg); }
.badge--verified { color: var(--amber); background: #fbf1d3; }