/* BGx Design System Tokens — compiled from official DS
   Colors · Typography · Spacing · Effects
   ======================================================== */

/* Font loaded via <link> in HTML for non-blocking render */

:root {
  /* ── Carbon neutrals (dark-first) ──────────────────────── */
  --carbon-950: #0a0e16;
  --carbon-900: #0e131d;
  --carbon-850: #121826;
  --carbon-800: #161d2b;
  --carbon-700: #1e2636;
  --carbon-600: #2a3446;
  --carbon-500: #3a4658;
  --carbon-400: #5b6779;
  --carbon-300: #8791a3;
  --carbon-200: #b4bcc9;
  --carbon-100: #dde2ea;
  --carbon-50:  #eef1f5;

  /* ── Brand primary: BlueGas Blue (cobalt) ──────────────── */
  --blue-200: #a8c1ff;
  --blue-300: #7c9fff;
  --blue-400: #5b84ff;
  --blue-500: #3b6cf6;
  --blue-600: #2b5cff;
  --blue-700: #1f47d6;
  --blue-800: #1a3aad;

  /* ── Polaris indigo ────────────────────────────────────── */
  --indigo-400: #7c74f2;
  --indigo-500: #5b52e6;
  --indigo-600: #4f46e5;
  --indigo-700: #3f37c4;

  /* ── Emerald ───────────────────────────────────────────── */
  --green-400: #34d99a;
  --green-500: #17b26a;
  --green-600: #12965a;

  /* ── Status & accents ──────────────────────────────────── */
  --amber-400: #fbbf5a;
  --amber-500: #f79009;
  --red-400:   #f97066;
  --red-500:   #f04438;
  --cyan-500:  #06b6d4;
  --violet-500:#8b5cf6;

  /* ── Semantic aliases (dark) ───────────────────────────── */
  --bg:         var(--carbon-950);
  --bg2:        var(--carbon-900);
  --surface:    var(--carbon-850);
  --card:       var(--carbon-850);
  --elev:       var(--carbon-800);
  --line:       var(--carbon-700);
  --line-soft:  var(--carbon-800);

  --text:       #e7ecf3;
  --text-2:     var(--carbon-300);
  --muted:      var(--carbon-400);

  --brand:      var(--blue-600);
  --brand-text: var(--blue-400);
  --accent:     var(--green-500);
  --positive:   var(--green-500);
  --negative:   var(--red-500);

  --indigo:     var(--indigo-600);
  --indigo-350: #8b83f5;
  --cobalt:     var(--blue-500);
  --cobalt-300: #7ea0ff;
  --emerald:    var(--green-500);
  --emerald-300:var(--green-400);
  --violet:     var(--violet-500);

  /* ── Gradients ─────────────────────────────────────────── */
  --energy:     linear-gradient(90deg, #2b5cff, #8b5cf6, #17b26a);
  --grad-polaris: linear-gradient(135deg, var(--indigo-600), #6b6bf0, var(--blue-400));
  --grad-aurora:  linear-gradient(120deg, #2b5cff, #6b52e6 42%, #17b26a);
  --grad-veil:    radial-gradient(120% 120% at 50% -20%, rgba(43,92,255,.10), transparent 60%);
  --glow-brand:   0 8px 28px rgba(43,92,255,.35);

  /* ── Typography ────────────────────────────────────────── */
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Spacing (4px grid) ────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 140px;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-full: 999px;

  /* ── Motion ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ── Layout ────────────────────────────────────────────── */
  --maxw: 1180px;
}