/* ============================================
   GrowMark — Design System Tokens (v2 — 21st.dev inspired)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Colors ─────────────────────────────── */
  --clr-bg:            #050505;
  --clr-bg-alt:        #080808;
  --clr-surface:       #0a0a0a;
  --clr-surface-2:     #0e0e0e;
  --clr-surface-3:     #141414;
  --clr-surface-hover: #1a1a1a;
  --clr-surface-glass: rgba(10, 10, 10, 0.6);

  --clr-border:        rgba(255, 255, 255, 0.06);
  --clr-border-2:      rgba(255, 255, 255, 0.08);
  --clr-border-3:      rgba(255, 255, 255, 0.12);
  --clr-border-glow:   rgba(0, 200, 83, 0.15);

  --clr-primary:       #00c853;
  --clr-primary-light: #00e676;
  --clr-primary-dark:  #009624;
  --clr-primary-glow:  rgba(0, 200, 83, 0.15);
  --clr-primary-10:    rgba(0, 200, 83, 0.10);
  --clr-primary-20:    rgba(0, 200, 83, 0.20);
  --clr-primary-30:    rgba(0, 200, 83, 0.30);

  --clr-accent:        #7c3aed;
  --clr-accent-glow:   rgba(124, 58, 237, 0.15);

  --clr-text:          #f5f5f5;
  --clr-text-secondary:#8a8a8a;
  --clr-text-muted:    #555555;
  --clr-text-dark:     #333333;

  /* ── Gradients ─────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #00c853 0%, #00e676 50%, #69f0ae 100%);
  --gradient-glow:     radial-gradient(ellipse at center, rgba(0,200,83,0.15) 0%, transparent 70%);
  --gradient-hero:     radial-gradient(ellipse at 30% 50%, rgba(0,200,83,0.08) 0%, transparent 50%);
  --gradient-card:     linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  --gradient-dark:     linear-gradient(180deg, #050505 0%, #080808 100%);
  --gradient-spotlight:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,200,83,0.06), transparent 40%);
  --gradient-mesh:     radial-gradient(at 40% 20%, rgba(0,200,83,0.08) 0px, transparent 50%),
                       radial-gradient(at 80% 80%, rgba(124,58,237,0.05) 0px, transparent 50%),
                       radial-gradient(at 0% 100%, rgba(0,200,83,0.04) 0px, transparent 50%);
  --gradient-border:   linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  --gradient-text-shine: linear-gradient(90deg, #00c853, #69f0ae, #00e676, #00c853);

  /* ── Typography ────────────────────────── */
  --font-primary:      'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  --fs-display:        clamp(3.2rem, 8vw, 6rem);
  --fs-h1:             clamp(2.4rem, 5vw, 4rem);
  --fs-h2:             clamp(1.8rem, 4vw, 3rem);
  --fs-h3:             clamp(1.2rem, 2vw, 1.5rem);
  --fs-h4:             1.125rem;
  --fs-body:           1rem;
  --fs-body-sm:        0.9375rem;
  --fs-caption:        0.8125rem;
  --fs-small:          0.75rem;
  --fs-micro:          0.6875rem;

  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.5;
  --lh-relaxed:        1.7;

  --ls-tight:          -0.03em;
  --ls-normal:         0;
  --ls-wide:           0.05em;
  --ls-wider:          0.12em;
  --ls-widest:         0.2em;

  /* ── Spacing ───────────────────────────── */
  --sp-xs:             0.25rem;
  --sp-sm:             0.5rem;
  --sp-md:             1rem;
  --sp-lg:             1.5rem;
  --sp-xl:             2rem;
  --sp-2xl:            3rem;
  --sp-3xl:            4rem;
  --sp-4xl:            6rem;
  --sp-5xl:            8rem;

  --container-max:     1240px;
  --container-sm:      960px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Radius ────────────────────────────── */
  --radius-sm:         8px;
  --radius-md:         12px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-2xl:        32px;
  --radius-full:       9999px;

  /* ── Shadows ───────────────────────────── */
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:         0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:         0 8px 48px rgba(0,0,0,0.6);
  --shadow-glow:       0 0 30px rgba(0,200,83,0.12), 0 0 60px rgba(0,200,83,0.06);
  --shadow-glow-lg:    0 0 40px rgba(0,200,83,0.2), 0 0 80px rgba(0,200,83,0.1);
  --shadow-glow-intense: 0 0 20px rgba(0,200,83,0.3), 0 0 60px rgba(0,200,83,0.15), 0 0 120px rgba(0,200,83,0.05);
  --shadow-card:       0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-card-hover: 0 8px 48px rgba(0,0,0,0.5), 0 0 40px rgba(0,200,83,0.08);
  --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3);

  /* ── Transitions ───────────────────────── */
  --ease-default:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --ease-in:           cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:       cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --duration-instant:  100ms;
  --duration-fast:     150ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   800ms;
  --duration-slowest:  1200ms;

  /* ── Z-index ───────────────────────────── */
  --z-behind:          -1;
  --z-normal:          1;
  --z-above:           10;
  --z-nav:             100;
  --z-overlay:         500;
  --z-modal:           1000;

  /* ── Mouse tracking (set via JS) ─────── */
  --mouse-x: 50%;
  --mouse-y: 50%;
}