/* Design tokens — Meta Ads Masterclass */
:root {
  /* surfaces */
  --bg: #0e1116;
  --bg-raised: #151a21;
  --bg-elevated: #1b212b;
  --bg-hover: #222a36;
  --border: #2a3340;
  --border-soft: #1f2630;

  /* text */
  --text: #e6e9ee;
  --text-dim: #9aa5b4;
  --text-faint: #5f6b7c;

  /* accents */
  --accent: #e8a33d;        /* warm copper-amber: actions, highlights */
  --accent-soft: rgba(232, 163, 61, 0.14);
  --accent-text: #f0b558;
  --data: #5cc8de;          /* cool cyan: data, diagrams, links */
  --data-soft: rgba(92, 200, 222, 0.12);
  --good: #5dbb7a;
  --good-soft: rgba(93, 187, 122, 0.13);
  --warn: #e0b13e;
  --warn-soft: rgba(224, 177, 62, 0.12);
  --bad: #e06c5c;
  --bad-soft: rgba(224, 108, 92, 0.12);

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  /* shape */
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);

  /* layout */
  --sidebar-w: 272px;
  --measure: 70ch;
}