/**
 * Unified Variables for Borealis Security Website
 * This file contains standardized variables to be used across all stylesheets
 * including colors, breakpoints, spacing, and more.
 */

:root {
    /* Primary colors */
    --primary: #0a192f;            /* Dark blue - primary brand color */
    --secondary: #112240;          /* Secondary darker blue */
    --accent: #64ffda;             /* Teal accent color */
    --accent-purple: #9d4edd;      /* Purple accent color */
    --accent-blue: #3a86ff;        /* Blue accent color */

    /* Text colors */
    --text: #ccd6f6;               /* Light blue-gray text */
    --text-secondary: #8892b0;     /* Secondary text color */
    --text-dark: #1a2b49;          /* Dark text color for light backgrounds */
    --text-darker: #333333;        /* Very dark text */
    --text-light: #e6f1ff;         /* Almost white text */
    --text-muted: #667085;         /* Muted text for less emphasis */

    /* Background colors */
    --bg-white: #ffffff;           /* Pure white background */
    --bg-light: #f8f9fa;           /* Light gray background */
    --bg-light-alt: #f9fafc;       /* Alternative light background */
    --bg-dark: #020c1b;            /* Very dark background */

    /* Status colors */
    --success: #6af48c;            /* Green for success states */
    --warning: #ffd166;            /* Yellow for warning states */
    --danger: #ff5370;             /* Red for danger/error states */

    /* Border and shadow colors */
    --border-light: #e5e7eb;       /* Light border color */
    --border-medium: #d1d5db;      /* Medium border color */
    --shadow-light: rgba(0, 0, 0, 0.05); /* Light shadow */
    --shadow-medium: rgba(0, 0, 0, 0.1);  /* Medium shadow */
    --shadow-dark: rgba(0, 0, 0, 0.2);    /* Dark shadow */

    /* Fonts */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --font-heading: var(--font-sans);

    /* Sizes and spacing */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-purple));

    /* Ultra Design System Compatibility */
    --accent-primary: #64ffda;
    --accent-secondary: #00b4d8;
    --accent-alert: #ff6b6b;
    --text-main: #ccd6f6;
    --bg-card: rgba(17, 34, 64, 0.7);
    --bg-card-hover: rgba(23, 42, 69, 0.9);
    --glass-shine: rgba(255, 255, 255, 0.05);
    --shadow-glow: 0 0 20px rgba(100, 255, 218, 0.15);

    /* Other design variables */
    --transition-standard: all 0.3s ease; /* Standard transition */
    
    /* Breakpoints - use with @media (max-width: var(--breakpoint-md)) */
    --breakpoint-xs: 575.98px;  /* Extra small devices (portrait phones) */
    --breakpoint-sm: 767.98px;  /* Small devices (landscape phones) */
    --breakpoint-md: 991.98px;  /* Medium devices (tablets) */
    --breakpoint-lg: 1199.98px; /* Large devices (desktops) */
    --breakpoint-xl: 1399.98px; /* Extra large devices (large desktops) */
    
    /* Container max-widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    
    /* Spacing system (based on 0.25rem = 4px) */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 2.5rem;   /* 40px */
    --space-8: 3rem;     /* 48px */
    --space-9: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */
    --space-11: 6rem;    /* 96px */
    --space-12: 8rem;    /* 128px */
}