/* ===================================================================
   FIGMA DESIGN TOKENS - FiveAlarmWeb
   Based on Figma export for Homepage redesign
   =================================================================== */

:root {
    /* ===== COLORS ===== */
    
    /* Backgrounds */
    --figma-bg-primary: #141313;
    --figma-bg-navbar: rgba(0, 0, 0, 0.4);
    --figma-bg-card: rgba(0, 0, 0, 0.3);
    --figma-bg-card-hover: rgba(255, 255, 255, 0.05);
    --figma-bg-surface: #0D0D0D;
    
    /* Card Gradients */
    --figma-gradient-card-red: radial-gradient(23.21% 88.82% at 100% 100%, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0) 100%), 
                               radial-gradient(20.72% 64.91% at 0% 0%, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0) 100%), 
                               rgba(0, 0, 0, 0.4);
    
    --figma-gradient-card-gold: radial-gradient(42.6% 353.85% at 100% 0%, rgba(164, 126, 13, 0.2) 0%, rgba(0, 0, 0, 0) 100%), 
                                rgba(0, 0, 0, 0.3);
    
    /* Brand Colors */
    --figma-brand-red: #A4200D;
    --figma-brand-red-dark: #741709;
    --figma-brand-red-darker: #3E0C05;
    --figma-accent-red: #C43C3C;
    --figma-accent-gold: #CD892A;
    --figma-accent-gold-rgba: rgba(164, 126, 13, 0.2);
    
    /* Text Colors */
    --figma-text-primary: #FFFFFF;
    --figma-text-secondary: rgba(255, 255, 255, 0.7);
    --figma-text-muted: rgba(255, 255, 255, 0.4);
    --figma-text-disabled: rgba(255, 255, 255, 0.6);
    
    /* Border & Dividers */
    --figma-border: rgba(255, 255, 255, 0.1);
    --figma-border-subtle: rgba(48, 48, 48, 0.25);
    
    /* Progress Bar */
    --figma-progress-bg: rgba(230, 230, 230, 0.05);
    --figma-progress-fill: linear-gradient(90deg, #3E0C05 0%, #741709 52.88%, #A4200D 100%);
    
    /* ===== TYPOGRAPHY ===== */
    
    /* Font Families */
    --figma-font-primary: 'Inter', system-ui, sans-serif;
    --figma-font-secondary: 'Inter', system-ui, sans-serif;
    --figma-font-heading: 'Manrope', system-ui, sans-serif;
    
    /* Font Sizes */
    --figma-fs-hero: 104px;
    --figma-fs-h1: 64px;
    --figma-fs-h2: 40px;
    --figma-fs-h3: 32px;
    --figma-fs-h4: 28px;
    --figma-fs-h5: 24px;
    --figma-fs-body: 20px;
    --figma-fs-nav: 16px;
    --figma-fs-small: 16px;
    
    /* Line Heights */
    --figma-lh-hero: 127px;
    --figma-lh-h1: 78px;
    --figma-lh-h2: 49px;
    --figma-lh-h3: 39px;
    --figma-lh-h4: 34px;
    --figma-lh-h5: 29px;
    --figma-lh-body: 24px;
    --figma-lh-nav: 20px;
    
    /* Font Weights */
    --figma-fw-regular: 400;
    --figma-fw-medium: 500;
    --figma-fw-semibold: 600;
    --figma-fw-bold: 700;
    --figma-fw-extrabold: 800;
    
    /* ===== SPACING ===== */
    --figma-sp-xs: 8px;
    --figma-sp-sm: 16px;
    --figma-sp-md: 24px;
    --figma-sp-lg: 32px;
    --figma-sp-xl: 48px;
    --figma-sp-2xl: 56px;
    
    /* ===== BORDER RADIUS ===== */
    --figma-radius-sm: 6px;
    --figma-radius-md: 12px;
    --figma-radius-lg: 12px;
    --figma-radius-xl: 16px;
    --figma-radius-full: 1000px;
    
    /* ===== SHADOWS & EFFECTS ===== */
    --figma-shadow-icon: drop-shadow(0px 0px 8px rgba(204, 148, 69, 0.32));
    --figma-shadow-card: 0px 0px 6px rgba(0, 0, 0, 0.08);
    --figma-shadow-border: 0px 0px 16px rgba(0, 0, 0, 0.08);
    --figma-shadow-progress: 0px 0px 16px rgba(0, 0, 0, 0.08);
    
    --figma-backdrop-blur: blur(24px);
    --figma-backdrop-blur-light: blur(7.2px);
    
    /* ===== TRANSITIONS ===== */
    --figma-transition-fast: 200ms ease;
    --figma-transition-normal: 0.3s ease;
}

/* ===== DARK MODE ADJUSTMENTS (if needed) ===== */
:root[data-theme="dark"] {
    /* Keep Figma dark theme as-is */
}