/* =============================================
   VARIABLES & DESIGN TOKENS
   Colors, Fonts, Spacing, Heights
============================================= */

:root {
    /* ===== COLORS ===== */
    --color-bg-paper: #F8F8F5;
    --color-bg-folder: #F4F4F1;
    --color-bg-tab: #E8E8E3;
    --color-tab-folder: #DDD5CB;
    --color-text-ink: #1A1A18;
    --color-text-gray: #666660;
    --color-text-blue-ink: #003366;
    --color-accent: #1A2B3C;
    --color-border: #C8C8C2;
    --color-stamp-red: #1A1A18;
    --color-gold: #666660;
    --color-margin-line: rgba(26, 26, 24, 0.1);

    /* ===== FONTS ===== */
    --font-legal: 'JetBrains Mono', 'Courier New', monospace;
    --font-main: 'Raleway', sans-serif;
    --font-hand: 'Caveat', cursive;
    --font-stamp: 'Courier Prime', monospace;
    
    /* Mainframe Theme Fonts */
    --font-mainframe-head: 'VT323', monospace;
    --font-mainframe-body: 'IBM Plex Mono', monospace;

    /* ===== DIMENSIONS ===== */
    --header-height-desktop: 76px;
    --header-height-mobile: 64px;
    --bottom-nav-height: 72px;
    --admin-bar-offset: 0px;

    /* ===== SPACING ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.18s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-fixed: 2000;
    --z-modal: 3000;
    --z-header: 4000;
    --z-overlay: 5000;
}

/* Color utilities from static HTML */
.color-error {
    color: #e53e3e;
}

.bg-light-blue {
    background: #F0F4F8;
    border: 3px solid #003366;
}

.bg-gradient-blue {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 3px solid #0284C7;
}

.bg-white-border-blue {
    background: white;
    border-color: #0284C7;
}

.bg-yellow-highlight {
    margin: 24px 0;
    padding: 20px;
    background: #FFF9E6;
    border-left: 6px solid #FFB800;
}

.error-bg {
    background: #fff5f5;
    border-color: #e53e3e;
    color: #9b2c2c;
}

.error-bg-dark {
    background: #e53e3e;
}

.warning-box {
    border: 2px solid #c00;
    color: #c00;
    padding: 12px 14px;
    margin: 16px 0;
}