/* Brand tokens — playful data-viz, high-contrast with one bold accent */
:root {
  /* Core palette — deep teal ink on warm paper */
  --ink: #264653;          /* deep teal — primary text & dark surfaces */
  --ink-2: #1F3A45;        /* slightly darker for layered surfaces */
  --ink-3: #345865;        /* hairline borders on dark cards */
  --paper: #FAF7F2;
  --paper-2: #F2EDE4;
  --paper-3: #E8E1D4;
  --rule: #DAD2C2;
  --muted: #6B7B82;
  --muted-2: #9AA8AE;

  /* Bold accent + chart palette */
  --accent: #E76F51;       /* coral — primary bold accent */
  --accent-ink: #264653;
  --c-teal: #2A9D8F;       /* jade */
  --c-sand: #E9C46A;       /* warm sand */
  --c-peach: #F4A261;      /* peach */
  --c-coral: #E76F51;      /* coral (same as accent, semantic alias) */
  /* Back-compat aliases for existing component refs */
  --c-violet: #2A9D8F;
  --c-emerald: #2A9D8F;
  --c-amber: #E9C46A;
  --c-pink: #F4A261;
  --c-cobalt: #264653;

  /* Type */
  --f-display: "Fraunces", "Times New Roman", serif;
  --f-sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing baseline */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Utility classes used across variations */
.mono { font-family: var(--f-mono); }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: transparent;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }