/**
 * Design System Variables
 * Professional marine consultancy aesthetic - not flashy, not AI-generated
 */

:root {
    /* ==========================================
       COLOR SYSTEM
       ========================================== */
    
    /* Core Colors */
    --color-offwhite: #f5f5f5;
    --color-dark: #181818;
    --color-primary: #010518;
    --color-highlight: #9dddff;
    
    /* Extended Palette */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f8f8;
    --color-gray-200: #e8e8e8;
    --color-gray-300: #d0d0d0;
    --color-gray-400: #a0a0a0;
    --color-gray-500: #707070;
    --color-gray-600: #505050;
    --color-gray-700: #303030;
    
    /* Accent for technical details */
    --color-accent: #266b90;
    --color-accent-light: #9dddff;
    
    /* Semantic Colors */
    --color-success: #1a5d3e;
    --color-error: #8b2f2f;
    --color-warning: #7a5a2c;

    /* Extra Colors */
    --color-border: rgba(232, 234, 238, 0.2);
    --color-border-light: #e8eaee1c;
    --color-hover: rgba(157, 221, 255, 0.1);
    --color-overlay: rgba(1, 5, 24, 0.7);
    --color-overlay: rgba(1, 5, 24, 0.6);
    
    /* ==========================================
       SPACING SYSTEM
       Clean, deliberate whitespace
       ========================================== */
    
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 10rem;
    --space-4xl: 15rem;
    --space-5xl: 20rem;
    
    /* Section spacing */
    --section-padding-mobile: 3rem;
    --section-padding-tablet: 5rem;
    --section-padding-desktop: 8rem;
    
    /* Container */
    --container-max: 1280px;
    --container-narrow: 960px;
    --container-wide: 1440px;
    --container-padding: var(--space-md);
    
    /* ==========================================
       BORDERS & RADIUS
       Sharp, structural - no soft rounded corners
       ========================================== */
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    
    --border-color-light: var(--color-gray-200);
    --border-color-medium: var(--color-gray-300);
    --border-color-dark: var(--color-dark);
    
    /* Minimal radius - professional, not playful */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    
    /* ==========================================
       TRANSITIONS
       Immediate, crisp - no floaty AI animations
       ========================================== */
    
    --transition-instant: 0.1s ease;
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    
    /* No transform transitions by default */
    --transition-color: color var(--transition-base);
    --transition-bg: background-color var(--transition-base);
    --transition-border: border-color var(--transition-base);
    
    /* ==========================================
       SHADOWS
       Subtle depth, not dramatic blur
       ========================================== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
    
    /* ==========================================
       Z-INDEX LAYERS
       ========================================== */
    
    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 300;
    --z-notification: 400;
    
    /* ==========================================
       BREAKPOINTS (for reference in JS)
       ========================================== */
    
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;
}

/* ==========================================
   DARK MODE SUPPORT (if needed later)
   ========================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Can override colors here if dark mode is needed */
    }
}