/**
 * BANCANNABIS DESIGN TOKENS
 * Version: 2.0
 * Stack: Vanilla CSS
 * Description: Design system variables - "Crypto Dark Professional"
 */

:root {
  /* ========================================
     COLORS - Background
     ======================================== */
  --color-bg-primary:    #0D0F0D;  /* Almost black with green tint */
  --color-bg-secondary:  #1A1D1A;  /* Fertile earth */
  --color-bg-tertiary:   #252825;  /* Cards, elevated surfaces */

  /* ========================================
     COLORS - Text
     ======================================== */
  --color-text-primary:   #E8EAE3;  /* Greenish white */
  --color-text-secondary: #A8AAA3;  /* Light gray */
  --color-text-muted:     #6B6D68;  /* Dark gray */

  /* ========================================
     COLORS - Brand (Green - Cannabis/Growth)
     ======================================== */
  --color-green-50:   #E8FCF1;
  --color-green-100:  #C3F8D9;
  --color-green-200:  #8EF2B7;
  --color-green-300:  #5AEC95;
  --color-green-400:  #50F47A;  /* PRIMARY - CTAs, Success */
  --color-green-500:  #3ECF67;
  --color-green-600:  #2CAA54;
  --color-green-700:  #1A8541;
  --color-green-800:  #12602E;
  --color-green-900:  #0A3B1B;

  /* ========================================
     COLORS - Accent Blue (Tech/Trust)
     ======================================== */
  --color-blue-400:   #5B8DEF;
  --color-blue-500:   #3E63DD;  /* PRIMARY - Links, Info */
  --color-blue-600:   #2E4DB8;

  /* ========================================
     COLORS - Accent Purple (Premium/Innovation)
     ======================================== */
  --color-purple-400: #A78BFA;
  --color-purple-500: #8B5CF6;
  --color-purple-600: #7C3AED;

  /* ========================================
     COLORS - Status/Feedback
     ======================================== */
  --color-success: #50F47A;
  --color-warning: #FBBF24;
  --color-error:   #EF4444;
  --color-info:    #3E63DD;

  /* ========================================
     COLORS - Borders
     ======================================== */
  --color-border-subtle:  rgba(255, 255, 255, 0.1);
  --color-border-default: rgba(80, 244, 122, 0.2);
  --color-border-strong:  rgba(80, 244, 122, 0.4);

  /* ========================================
     TYPOGRAPHY - Font Families
     ======================================== */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ========================================
     TYPOGRAPHY - Font Sizes (Modular Scale 1.25)
     ======================================== */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px - BASE */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  4rem;      /* 64px */
  --text-7xl:  5rem;      /* 80px */

  /* ========================================
     TYPOGRAPHY - Line Heights
     ======================================== */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  /* ========================================
     TYPOGRAPHY - Font Weights
     ======================================== */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ========================================
     TYPOGRAPHY - Letter Spacing
     ======================================== */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* ========================================
     SPACING (8px base grid)
     ======================================== */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 8px 32px rgba(80, 244, 122, 0.3);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base:    0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-tooltip:  500;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast:   150ms;
  --transition-base:   250ms;
  --transition-slow:   350ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     BREAKPOINTS (for media queries in JS)
     ======================================== */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
}