/* ============================================================
   WEED SAMURAI -- Design Tokens
   Dark, premium, cinematic. Katana steel + jade neon + samurai
   vermillion on near-black. Everything else inherits from here.
   ============================================================ */

:root {
  /* ---- Ink (backgrounds, deepest -> raised) ---- */
  --ink-900: #06070a;   /* deepest void / body base */
  --ink-850: #090b0f;
  --ink-800: #0c0e14;   /* page background */
  --ink-700: #11141c;   /* card surface */
  --ink-600: #171b25;   /* raised surface */
  --ink-550: #1d2230;
  --ink-500: #262c3b;   /* hairline borders */
  --ink-450: #323a4d;

  /* ---- Steel / text ---- */
  --steel-400: #6b7585; /* faint captions */
  --steel-300: #8b94a5; /* muted body */
  --steel-200: #aeb7c6; /* secondary text */
  --steel-100: #cdd5e1; /* body text */
  --mist:      #eef2f8; /* headings / high contrast */

  /* ---- Jade (primary neon -- cannabis + blade glow) ---- */
  --jade-500:  #34f5a3;
  --jade-400:  #5af7b6;
  --jade-600:  #15c47e;
  --jade-700:  #0c9b63;
  --jade-ink:  rgba(52, 245, 163, 0.12);

  /* ---- Vermillion / crimson (samurai rising sun, blood on steel) ---- */
  --verm-500:  #ff4d4d;
  --verm-600:  #e22f3f;
  --crimson:   #c01f33;
  --verm-ink:  rgba(255, 77, 77, 0.10);

  /* ---- Gold (sparing premium accents) ---- */
  --gold-400:  #ecca84;
  --gold-500:  #e0b765;

  /* ---- Glows ---- */
  --glow-jade:  0 0 36px rgba(52, 245, 163, 0.30);
  --glow-jade-soft: 0 0 22px rgba(52, 245, 163, 0.16);
  --glow-verm:  0 0 34px rgba(255, 77, 77, 0.28);
  --shadow-lift: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-card: 0 12px 34px -12px rgba(0, 0, 0, 0.6);

  /* ---- Gradients ---- */
  --grad-jade:   linear-gradient(135deg, var(--jade-400) 0%, var(--jade-600) 100%);
  --grad-blade:  linear-gradient(180deg, #d7deea 0%, #99a3b5 45%, #5c6576 100%);
  --grad-dawn:   linear-gradient(135deg, var(--verm-500) 0%, var(--gold-400) 120%);
  --grad-hero:   radial-gradient(1200px 700px at 70% -10%, rgba(52,245,163,0.10), transparent 60%),
                 radial-gradient(900px 600px at 12% 10%, rgba(255,77,77,0.07), transparent 55%),
                 linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
  --grad-text-jade: linear-gradient(100deg, var(--mist) 0%, var(--jade-400) 60%, var(--jade-600) 100%);

  /* ---- Typography ---- */
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif; /* angular, blade-tech */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif; /* premium / philosophical moments */

  --fs-hero:   clamp(2.8rem, 7vw, 6rem);
  --fs-h1:     clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2:     clamp(1.7rem, 3vw, 2.6rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.08;
  --lh-snug:   1.3;
  --lh-body:   1.7;

  /* ---- Spacing / rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --space-8: 10rem;

  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii / borders ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --border-hair: 1px solid var(--ink-500);
  --border-glow: 1px solid rgba(52, 245, 163, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-blade: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.2s;
  --t-med: 0.45s;
  --t-slow: 0.9s;

  --nav-h: 72px;
}