/* HeyData — design tokens. Confident ink: warm, restrained, one accent. */

:root {
  /* ---- ground — warm ink, not cold navy ---- */
  --bg-deep:   #0e0c09;
  --bg-panel:  #17140f;
  --bg-elev:   #1e1a13;
  --line:      #2b271e;
  --line-hot:  #423b2b;

  /* ---- ink — warm off-white, not clinical white ---- */
  --ink:       #f4efe3;
  --ink-dim:   #b3aa96;
  --ink-faint: #766c58;

  /* ---- one accent. Used everywhere UI needs to speak. ---- */
  --accent:      #f0a63d;
  --accent-ink:  #241a08;   /* text on top of accent fills */
  --amber:       var(--accent);
  --green:       var(--accent);
  --magenta:     var(--accent);
  --cyan:        var(--accent);
  --red:         #e2604f;

  --accent-grad: linear-gradient(90deg, #f6b957, var(--accent) 65%, #e08f2a);

  /* ---- chart series — sophisticated, muted, not neon ---- */
  --series-1: #e8974a;   /* amber   — primary */
  --series-2: #6f8f8a;   /* dust teal */
  --series-3: #a97b5c;   /* terracotta */
  --series-4: #8f8768;   /* olive grey */

  /* ---- surfaces ---- */
  --glass-bg:      var(--bg-panel);
  --glass-bg-soft: color-mix(in srgb, var(--bg-panel) 78%, transparent);
  --glass-border:  var(--line);
  --glass-blur:    14px;

  /* ---- shadow: soft depth, not glow ---- */
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -18px rgba(0,0,0,.7);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 28px -10px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-blue: var(--glow-accent);
  --glow-purple: var(--glow-accent);
  --glow-pink: var(--glow-accent);
  --glow-teal: var(--glow-accent);

  /* ---- spacing ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  /* ---- radius: generous, confident ---- */
  --radius-sm:   14px;
  --radius-card: 28px;
  --radius-pill: 999px;

  /* ---- fonts ---- */
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Consolas', monospace;

  /* ---- type scale ---- */
  --fs-h1:     clamp(38px, 5.2vw, 76px);
  --fs-h2:     clamp(26px, 3vw, 44px);
  --fs-h3:     19px;
  --fs-lead:   19px;
  --fs-body:   16px;
  --fs-small:  15px;
  --fs-label:  12px;
  --fs-number: clamp(18px, 2vw, 28px);

  /* ---- layout ---- */
  --container: 1360px;
  --gutter: 24px;

  /* ---- motion ---- */
  --ease-out:       cubic-bezier(.22, .61, .36, 1);
  --ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
  --dur-micro: 140ms;
  --dur-enter: 420ms;
  --dur-section: 800ms;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}