/* ============================================
   PULSBEAT MEDIA INC. - CSS VARIABLES SYSTEM
   Canadian Tech Company Style
   ============================================ */

:root {
  /* ---- COLOR PALETTE ---- */
  /* Brand Core - Neo-digital cyan on deep space background */
  --color-primary: #00f5ff;           /* Electric Cyan */
  --color-primary-dark: #00c8ff;      /* Deep Cyan */
  --color-primary-light: #6bfbff;     /* Light Cyan */
  
  /* Accent Colors */
  --color-secondary: #7c5cff;         /* Pulse Violet */
  --color-secondary-dark: #5635f5;    /* Deep Violet */
  --color-secondary-light: #a995ff;   /* Soft Violet */
  
  /* Energy Accent for glitch effects */
  --color-tertiary: #ff3366;          /* Neon Fuchsia */
  --color-tertiary-dark: #d90052;     /* Deep Fuchsia */
  --color-tertiary-light: #ff6f99;    /* Light Fuchsia */
  
  /* Neutral System */
  --color-background: #050b18;        /* Base Background */
  --color-surface: #0b1426;           /* Elevated Surface */
  --color-surface-alt: #121c33;       /* Card Surface */
  --color-border: #1d2a3e;            /* Border/Divider */
  --color-overlay: rgba(5, 11, 24, 0.7);
  
  --color-dark: #e6f6ff;              /* Primary Text */
  --color-dark-gray: #b9c6d7;         /* Secondary Text */
  --color-medium-gray: #8da0b6;       /* Tertiary Text */
  --color-light-gray: #233047;        /* Muted Outline */
  --color-lighter-gray: #141f33;      /* Section Background */
  --color-white: #0b1424;             /* Legacy compatibility (acts as dark bg) */
  
  /* Status Colors */
  --color-success: #3cd88f;           /* Cyan-Green */
  --color-warning: #ffb347;           /* Warm Orange */
  --color-error: #ff5c7a;             /* Alert Red */
  --color-info: #1fbaff;              /* Info Blue */
  
  /* Gradient Colors */
  --gradient-primary: linear-gradient(135deg, #0b1426 0%, #1fbaff 45%, #7c5cff 100%);
  --gradient-secondary: linear-gradient(135deg, #141f33 0%, #ff3366 100%);
  --gradient-dark: linear-gradient(135deg, #050b18 0%, #121c33 100%);
  
  /* ---- TYPOGRAPHY ---- */
  /* Font Families */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-secondary: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'Courier New', 'Courier', monospace;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  --font-size-5xl: 3rem;              /* 48px */
  --font-size-6xl: 3.75rem;           /* 60px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  /* ---- SPACING ---- */
  /* Base Spacing Unit: 8px */
  --spacing-0: 0;
  --spacing-1: 0.25rem;               /* 4px */
  --spacing-2: 0.5rem;                /* 8px */
  --spacing-3: 0.75rem;               /* 12px */
  --spacing-4: 1rem;                  /* 16px */
  --spacing-5: 1.25rem;               /* 20px */
  --spacing-6: 1.5rem;                /* 24px */
  --spacing-8: 2rem;                  /* 32px */
  --spacing-10: 2.5rem;               /* 40px */
  --spacing-12: 3rem;                 /* 48px */
  --spacing-16: 4rem;                 /* 64px */
  --spacing-20: 5rem;                 /* 80px */
  --spacing-24: 6rem;                 /* 96px */
  --spacing-32: 8rem;                 /* 128px */
  
  /* ---- BORDER RADIUS ---- */
  --radius-none: 0;
  --radius-sm: 0.25rem;               /* 4px */
  --radius-base: 0.5rem;              /* 8px */
  --radius-md: 0.75rem;               /* 12px */
  --radius-lg: 1rem;                  /* 16px */
  --radius-xl: 1.5rem;                /* 24px */
  --radius-2xl: 2rem;                 /* 32px */
  --radius-full: 9999px;              /* Fully Rounded */
  
  /* ---- SHADOWS ---- */
  /* Subtle Shadows */
  --shadow-xs: 0 4px 12px rgba(10, 18, 36, 0.25);
  --shadow-sm: 0 6px 16px rgba(15, 26, 48, 0.3);
  --shadow-base: 0 10px 30px rgba(18, 31, 51, 0.35);
  --shadow-md: 0 16px 40px rgba(12, 52, 80, 0.35);
  --shadow-lg: 0 20px 50px rgba(8, 18, 44, 0.45);
  --shadow-xl: 0 25px 60px rgba(7, 25, 62, 0.5);
  --shadow-2xl: 0 35px 80px rgba(6, 32, 80, 0.6);
  
  /* Colored Shadows */
  --shadow-primary: 0 18px 45px rgba(31, 186, 255, 0.35);
  --shadow-secondary: 0 18px 45px rgba(124, 92, 255, 0.35);
  --shadow-tertiary: 0 18px 45px rgba(255, 83, 128, 0.35);
  
  /* ---- TRANSITIONS & ANIMATIONS ---- */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ---- Z-INDEX SCALE ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  
  /* ---- BREAKPOINTS (Mobile-First) ---- */
  /* These are referenced in media queries */
  /* --breakpoint-sm: 640px;     */
  /* --breakpoint-md: 768px;     */
  /* --breakpoint-lg: 1024px;    */
  /* --breakpoint-xl: 1280px;    */
  /* --breakpoint-2xl: 1536px;   */
  
  /* ---- CONTAINER WIDTHS ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* ---- GRID SYSTEM ---- */
  --grid-columns: 12;
  --grid-gap: var(--spacing-6);
  --grid-gap-sm: var(--spacing-4);
  --grid-gap-lg: var(--spacing-8);
}

:root[data-theme="light"] {
  --color-primary: #0066cc;
  --color-primary-dark: #004fa3;
  --color-primary-light: #3d94ff;
  
  --color-secondary: #ff6b35;
  --color-secondary-dark: #e55a2b;
  --color-secondary-light: #ff8c5a;
  
  --color-tertiary: #00a8cc;
  --color-tertiary-dark: #0089a6;
  --color-tertiary-light: #33c3e6;
  
  --color-background: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f4fa;
  --color-border: #dce1ea;
  --color-overlay: rgba(16, 40, 73, 0.15);
  
  --color-dark: #1a1a2e;
  --color-dark-gray: #2d2d44;
  --color-medium-gray: #555555;
  --color-light-gray: #dbe2ee;
  --color-lighter-gray: #edf2fb;
  --color-white: #ffffff;
  
  --gradient-primary: linear-gradient(135deg, #0066cc 0%, #3d94ff 100%);
  --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #ffa500 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-base: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 25px 45px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 35px 60px rgba(0, 0, 0, 0.3);
  
  --shadow-primary: 0 14px 40px rgba(0, 102, 204, 0.3);
  --shadow-secondary: 0 14px 40px rgba(255, 107, 53, 0.3);
  --shadow-tertiary: 0 14px 40px rgba(0, 168, 204, 0.3);
}