/* ============================================================
   Moola design tokens. reverse-engineered from the live
   brand site (moola-blog-v1.vercel.app). Values are verbatim.
   ============================================================ */
:root {
  /* ── Base surfaces ── */
  --bg:          #06061a;   /* page base */
  --bg-deep:     #04040f;
  --bg-elevated: #0f0824;   /* card base (used at ~65% alpha) */
  --bg-violet:   #140c32;
  --bg-violet-2: #280f50;

  /* ── Brand: electric violet + hot pink (co-primary) ── */
  --violet:      #7b2fff;
  --violet-deep: #6200ee;
  --pink:        #ff5c93;
  --accent:      #7b2fff;
  --accent-2:    #ff5c93;

  /* ── Finance green ── */
  --green:       #34d399;
  --green-deep:  #00b878;

  /* ── Signature gradients (verbatim from site) ── */
  --grad-brand:   linear-gradient(135deg, #7b2fff, #ff5c93);
  --grad-brand-r: linear-gradient(90deg, #7b2fff, #ff5c93);
  --grad-brand-3: linear-gradient(135deg, #6200ee, #7b2fff, #ff5c93);
  --grad-green:   linear-gradient(135deg, #34d399, #00b878);
  --grad-line:    linear-gradient(90deg, transparent, rgba(123,47,255,.4) 30%, rgba(255,92,147,.4) 70%, transparent);
  --grad-sheen:   linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);

  /* glass tile fill (verbatim: #140c32b3 -> #280f5066) */
  --glass-tile:  linear-gradient(160deg, rgba(20,12,50,0.70), rgba(40,15,80,0.40));
  --glass-card:  rgba(15,8,36,0.65);   /* #0f0824a6 */
  --glass-pill:  rgba(6,6,26,0.70);    /* #06061ab3 */
  --glass-nav:   rgba(6,6,26,0.72);

  /* ── The signature card glow (verbatim) ── */
  --shadow-card: 0 40px 100px -20px rgba(98,0,238,0.45), 0 15px 50px -10px rgba(255,92,147,0.28), inset 0 1px rgba(255,255,255,0.08);
  --shadow-soft: 0 30px 70px -30px rgba(98,0,238,0.40), inset 0 1px rgba(255,255,255,0.06);

  /* ── Scene halos (hero/page backdrop, verbatim placement) ── */
  --halo:
    radial-gradient(circle at 50% 50%, rgba(255,92,147,.32) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(123,47,255,.36) 0%, transparent 70%);
  --mesh:
    radial-gradient(38% 44% at 22% 16%, rgba(123,47,255,.30) 0%, transparent 60%),
    radial-gradient(40% 44% at 80% 12%, rgba(255,92,147,.22) 0%, transparent 60%),
    radial-gradient(50% 50% at 50% 88%, rgba(98,0,238,.22) 0%, transparent 70%),
    var(--bg);

  /* ── Semantic ── */
  --warning: #fbbf24; --danger: #ef4444; --info: #60a5fa;

  /* ── Text on dark ── */
  --text-1: #ffffff;
  --text-2: rgba(255,255,255,0.80);
  --text-3: rgba(255,255,255,0.55);
  --text-4: rgba(255,255,255,0.30);

  /* ── Borders (verbatim alpha steps) ── */
  --border-subtle: rgba(255,255,255,0.07);
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.12);
  --border-hover:  rgba(255,255,255,0.18);
  --border-violet: rgba(123,47,255,0.40);

  /* ── Glows ── */
  --glow-violet: rgba(123,47,255,0.40);
  --glow-pink:   rgba(255,92,147,0.35);
  --glow-green:  rgba(52,211,153,0.30);

  /* ── Fonts (verbatim: Inter body, Satoshi headings) ── */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:    var(--font-body);     /* legacy alias */
  --font-display: var(--font-heading);  /* legacy alias */

  /* ── Tracking ── */
  --tracking-heading: -0.035em;
  --tracking-tight:   -0.045em;
  --tracking-section: 0.18em;

  /* ── Radii (verbatim: 16 tiles, 22, 28 cards, 999 pills) ── */
  --radius-sm:  12px;
  --radius-md:  14px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ── Spacing ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:64px; --s10:96px;

  /* ── Blur ── */
  --blur-sm:14px; --blur:20px; --blur-lg:40px;

  /* ── Transitions ── */
  --t-fast:   0.15s ease;
  --t:        0.22s ease;
  --t-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --content:      720px;
  --content-wide: 1160px;
  --nav-h: 68px;

  /* ── Legacy aliases ── */
  --accent-bright: #a78bfa;
  --accent-pink:   var(--pink);
  --brand:         var(--violet);
  --teal:          var(--green-deep);
  --glass:          var(--glass-card);
  --glass-2:        var(--glass-tile);
  --glass-hi:       rgba(40,15,80,0.40);
  --glass-dark:     var(--glass-card);
  --glass-hover:    var(--glass-tile);
  --glass-medium:   var(--glass-tile);
  --glass-light:    var(--glass-tile);
  --glass-elevated: var(--bg-violet);
  --border-active:  var(--border-violet);
  --gradient-cta:   var(--grad-brand);
  --glow-purple:    var(--glow-violet);
  --glow-cta:       var(--glow-violet);
  --mesh-gradient:  var(--mesh);
}