/* tokens.css - Design system tokens for MVG V2
   Venice Beachy Neobrutalist Design
   WCAG AA compliant, Light + Dark mode
   Source: /home/jolon/Marketvendorguide/src/styles/index.css (design tokens)
   Import this FIRST before components.css */

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

/* ── LIGHT MODE (default) ── */
:root {
  /* Fonts */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', 'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-serif:   Georgia, 'Times New Roman', serif;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;

  /* Page background — overridden by body bgShift animation in components.css */
  --color-page-bg: #f4f0ff;

  /* Border */
  --color-border: #000000;
  --color-border-subtle: #e0e0e0;

  /* Text */
  --color-text-primary:   #0D0D0D;
  --color-text-secondary: #555555;
  --color-text-muted:    #888888;
  --color-text-inverse:   #ffffff;

  /* Nav */
  --color-nav-bg:   #080808;
  --color-nav-text: #ffffff;

  /* Hero gradient headline */
  --color-hero-grad-start: #F5A623;
  --color-hero-grad-mid:   #FF3CAC;
  --color-hero-grad-end:   #7B2FFF;

  /* Buttons */
  --color-btn-primary-bg:   #0D0D0D;
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg:   transparent;
  --color-btn-secondary-text: #0D0D0D;

  /* Category Pills — old site pill types */
  --color-pill-handmade-bg:  #2979FF;  --color-pill-handmade-text:  #ffffff;
  --color-pill-vintage-bg:   #7B2FFF;  --color-pill-vintage-text:   #ffffff;
  --color-pill-night-bg:     #FF3CAC;  --color-pill-night-text:     #ffffff;
  --color-pill-farmers-bg:   #FF6D00; --color-pill-farmers-text:   #ffffff;
  --color-pill-food-bg:      #F5A623; --color-pill-food-text:      #ffffff;
  --color-pill-mixed-bg:     #00BCD4; --color-pill-mixed-text:     #ffffff;

  /* Additional pill types */
  --color-pill-artisan-bg:  #8B5CF6; --color-pill-artisan-text:  #ffffff;
  --color-pill-crafts-bg:   #7B2FFF; --color-pill-crafts-text:   #ffffff;
  --color-pill-flea-bg:     #0D9488; --color-pill-flea-text:     #ffffff;
  --color-pill-antiques-bg: #B45309; --color-pill-antiques-text: #ffffff;
  --color-pill-general-bg:  #2563EB; --color-pill-general-text:  #ffffff;

  /* Status Badges */
  --color-badge-active-bg:   #FF6D00;  --color-badge-active-text:   #ffffff;
  --color-badge-check-bg:    #F5A623;  --color-badge-check-text:    #ffffff;
  --color-badge-seasonal-bg: #2979FF;  --color-badge-seasonal-text: #ffffff;
  --color-badge-closed-bg:   #FF3CAC;  --color-badge-closed-text:   #ffffff;

  /* Stat cells */
  --color-stat-bg: #f9f9f9;

  /* Focus ring */
  --color-focus: #7c3aed;

  /* Border radius */
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 6px;

  /* Border width — neobrutalist hard edges */
  --border-width: 2.5px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 62px;

  /* Shadows — NONE in neobrutalist design */
  /* Do NOT add box-shadow to any element */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Easing tokens */
  --ease-out-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Z-index */
  --z-nav:     200;
  --z-drawer:  300;
  --z-dropdown: 400;
  --z-modal:   500;

  /* Typography scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --color-surface: #1a1a1a;
  --color-surface-raised: #222222;

  --color-page-bg: #0D0D0D;

  --color-border: #ffffff;
  --color-border-subtle: #333333;

  --color-text-primary:   #F5F0E8;
  --color-text-secondary: #aaaaaa;
  --color-text-muted:     #777777;
  --color-text-inverse:   #000000;

  --color-nav-bg:   #0D0D0D;
  --color-nav-text: #F5F0E8;

  --color-hero-grad-start: #FFD700;
  --color-hero-grad-mid:   #FF6FD8;
  --color-hero-grad-end:   #A78BFA;

  --color-btn-primary-bg:   #F5F0E8;
  --color-btn-primary-text: #000000;
  --color-btn-secondary-bg:   transparent;
  --color-btn-secondary-text: #F5F0E8;

  --color-pill-handmade-bg:  #4DA6FF;  --color-pill-handmade-text:  #000000;
  --color-pill-vintage-bg:   #C87DFF;  --color-pill-vintage-text:   #000000;
  --color-pill-night-bg:     #FF6FD8;  --color-pill-night-text:     #000000;
  --color-pill-farmers-bg:   #FF9A3C;  --color-pill-farmers-text:   #000000;
  --color-pill-food-bg:     #FFD700;  --color-pill-food-text:      #000000;
  --color-pill-mixed-bg:     #00E5FF;  --color-pill-mixed-text:     #000000;

  --color-pill-artisan-bg:  #A78BFA;  --color-pill-artisan-text:  #000000;
  --color-pill-crafts-bg:   #C87DFF;  --color-pill-crafts-text:   #000000;
  --color-pill-flea-bg:     #2DD4BF;  --color-pill-flea-text:     #000000;
  --color-pill-antiques-bg: #FCD34D;  --color-pill-antiques-text: #000000;
  --color-pill-general-bg:  #60A5FA;  --color-pill-general-text:  #000000;

  --color-badge-active-bg:   #FF9A3C;  --color-badge-active-text:   #000000;
  --color-badge-check-bg:    #FFD700;  --color-badge-check-text:     #000000;
  --color-badge-seasonal-bg: #4DA6FF;  --color-badge-seasonal-text: #000000;
  --color-badge-closed-bg:   #FF6FD8;  --color-badge-closed-text:    #000000;

  --color-stat-bg: #1e1e2e;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  [data-theme="dark"] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body,
  [data-theme="dark"] body {
    animation: none;
    background-size: 100% 100%;
  }
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

[data-theme="dark"] ::-webkit-scrollbar-track { background: #0D0D0D; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }