/**
 * ============================================
 * CSS CONFIGURATION - SINGLE SOURCE OF TRUTH
 * ============================================
 * All visual parameters in one place for easy testing/debugging.
 * Modify these values to instantly change the entire design.
 */

:root {
  /* ==================== COLORS ==================== */
  
  /* Primary Brand Colors */
  --color-primary: #2563eb;           /* Main brand color - used for primary actions and accents */
  --color-primary-dark: #1d4ed8;      /* Darker variant for hover states and depth */
  --color-primary-light: #3b82f6;     /* Lighter variant for backgrounds and subtle accents */
  
  /* Secondary/Accent Colors */
  --color-accent-orange: #f97316;     /* Warm accent - used for call-to-action in light mode */
  --color-accent-cyan: #22d3ee;       /* Cool accent - used for highlights in dark mode */
  
  /* Neutral Colors - Light Mode */
  --color-bg-light: #f8fafc;          /* Background color for light mode */
  --color-text-light: #1a1d29;        /* Primary text color for light mode */
  --color-text-light-muted: #64748b;  /* Secondary/muted text for light mode */
  
  /* Neutral Colors - Dark Mode */
  --color-bg-dark: #0a0e1a;           /* Background color for dark mode - deep navy */
  --color-text-dark: #f8fafc;         /* Primary text color for dark mode */
  --color-text-dark-muted: #94a3b8;   /* Secondary/muted text for dark mode */
  
  /* Semantic Colors */
  --color-success: #10b981;           /* Success states (form submission, validation) */
  --color-error: #ef4444;             /* Error states (validation failures) */
  --color-warning: #f59e0b;           /* Warning states */
  
  /* Surface Colors (for cards, panels) */
  --color-surface-light: rgba(255, 255, 255, 0.9);        /* Card background in light mode */
  --color-surface-dark: rgba(37, 41, 54, 0.6);            /* Card background in dark mode */
  --color-surface-light-hover: rgba(255, 255, 255, 1);    /* Card hover state in light mode */
  --color-surface-dark-hover: rgba(37, 41, 54, 0.8);      /* Card hover state in dark mode */
  
  /* Border Colors */
  --color-border-light: rgba(37, 99, 235, 0.2);   /* Subtle borders in light mode */
  --color-border-dark: rgba(34, 211, 238, 0.2);   /* Subtle borders in dark mode */
  
  
  /* ==================== TYPOGRAPHY ==================== */
  
  /* Font Families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
  /* Primary font stack - system fonts for optimal performance and native feel */
  
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  /* Monospace font for code or technical elements */
  
  /* Font Sizes - Responsive using clamp() */
  --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);      /* Hero headline - scales from 40px to 72px */
  --font-size-h1: clamp(2rem, 4vw, 3rem);            /* H1 headings - scales from 32px to 48px */
  --font-size-h2: clamp(1.5rem, 3vw, 2rem);          /* H2 headings - scales from 24px to 32px */
  --font-size-body-lg: clamp(1.125rem, 2vw, 1.25rem); /* Large body text - 18px to 20px */
  --font-size-body: 1rem;                            /* Standard body text - 16px */
  --font-size-body-sm: 0.875rem;                     /* Small body text - 14px */
  --font-size-caption: 0.75rem;                      /* Captions and labels - 12px */
  
  /* Countdown Specific Sizes */
  --font-size-countdown-number: clamp(3.5rem, 8vw, 6rem);    /* Countdown numbers - 56px to 96px */
  --font-size-countdown-label: clamp(0.75rem, 1.5vw, 0.95rem); /* Countdown labels - 12px to 15px */
  
  /* Font Weights */
  --font-weight-light: 300;      /* Light weight for subtle text */
  --font-weight-regular: 400;    /* Regular/normal weight for body text */
  --font-weight-medium: 500;     /* Medium weight for emphasis */
  --font-weight-semibold: 600;   /* Semi-bold for subheadings */
  --font-weight-bold: 700;       /* Bold for headings */
  --font-weight-extrabold: 800;  /* Extra bold for hero text */
  
  /* Line Heights */
  --line-height-tight: 1.1;      /* Tight leading for headlines */
  --line-height-normal: 1.5;     /* Normal leading for body text */
  --line-height-relaxed: 1.75;   /* Relaxed leading for comfortable reading */
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.03em;   /* Tight tracking for large headlines */
  --letter-spacing-normal: 0;        /* Normal tracking */
  --letter-spacing-wide: 0.05em;     /* Wide tracking for labels */
  --letter-spacing-wider: 0.08em;    /* Extra wide tracking for uppercase text */
  --letter-spacing-widest: 0.15em;   /* Maximum tracking for small caps */
  
  
  /* ==================== SPACING ==================== */
  
  /* Base spacing unit: 8px - all spacing is multiples of this */
  --space-xs: 0.5rem;      /* 8px - minimal spacing */
  --space-sm: 1rem;        /* 16px - small spacing */
  --space-md: 1.5rem;      /* 24px - medium spacing */
  --space-lg: 2rem;        /* 32px - large spacing */
  --space-xl: 3rem;        /* 48px - extra large spacing */
  --space-2xl: 4rem;       /* 64px - section spacing */
  --space-3xl: 5rem;       /* 80px - major section spacing */
  --space-4xl: 6rem;       /* 96px - hero section spacing */
  
  /* Component-Specific Spacing */
  --space-section: 5rem;           /* Vertical spacing between major sections (80px) */
  --space-section-mobile: 3rem;    /* Reduced section spacing on mobile (48px) */
  --space-card-padding: 1.5rem;    /* Internal padding for cards (24px) */
  --space-button-padding-x: 2.8125rem; /* Horizontal button padding (45px) */
  --space-button-padding-y: 1.125rem;  /* Vertical button padding (18px) */
  
  
  /* ==================== LAYOUT ==================== */
  
  /* Container & Breakpoints */
  --container-max-width: 1200px;   /* Maximum content width */
  --container-padding: 2.5rem;     /* Horizontal padding (40px) */
  --container-padding-mobile: 1.25rem; /* Mobile horizontal padding (20px) */
  
  /* Grid & Flexbox */
  --grid-gap: 1.25rem;             /* Gap between grid items (20px) */
  --grid-gap-mobile: 1rem;         /* Reduced gap on mobile (16px) */
  
  
  /* ==================== BORDERS & RADIUS ==================== */
  
  --border-width-thin: 1px;        /* Thin border for subtle dividers */
  --border-width-normal: 2px;      /* Normal border for inputs and cards */
  --border-width-thick: 3px;       /* Thick border for emphasis */
  
  --border-radius-sm: 0.5rem;      /* Small radius - 8px */
  --border-radius-md: 1rem;        /* Medium radius - 16px */
  --border-radius-lg: 1.5rem;      /* Large radius - 24px */
  --border-radius-full: 3.125rem;  /* Full/pill radius - 50px for buttons */
  --border-radius-circle: 50%;     /* Perfect circle */
  
  
  /* ==================== SHADOWS ==================== */
  
  /* Light Mode Shadows */
  --shadow-sm-light: 0 2px 8px rgba(37, 99, 235, 0.1);      /* Subtle shadow for light mode */
  --shadow-md-light: 0 8px 24px rgba(37, 99, 235, 0.15);    /* Medium shadow for cards */
  --shadow-lg-light: 0 16px 48px rgba(37, 99, 235, 0.2);    /* Large shadow for elevated elements */
  --shadow-xl-light: 0 24px 64px rgba(37, 99, 235, 0.25);   /* Extra large shadow for modals */
  
  /* Dark Mode Shadows */
  --shadow-sm-dark: 0 2px 8px rgba(0, 0, 0, 0.3);           /* Subtle shadow for dark mode */
  --shadow-md-dark: 0 8px 24px rgba(0, 0, 0, 0.4);          /* Medium shadow for cards */
  --shadow-lg-dark: 0 16px 48px rgba(34, 211, 238, 0.2);    /* Large shadow with cyan glow */
  --shadow-xl-dark: 0 24px 64px rgba(34, 211, 238, 0.3);    /* Extra large shadow with glow */
  
  /* Text Shadows (for glowing effects) */
  --text-shadow-glow-light: 0 0 30px rgba(37, 99, 235, 0.3);   /* Glowing text effect in light mode */
  --text-shadow-glow-dark: 0 0 30px rgba(34, 211, 238, 0.4);   /* Glowing text effect in dark mode */
  
  
  /* ==================== ANIMATION & TRANSITIONS ==================== */
  
  /* Timing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);                    /* Ease in - accelerating */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);                   /* Ease out - decelerating */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);              /* Ease in-out - smooth both ends */
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);   /* Bounce effect - overshoots then settles */
  
  /* Duration */
  --duration-instant: 0.15s;       /* Instant feedback - button clicks */
  --duration-fast: 0.3s;           /* Fast transitions - hover states */
  --duration-normal: 0.5s;         /* Normal transitions - theme switching */
  --duration-slow: 0.8s;           /* Slow transitions - page entrance */
  --duration-slower: 1s;           /* Very slow - fade-ins */
  
  /* Animation Delays (for staggered animations) */
  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-3: 0.3s;
  --delay-4: 0.4s;
  --delay-5: 0.5s;
  --delay-6: 0.6s;
  
  
  /* ==================== EFFECTS ==================== */
  
  /* Blur Effects */
  --blur-sm: 10px;                 /* Subtle blur for glassmorphism */
  --blur-md: 20px;                 /* Medium blur */
  --blur-lg: 40px;                 /* Heavy blur for dramatic effect */
  
  /* Opacity Levels */
  --opacity-disabled: 0.4;         /* Disabled state opacity */
  --opacity-muted: 0.6;            /* Muted text or elements */
  --opacity-subtle: 0.7;           /* Subtle elements */
  --opacity-visible: 0.9;          /* Almost fully visible */
  
  /* Z-Index Layers */
  --z-background: -1;              /* Background layer (canvas) */
  --z-base: 0;                     /* Base layer */
  --z-content: 1;                  /* Content layer */
  --z-elevated: 10;                /* Elevated elements (cards on hover) */
  --z-fixed: 100;                  /* Fixed elements (nav, footer) */
  --z-modal: 1000;                 /* Modal/overlay layer */
  --z-toast: 2000;                 /* Toast notifications (highest) */
  
  
  /* ==================== BLOCKCHAIN ANIMATION CONFIG ==================== */
  
  /* These control the animated background network visualization */
  --blockchain-block-count: 20;            /* Number of animated nodes in the network */
  --blockchain-block-size: 8px;            /* Size of each node/block */
  --blockchain-connection-distance: 150px; /* Max distance for drawing connections */
  --blockchain-speed: 1;                   /* Movement speed multiplier (0.5 = half speed, 2 = double) */
  --blockchain-tx-rate: 3;                 /* Transaction frequency (lower = more frequent) */
  --blockchain-line-width: 2px;            /* Width of connection lines */
  --blockchain-glow-intensity: 15px;       /* Glow/blur effect on active nodes */
  --blockchain-pulse-amount: 5px;          /* Pulse animation amplitude */
  
  
  /* ==================== COMPONENT-SPECIFIC ==================== */
  
  /* Countdown Timer */
  --countdown-gap: clamp(1.875rem, 5vw, 3.75rem);  /* Space between countdown items - 30px to 60px */
  --countdown-separator-opacity: 0.3;               /* Opacity of colon separators */
  
  /* Value Props Grid */
  --value-props-columns: 3;                /* Number of columns in desktop grid */
  --value-props-icon-size: 3rem;           /* Size of emoji icons (48px) */
  --value-props-icon-margin: 0.75rem;      /* Space below icons (12px) */
  
  /* Email Form */
  --input-min-width: 280px;                /* Minimum width for email input */
  --input-padding-x: 1.75rem;              /* Horizontal input padding (28px) */
  --input-padding-y: 1.125rem;             /* Vertical input padding (18px) */
  
  /* Toggle Switch */
  --toggle-width: 60px;                    /* Width of theme toggle switch */
  --toggle-height: 30px;                   /* Height of theme toggle switch */
  --toggle-slider-size: 24px;              /* Size of toggle slider circle */
  --toggle-slider-offset: 30px;            /* Distance slider moves when toggled */
  
  /* Social Icons */
  --social-icon-size: 22px;                /* Size of social media icons */
  
  
  /* ==================== RESPONSIVE BREAKPOINTS ==================== */
  /* Note: These are documented here but used in media queries */
  
  /* --breakpoint-mobile: 768px;        Max width for mobile devices */
  /* --breakpoint-tablet: 1024px;       Max width for tablets */
  /* --breakpoint-desktop: 1200px;      Min width for desktop */
}