/* Shared design tokens for the Materials Tracker — no build step, no
   templating engine here (every page is a self-contained static HTML file
   with its own inline <style>), so this file intentionally holds only
   variables + the one truly cross-page component (.brand-logo), not a
   full component library. Each page keeps its own layout CSS and just
   references these tokens instead of repeating literal hex values. */
:root {
  --brand: #1a56db;        /* FDI blue — unchanged, this is the real brand color */
  --brand-dark: #123f9e;   /* deepened from the old #1246b0 for better hover/active contrast */
  --brand-tint: #dbeafe;   /* unchanged — light blue used for tints/dividers */
  --brand-border: #93c5fd; /* unchanged — accent border/dashed-zone color */
  --bg: #f4f6fb;           /* softened from the old saturated #e8f0fe pastel */
  --surface: #ffffff;
  --text: #16233d;         /* slightly deepened from the old #1a3260 */
  --text-muted: #64748b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 10px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, .12);
}

.brand-logo { height: 24px; width: auto; vertical-align: middle; margin-right: 8px; }