/**
 * variables.css - CSS Custom Properties for Seabird Online Services
 * This file defines all colors, fonts, spacing, and other design tokens.
 * Import this FIRST in header.php before all other stylesheets.
 */

/* ============================================
   FONT DECLARATIONS
   ============================================ */
@font-face {
    font-family: 'Bruney';
    src: url('../fonts/bruney_Bh91kBnS76.woff') format('woff'),
    url('../fonts/bruney_Bh91kBnS76.otf') format('opentype'),
    url('../fonts/bruney_Bh91kBnS76.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
    /* Primary Colors */
    --primary-color: #2E4A62;          /* Deep navy blue */
    --secondary-color: #B4B7BA;        /* Silver gray */
    --accent-color: #C0AB8E;           /* Warm tan */

    /* Brand Colors */
    --brand-gold: #facf39;             /* Logo/heading gold */
    --card-bg: #fef4d0;                /* Warm cream for cards */

    /* Text Colors */
    --text-color: #333333;             /* Body text */
    --light-text: #FFFFFF;             /* Text on dark backgrounds */
    --muted-text: #666666;             /* Secondary text */

    /* Background Colors */
    --light-bg: #f8f9fa;               /* Light sections */
    --dark-bg: var(--primary-color);   /* Dark sections */

    /* Overlay Colors */
    --dark-overlay: rgba(46, 74, 98, 0.7);
    --medium-overlay: rgba(46, 74, 98, 0.8);
    --light-overlay: rgba(46, 74, 98, 0.9);

    /* Status Colors */
    --success-color: #28a745;
    --success-bg: #d4edda;
    --success-text: #155724;
    --danger-color: #dc3545;
    --danger-bg: #f8d7da;
    --danger-text: #721c24;
    --warning-color: #ffc107;
    --warning-bg: #fff3cd;
    --warning-text: #856404;

    /* Typography */
    --header-font-family: 'Bruney', Georgia, 'Times New Roman', Times, serif;
    /* Fixed: Google Fonts returns this as "Afacad Flux" */
    --text-font-family: 'Afacad Flux', 'Afacad', sans-serif;
    --body-font-size: 1.1rem;
    --body-line-height: 1.6;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 20px;
    --radius-circle: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 1500;
    --z-tooltip: 2000;

    /* Layout */
    --container-max-width: 1400px;
    --nav-height: 100px;  /* Adjusted for larger logo */

    /* Form Elements */
    --input-border: #dee2e6;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: 0 0 0 0.2rem rgba(46, 74, 98, 0.25);
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #f0f0f0;
        --light-text: #ffffff;
        --light-bg: #1a1a1a;
        --card-bg: #2a2a2a;
    }
}
*/