/* ==========================================================================
   VCAN FITNESS - Design Tokens
   Anti-AI Handmade Design System
   ========================================================================== */

:root {
  /* ==========================================================================
     COLOR TOKENS - Preserved from vcanfitness.com
     ========================================================================== */

  /* Primary Palette */
  --vc-primary: #1863DC;
  --vc-primary-dark: #0F4199;
  --vc-primary-light: #4A8AE6;

  /* Neutrals */
  --vc-bg-main: #FFFFFF;
  --vc-bg-alt: #F8F8F8;
  --vc-bg-light: #FFFFFF;
  --vc-bg-surface: #F8F8F8;

  /* Text Colors */
  --vc-fg-primary: #000000;
  --vc-fg-secondary: #333333;
  --vc-fg-dark: #000000;
  --vc-fg-secondary-dark: #333333;
  --vc-fg-muted: #666666;

  /* UI States */
  --vc-border: #E0E0E0;
  --vc-border-light: #E0E0E0;
  --vc-success: #27AE60;
  --vc-warning: #F39C12;
  --vc-error: #E74C3C;
  --vc-focus: #1863DC;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  /* Font Stacks */
  --font-primary: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', monospace;

  /* Type Scale - Improved Fluid Sizing for Mobile Readability */
  --h1: clamp(32px, 6vw + 1rem, 56px);
  --h2: clamp(24px, 4vw + 0.5rem, 40px);
  --h3: clamp(20px, 3vw + 0.25rem, 28px);
  --h4: clamp(18px, 2.5vw, 24px);
  --h5: clamp(16px, 2vw, 20px);
  --h6: clamp(14px, 1.5vw, 16px);

  /* Body Sizes - Optimized for mobile readability */
  --body-xl: clamp(18px, 2vw, 20px);
  --body-lg: clamp(16px, 1.8vw, 18px);
  --body: clamp(15px, 1.5vw, 16px);
  --body-sm: clamp(13px, 1.2vw, 14px);
  --caption: clamp(12px, 1vw, 13px);
  --micro: clamp(11px, 0.8vw, 12px);

  /* Line Heights - Improved for mobile readability */
  --lh-tight: 1.25;
  --lh-heading: 1.35;
  --lh-base: 1.65;
  --lh-relaxed: 1.8;

  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Spacing Scale (8pt System) */
  --space-0: 0;
  --space-px: 1px;
  --space-0\.5: 4px;
  --space-1: 8px;
  --space-1\.5: 12px;
  --space-2: 16px;
  --space-2\.5: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-14: 112px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;
  --space-28: 224px;
  --space-32: 256px;

  /* Broken Grid Offsets */
  --offset-hero: -40px;
  --offset-proof: 60px;
  --offset-subtle: 20px;
  --offset-max: 120px;

  /* ==========================================================================
     ANTI-AI EFFECTS
     ========================================================================== */

  /* Micro-Imperfections */
  --border-variance: 1.5px;
  --border-wonky-1: polygon(0 2px, 100% 0, 100% calc(100% - 1px), 0 100%);
  --border-wonky-2: polygon(0 0, calc(100% - 1px) 2px, 100% 100%, 1px calc(100% - 1px));
  --border-wonky-3: polygon(1px 0, 100% 1px, calc(100% - 1px) 100%, 0 calc(100% - 2px));

  /* Paper Texture */
  --noise-opacity: 0.025;
  --noise-blend: multiply;
  --grain-size: 200px;

  /* Hand-Drawn Properties */
  --roughness: 0.5;
  --bowing: 1;
  --stroke-width: 1.5px;
  --sketch-offset: 2px;

  /* Shadow Variations */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 2px 3px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 4px 6px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 8px 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-print: 3px 3px 0 rgba(24, 99, 220, 0.15);
  --shadow-brutal: 4px 4px 0 #000000;
  --shadow-wonky: 2.5px 3px 0 rgba(0, 0, 0, 0.9);

  /* ==========================================================================
     ANIMATION & TRANSITIONS
     ========================================================================== */

  /* Timing Functions */
  --ease-natural: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Durations */
  --duration-instant: 50ms;
  --duration-quick: 150ms;
  --duration-base: 250ms;
  --duration-moderate: 350ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;

  /* ==========================================================================
     BREAKPOINTS
     ========================================================================== */

  --bp-xs: 475px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */

  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-max: 9999;

  /* ==========================================================================
     ACCESSIBILITY
     ========================================================================== */

  /* Focus Indicators */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  --focus-outline-color: var(--vc-primary);
  --focus-outline-style: solid;

  /* Touch Targets */
  --touch-target-min: 44px;
  --touch-padding: 8px;

  /* Motion Preferences */
  --motion-reduce-transform: none;
  --motion-reduce-opacity: 1;
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-quick: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --motion-reduce-transform: none !important;
    --motion-reduce-opacity: 1 !important;
  }
}

/* ==========================================================================
   DARK MODE ADJUSTMENTS (if needed)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Explicitly maintaining white background even in dark mode */
    /* Override this block if dark mode is needed in the future */
    --vc-bg-main: #FFFFFF;
    --vc-bg-alt: #F8F8F8;
  }
}