/**
 * CSS Design Tokens & Variables
 * Centralized design system for the F2F landing page
 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Primary Colors */
  --color-primary: #2cff80;
  --color-primary-dark: #2ee67d;
  --color-accent: #2cff80;

  /* Background Colors */
  --color-bg-primary: #090909;
  --color-bg-secondary: #121212;
  --color-bg-overlay: rgba(255, 255, 255, 0.03);
  --color-bg-overlay-strong: rgba(0, 0, 0, 0.08);

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.65);
  --color-text-dark: #000000;
  --color-text-muted: rgba(29, 30, 34, 0.5);

  /* Border Colors */
  --color-border-primary: rgba(255, 255, 255, 0.15);
  --color-border-secondary: rgba(255, 255, 255, 0.1);

  /* Badge/Highlight Colors */
  --color-badge-yellow: #ffcd29;

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

  /* Font Families */
  --font-primary: Montserrat, sans-serif;
  --font-secondary: Ruberoid, sans-serif;
  --font-tertiary: Nebula, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-medium: 18px;
  --font-size-large: 24px;
  --font-size-xlarge: 32px;
  --font-size-xxlarge: 48px;
  --font-size-hero: 64px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1;
  --line-height-base: 1.15;
  --line-height-normal: 1.25;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.65;

  /* ========================================
     SPACING
     ======================================== */

  /* Base spacing unit: 8px */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 80px;

  /* Component-specific spacing */
  --spacing-section-padding: 80px;
  --spacing-section-padding-mobile: 40px;
  --spacing-header-height: 100px;
  --spacing-header-height-mobile: 64px;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 36px;
  --border-radius-xxl: 60px;
  --border-radius-full: 50%;

  --border-width-thin: 0.5px;
  --border-width-base: 1px;
  --border-width-thick: 2px;

  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */

  --transition-fast: 200ms;
  --transition-base: 300ms;
  --transition-slow: 400ms;

  --transition-timing-default: ease-out;
  --transition-timing-ease-in-out: ease-in-out;

  --transition-default: var(--transition-base) var(--transition-timing-default);

  /* ========================================
     EFFECTS
     ======================================== */

  /* Backdrop Filters */
  --backdrop-blur-sm: blur(15px);
  --backdrop-blur-md: blur(25px);
  --backdrop-blur-lg: blur(30px);
  --backdrop-blur-xl: blur(87px);

  /* Shadows */
  --shadow-sm: 0 4px 6px 0 rgba(0, 0, 0, 0.43);
  --shadow-md: 0 14px 38px 0 rgba(38, 28, 23, 0.05);

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

  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */

  --z-index-base: 1;
  --z-index-overlay: 100;
  --z-index-dropdown: 1000;
  --z-index-modal: 2000;
  --z-index-header: 3000;
  --z-index-indicator: 9999;
}