/* ==================================================
   DESIGN TOKENS - CSS Variables Foundation
   SS SRLS Naval Contractors Design System
   ================================================== */

:root {
    /* ========================================
       TYPOGRAPHY SCALE
       Major Third (1.250) + Engineering Precision
       ======================================== */
    
    /* Font Sizes */
    --font-size-h1: 4rem;          /* 64px - Hero titles only (+14% impact) */
    --font-size-h2: 2.5rem;        /* 40px - Section titles (+25% prominence) */
    --font-size-h3: 1.75rem;       /* 28px - Subsection titles (+17%) */
    --font-size-h4: 1.125rem;      /* 18px - Card titles */
    --font-size-base: 1rem;        /* 16px - Body text */
    --font-size-small: 0.875rem;   /* 14px - Secondary text */
    --font-size-tiny: 0.75rem;     /* 12px - Captions, labels */
    
    /* Metric Numbers (Dashboard) */
    --font-size-metric: 3rem;      /* 48px - Same as section emphasis */
    --font-size-metric-large: 3.5rem; /* 56px - Featured metrics */
    
    /* Line Heights */
    --line-height-tight: 1.2;      /* Headings */
    --line-height-normal: 1.5;     /* Body text */
    --line-height-relaxed: 1.7;    /* Long-form content */
    
    /* Font Weights - Simplified to 3 levels */
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;      /* Ultra-bold for hero titles */
    
    /* Font Families */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family-mono: 'IBM Plex Mono', 'Courier New', monospace;
    
    /* ========================================
       SPACING SYSTEM
       4px Base Unit (Multiples of 4)
       ======================================== */
    
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    --space-4xl: 5rem;      /* 80px */
    --space-5xl: 6rem;      /* 96px */
    
    /* Section Spacing - Increased for readability (+85%) */
    --section-padding-y: 3rem;    /* 48px - Comfortable breathing room (was 26px) */
    --section-padding-x: 1.6rem;  /* 26px - Horizontal padding */
    --section-gap: 2rem;          /* 32px - Generous section gaps (was 19px) */
    
    /* ========================================
       COLOR PALETTE
       B2B Industrial - Navy Blue Primary
       ======================================== */
    
    /* Primary (Navy Blue) */
    --color-primary: #1A4D7A;
    --color-primary-light: #2563a8;
    --color-primary-dark: #0f2f4d;
    --color-primary-alpha-10: rgba(26, 77, 122, 0.1);
    --color-primary-alpha-20: rgba(26, 77, 122, 0.2);
    --color-primary-alpha-30: rgba(26, 77, 122, 0.3);
    
    /* Accent (Strategic Red - MINIMAL USE) */
    --color-accent: #C41E3A;                      /* ONLY hero metric + CTA */
    --color-accent-light: #e02a4a;
    --color-accent-alpha-10: rgba(196, 30, 58, 0.05); /* Ridotto da 0.1 a 0.05 */
    
    /* Success (Green) */
    --color-success: #10b981;
    --color-success-dark: #059669;
    
    /* Warning (Orange) */
    --color-warning: #f59e0b;
    
    /* Neutrals (Dark Theme) */
    --color-bg-primary: #0f1115;      /* Main background */
    --color-bg-secondary: #1a1d23;    /* Card backgrounds */
    --color-bg-tertiary: #252932;     /* Elevated surfaces */
    --color-bg-quaternary: #2f3441;   /* Hover states */
    
    /* Text Colors - WHITE DOMINANT */
    --color-text-primary: #FFFFFF;                      /* Bianco puro titoli */
    --color-text-secondary: rgba(255, 255, 255, 0.87);  /* Bianco corpo (era #ccc) */
    --color-text-tertiary: rgba(255, 255, 255, 0.60);   /* Grigio chiaro (era #888) */
    --color-text-muted: rgba(255, 255, 255, 0.40);      /* Muted (era #666) */
    
    /* Border Colors - SILVER SUBTLE */
    --color-border: rgba(255, 255, 255, 0.08);     /* Silver sottile principale */
    --color-border-light: rgba(255, 255, 255, 0.05); /* Ultra sottile */
    --color-border-medium: rgba(255, 255, 255, 0.15); /* Hover/accent */
    
    /* Surface Colors (Cards) */
    --color-card-bg: rgba(26, 77, 122, 0.08);
    --color-card-border: rgba(26, 77, 122, 0.3);
    --color-card-hover-bg: rgba(26, 77, 122, 0.12);
    
    /* ========================================
       LAYOUT SYSTEM
       12-Column Grid + Containers
       ======================================== */
    
    /* Container Max Widths */
    --container-full: 100%;
    --container-wide: 1400px;      /* Sections */
    --container-standard: 1200px;  /* Content */
    --container-narrow: 900px;     /* Text */
    --container-tight: 700px;      /* Forms */
    
    /* Grid */
    --grid-columns: 12;
    --grid-gap: 1.5rem;            /* 24px */
    --grid-gap-large: 2rem;        /* 32px */
    --grid-gap-small: 1rem;        /* 16px */
    
    /* ========================================
       BORDERS & RADIUS
       ======================================== */
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    
    /* ========================================
       SHADOWS
       Subtle elevation for dark theme
       ======================================== */
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
    
    /* Colored Shadows */
    --shadow-primary: 0 4px 20px rgba(26, 77, 122, 0.3);
    --shadow-accent: 0 4px 20px rgba(196, 30, 58, 0.3);
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal-backdrop: 400;
    --z-index-modal: 500;
    --z-index-popover: 600;
    --z-index-tooltip: 700;
    
    /* ========================================
       BREAKPOINTS (for reference in JS)
       ======================================== */
    
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 968px;
    --breakpoint-desktop: 1200px;
    --breakpoint-wide: 1400px;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   Tablet & Mobile Scale
   ======================================== */

@media (max-width: 968px) {
    :root {
        /* Reduce font sizes on tablet */
        --font-size-h1: 3rem;          /* 48px - smoother scale from desktop 64px */
        --font-size-h2: 2rem;          /* 32px */
        --font-size-h3: 1.5rem;        /* 24px */
        --font-size-metric: 2.5rem;    /* 40px */
        --font-size-metric-large: 3rem; /* 48px */
        
        /* Tablet section padding - bilanciato */
        --section-padding-y: 2.5rem;   /* 40px - confortevole */
        --section-padding-x: 1.5rem;   /* 24px */
        --section-gap: 2rem;           /* 32px - respirazione adeguata */
    }
}

@media (max-width: 640px) {
    :root {
        /* Mobile font sizes - ottimizzati per leggibilità */
        --font-size-h1: 2.5rem;        /* 40px - better impact (less dramatic drop) */
        --font-size-h2: 1.75rem;       /* 28px */
        --font-size-h3: 1.375rem;      /* 22px */
        --font-size-h4: 1rem;          /* 16px */
        --font-size-base: 0.9375rem;   /* 15px */
        --font-size-metric: 2rem;      /* 32px */
        --font-size-metric-large: 2.5rem; /* 40px */
        
        /* Mobile spacing - bilanciato tra densità e respirazione */
        --section-padding-y: 2.5rem;   /* 40px - increased breathing room (+25%) */
        --section-padding-x: 1rem;     /* 16px */
        --section-gap: 2rem;           /* 32px - generous gaps (+33%) */
        --grid-gap: 1rem;              /* 16px */
    }
}

/* ========================================
   UTILITY: Print Styles
   ======================================== */

@media print {
    :root {
        /* Optimize for print */
        --color-bg-primary: #ffffff;
        --color-text-primary: #000000;
        --color-text-secondary: #333333;
    }
}