/* Primer theme — retunes the Classical design system for the UE graphics
   primer: a cool technical palette on IBM Plex, instead of the gold/serif
   default. Only tokens and base element rules live here; component classes
   are in primer.css. */

:root {
  --color-bg: #eef1f6;
  --color-surface: #ffffff;
  --color-text: #1a2233;
  --color-accent: #3b6fe0;
  --color-accent-2: #3b6fe0;
  --color-divider: rgba(26, 34, 51, .12);

  /* "hot" = over budget / costs that spike. Used for warnings and the 16.7ms line. */
  --hot: #ef5a3c;
  --hot-tint: #fdeae4;

  --color-neutral-100: #f6f8fb;
  --color-neutral-200: #e9edf3;
  --color-neutral-300: #d6dde8;
  --color-neutral-400: #aab4c5;
  --color-neutral-500: #7d899c;
  --color-neutral-600: #5b6678;
  --color-neutral-700: #414b5c;
  --color-neutral-800: #2b3446;
  --color-neutral-900: #1a2233;

  --color-accent-100: #eaf1fe;
  --color-accent-200: #cfe0fd;
  --color-accent-300: #a7c4fa;
  --color-accent-400: #7aa2f2;
  --color-accent-500: #4f7ee8;
  --color-accent-600: #2f61d6;
  --color-accent-700: #2450b0;
  --color-accent-800: #1d3f88;
  --color-accent-900: #182f60;

  --font-heading: "IBM Plex Sans JP", system-ui, sans-serif;
  --font-body: "IBM Plex Sans JP", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(26, 34, 51, .08);
  --shadow-md: 0 4px 14px rgba(26, 34, 51, .10);
  --shadow-lg: 0 14px 36px rgba(26, 34, 51, .16);
}

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

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }
h1 { letter-spacing: -.025em; }

/* Tabular figures — every number that can change while you drag a slider sits
   in this class so the layout does not jitter. */
.tnum {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent); }

input[type=range] { accent-color: var(--color-accent); width: 100%; }
canvas { display: block; }