/* base.css — design tokens, reset, typography.
   One accent (emerald) on a cool porcelain canvas. Fonts are loaded by each page's <head>:
   Space Grotesk (display), Inter (body/UI), JetBrains Mono (meta labels, chips, code). */

:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #fcfdfc;
  --rail: #eef1ed;
  --stage: #f1f5f1;
  --surface: #ffffff;
  --chip: #f4f7f4;
  --track: #eaefe9;

  /* ink */
  --ink: #131815;
  --muted: #5b655e;
  --faint: #8a948d;
  --hair: #e4e9e4;

  /* accent */
  --emerald: #0ea968;
  --emerald-deep: #0b8a54;
  --tint: #e7f4ec;
  --tint-border: #cde7d7;
  --bubble: #e8f4ee;
  --bubble-border: #d2e9db;

  /* state */
  --danger: #b42318;
  --danger-tint: #fdecec;
  --danger-border: #f6caca;
  --warn: #b45309;
  --warn-tint: #fdf3e7;

  /* data-viz series (validated pair) */
  --series-aws: #0ea968;
  --series-e2e: #eb6834;

  /* type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape + depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(19, 24, 21, 0.04), 0 8px 24px rgba(19, 24, 21, 0.05);
  --shadow-pop: 0 12px 32px rgba(19, 24, 21, 0.14);
  --shadow-accent: 0 6px 16px rgba(14, 169, 104, 0.3);

  /* layout */
  --rail-width: 64px;

  /* ---- legacy aliases: older page stylesheets still read these names ---- */
  --bg: var(--canvas);
  --content-bg: var(--canvas);
  --surface-strong: var(--tint);
  --primary: var(--emerald);
  --primary-dark: var(--emerald-deep);
  --text: var(--ink);
  --border: var(--tint-border);
  --border-soft: var(--hair);
  --card-shadow: var(--shadow-card);
  --shadow: var(--shadow-pop);
  --navy: var(--canvas);
  --navy-soft: var(--chip);
  --navy-border: var(--hair);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

button, input, select, textarea { font: inherit; }

a { color: var(--emerald-deep); }

.hidden { display: none !important; }

::selection { background: var(--tint-border); }

:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}