/* Ketchum IT — Design Tokens */
:root {
  /* Core palette */
  --ink: #010000;
  --ink-soft: #0d0d0e;
  --paper: #fefefe;
  --paper-soft: #f5f4f1;

  /* Glacier teal scale (replaces the previous navy summit) */
  --summit-50:  #ecfafd;
  --summit-100: #c5eef5;
  --summit-200: #88d8e6;
  --summit-300: #45b8cd;
  --summit-400: #1995af;
  --summit-500: #0e7490;  /* brand */
  --summit-600: #0a5d75;
  --summit-700: #084a5e;
  --summit-800: #073847;
  --summit-900: #052631;

  /* Beacon yellow scale (from #feb402) */
  --beacon-50:  #fff8e1;
  --beacon-100: #ffeaa3;
  --beacon-200: #ffd866;
  --beacon-300: #ffc62a;
  --beacon-400: #feb402;  /* brand */
  --beacon-500: #d99700;
  --beacon-600: #a87600;
  --beacon-700: #785400;

  /* Supporting accents */
  --pine: #b85c2e;          /* burnt sienna — warm earth tone, sunset-on-peaks */
  --pine-soft: #d68457;
  --stone: #a89f8e;         /* warm neutral — softens the high-contrast core */
  --stone-soft: #d9d3c5;
  --kraft: #ebe3d2;         /* paper-warm — for analog / printed surfaces */

  /* Semantic */
  --success: #2f7d4f;
  --warning: var(--beacon-400);
  --danger:  #b3361f;
  --info:    var(--summit-500);

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radius / shadow */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(2, 19, 33, 0.06), 0 1px 1px rgba(2, 19, 33, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(2, 19, 33, 0.18), 0 2px 6px rgba(2, 19, 33, 0.06);
  --shadow-lg: 0 24px 60px -20px rgba(2, 19, 33, 0.28), 0 6px 14px rgba(2, 19, 33, 0.08);
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--ink); }

/* Common card chrome */
.brand-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid #e6e3dd;
  padding: 48px;
  font-family: var(--font-body);
  color: var(--ink);
}

.brand-card.dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--summit-800);
}

.brand-card.summit {
  background: var(--summit-500);
  color: var(--paper);
  border-color: var(--summit-700);
}

.brand-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--summit-500);
}

.brand-card.dark h2,
.brand-card.summit h2 { color: var(--beacon-400); }

.brand-card .lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  text-wrap: balance;
}

.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6b6b; font-weight: 600; }