/* ============================================
   HORTIHUB — DESIGN TOKENS (theme)
   Source of truth for colors, spacing, type, radii, shadows, easing.
   Load this BEFORE any other stylesheet that references --vars.
   ============================================ */

:root {
  /* ---- BACKGROUNDS / SURFACES ---- */
  --bg-deep:       #0d1117;
  --bg-card:       #161d2c;
  --bg-card-hover: #1e2a3d;
  --surface:       #1e2538;
  --surface-elev:  #141824;   /* modals, overlays */

  /* ---- HEADER GRADIENT (forest) ---- */
  --header-from:   #0f2318;
  --header-to:     #1a3a25;
  --auth-from:     #1a3a1f;
  --auth-mid:      #2c5530;
  --auth-to:       #4a7c59;

  /* ---- BORDERS ---- */
  --border:        rgba(255, 255, 255, 0.09);
  --border-hover:  rgba(255, 255, 255, 0.16);
  --border-accent: rgba(74, 222, 128, 0.30);

  /* ---- TEXT ---- */
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;

  /* ---- ACCENT (signature brand green) ---- */
  --accent:          #4ade80;
  --accent-mid:      #22c55e;
  --accent-dark:     #16a34a;
  --accent-glow:     rgba(74, 222, 128, 0.15);
  --accent-tint-04:  rgba(74, 222, 128, 0.04);
  --accent-tint-06:  rgba(74, 222, 128, 0.06);
  --accent-tint-08:  rgba(74, 222, 128, 0.08);
  --accent-tint-10:  rgba(74, 222, 128, 0.10);
  --accent-tint-12:  rgba(74, 222, 128, 0.12);

  /* ---- SECONDARY ACCENTS ---- */
  --cyan: #22d3ee;
  --blue: #60a5fa;

  /* ---- SEMANTIC ---- */
  --danger:         #f87171;
  --danger-bg:      #2d0f0f;
  --danger-border:  #7f1d1d;
  --warning:        #fbbf24;
  --warning-bg:     #2d1f0a;
  --warning-border: #78350f;
  --success:        #4ade80;
  --success-bg:     #0a2d14;
  --success-border: #14532d;

  /* ---- RADII ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 100px;

  /* ---- SHADOWS / ELEVATION ---- */
  --shadow-sm:     0 2px 20px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 20px 50px rgba(0, 0, 0, 0.30);
  --shadow-xl:     0 40px 80px rgba(0, 0, 0, 0.45);
  --shadow-modal:  0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-glow:   0 0 20px var(--accent-glow);
  --shadow-glow-lg:0 4px 28px var(--accent-glow);

  /* ---- SPACING SCALE (8px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- FONT FAMILIES ---- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Space Grotesk', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ---- TYPE SCALE ---- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;
  --fs-display: clamp(2.8rem, 6.5vw, 5rem);

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  --tracking-mono-label: 0.12em;
  --tracking-uppercase:  0.06em;

  /* ---- TRANSITIONS / EASING ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: ease;
  --dur-fast:    0.15s;
  --dur-base:    0.20s;
  --dur-slow:    0.35s;
}