/* ============================================================================
   CIBLU PATTERNWEB - BASE STYLES
   CSS Variables, Design Tokens, Accessibility, Theme Switching
   ============================================================================ */

/* ============================================================================
   ACCESSIBILITY UTILITIES (WCAG 2.1 AA)
   ============================================================================ */

/* Screen reader only — visually hidden but accessible to assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip navigation link — hidden until focused via Tab */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-nav:focus {
    top: 0;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

:root {
    /* Ciblu Brand Colors (Official CI) */
    --ciblu-primary: #5F0912;           /* Burgundy - Primary Brand Color */
    --ciblu-primary-700: #4A070E;       /* Darker shade */
    --ciblu-primary-800: #3A050B;       /* Darkest shade */
    --ciblu-secondary: #BA0C2F;         /* Red - Secondary/Accent */
    --ciblu-black: #000000;
    --ciblu-primary-rgb: 95, 9, 18;          /* RGB of --ciblu-primary for rgba() usage */

    /* Bootstrap overrides */
    --bs-primary: var(--ciblu-primary);
    --bs-primary-rgb: 95, 9, 18;

    /* Semantic Colors */
    --color-primary: var(--ciblu-primary);
    --color-primary-hover: var(--ciblu-primary-700);
    --color-primary-active: var(--ciblu-primary-800);
    --color-accent: var(--ciblu-secondary);

    /* Light Palette */
    --background-light: #F6F7F9;
    --surface-light: #FFFFFF;
    --surface-alt-light: #F0F2F5;
    --text-primary-light: #0B0D12;
    --text-secondary-light: #5C6472;
    --border-light: #E2E6ED;
    --danger-light: #B00020;
    --success-light: #2E7D32;

    /* Dark Palette */
    --background-dark: #0F1115;
    --surface-dark: #171A20;
    --surface-alt-dark: #1D212A;
    --text-primary-dark: #F2F4F8;
    --text-secondary-dark: #B5BBC7;
    --border-dark: #2A2F3A;
    --danger-dark: #FF6B6B;
    --success-dark: #81C784;
}

/* Default: Light Theme */
body {
    --background: var(--background-light);
    --surface: var(--surface-light);
    --surface-alt: var(--surface-alt-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --border: var(--border-light);
    --danger: var(--danger-light);
    --success: var(--success-light);

    /* Theme-aware grays */
    --gray-100: #F0F2F5;
    --gray-200: #E2E6ED;
    --gray-300: #C8CDD6;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;

    /* Brand text color (adapts for readability on themed backgrounds) */
    --ciblu-primary-text: var(--ciblu-primary);
    --ciblu-primary-text-rgb: var(--ciblu-primary-rgb);
    --ciblu-primary-text-hover: var(--ciblu-primary-700);

    /* Bootstrap link overrides (theme-aware) */
    --bs-link-color: var(--ciblu-primary-text);
    --bs-link-hover-color: var(--ciblu-primary-text-hover);

    /* Semantic color tokens */
    --warning: #F59E0B;
    --warning-text: #D97706;
    --info: #3b82f6;
    --info-text: #2563EB;
    --danger-hover: #9a0018;

    /* RGB triplets for rgba() usage */
    --danger-rgb: 176, 0, 32;
    --success-rgb: 46, 125, 50;
    --warning-rgb: 245, 158, 11;
    --info-rgb: 59, 130, 246;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Modal overlay */
    --overlay: rgba(0, 0, 0, 0.5);
}

/* Dark Theme - Explicit selection via body.theme-dark */
body.theme-dark {
    --background: var(--background-dark);
    --surface: var(--surface-dark);
    --surface-alt: var(--surface-alt-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --border: var(--border-dark);
    --danger: var(--danger-dark);
    --success: var(--success-dark);

    /* Theme-aware grays (inverted for dark backgrounds) */
    --gray-100: #1D212A;
    --gray-200: #2A2F3A;
    --gray-300: #3A4050;
    --gray-500: #8B95A5;
    --gray-600: #9CA3AF;
    --gray-700: #B5BBC7;

    /* Brand text color (lighter tint for dark backgrounds) */
    --ciblu-primary-text: #E8A0A8;
    --ciblu-primary-text-rgb: 232, 160, 168;
    --ciblu-primary-text-hover: #F0BFC5;

    /* Semantic color tokens (lighter for dark backgrounds) */
    --warning: #FBBF24;
    --warning-text: #FBBF24;
    --info: #60A5FA;
    --info-text: #60A5FA;
    --danger-hover: #FF8A8A;

    /* RGB triplets (adapted for dark mode) */
    --danger-rgb: 255, 107, 107;
    --success-rgb: 129, 199, 132;
    --warning-rgb: 251, 191, 36;
    --info-rgb: 96, 165, 250;

    /* Stronger shadows on dark backgrounds */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

    /* Darker overlay for dark mode */
    --overlay: rgba(0, 0, 0, 0.7);
}

/* Dark Theme - OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
    body:not(.theme-light):not(.theme-dark) {
        --background: var(--background-dark);
        --surface: var(--surface-dark);
        --surface-alt: var(--surface-alt-dark);
        --text-primary: var(--text-primary-dark);
        --text-secondary: var(--text-secondary-dark);
        --border: var(--border-dark);
        --danger: var(--danger-dark);
        --success: var(--success-dark);

        /* Theme-aware grays (inverted for dark backgrounds) */
        --gray-100: #1D212A;
        --gray-200: #2A2F3A;
        --gray-300: #3A4050;
        --gray-500: #8B95A5;
        --gray-600: #9CA3AF;
        --gray-700: #B5BBC7;

        /* Brand text color (lighter tint for dark backgrounds) */
        --ciblu-primary-text: #E8A0A8;
        --ciblu-primary-text-rgb: 232, 160, 168;
        --ciblu-primary-text-hover: #F0BFC5;

        /* Semantic color tokens (lighter for dark backgrounds) */
        --warning: #FBBF24;
        --warning-text: #FBBF24;
        --info: #60A5FA;
        --info-text: #60A5FA;
        --danger-hover: #FF8A8A;

        /* RGB triplets (adapted for dark mode) */
        --danger-rgb: 255, 107, 107;
        --success-rgb: 129, 199, 132;
        --warning-rgb: 251, 191, 36;
        --info-rgb: 96, 165, 250;

        /* Stronger shadows on dark backgrounds */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

        /* Darker overlay for dark mode */
        --overlay: rgba(0, 0, 0, 0.7);
    }
}

/* Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.5;
}

/* Links */
a, .btn-link {
    color: var(--ciblu-primary-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--ciblu-primary-text-hover);
}