/**
 * HERMETIKA DESIGN TOKENS
 * 
 * Design System v1.0
 * Brand Philosophy: Ancient foundations, modern execution
 * 
 * Core Principles:
 * - Minimal decoration, maximum meaning
 * - Sober, diagrammatic, elegant
 * - Avoid generic mystical aesthetics
 * - Focus on legibility and structure
 */

:root {
    /* ==========================================
       BACKGROUNDS
       ========================================== */

    /* Deep blue-black foundation (not pure black) */
    --bg-primary: #0E1621;

    /* Cards, panels, internal sections - slightly lighter */
    --bg-secondary: #141E2A;


    /* ==========================================
       TEXT & READABILITY
       ========================================== */

    /* Main text - warm off-white for long reading */
    --text-primary: #EFE9DC;

    /* Labels, captions, supporting text */
    --text-secondary: #B8B2A6;


    /* ==========================================
       SYMBOLIC ACCENTS
       ========================================== */

    /* ==========================================
       SEMANTIC ACCENTS
       ========================================== */

    /* Alchemical gold - REVELATION, ACTIVATION */
    --accent-gold: #C7A44A;
    --accent-gold-muted: #9E8440;

    /* Mystic tones for depth and ambiance */
    --accent-teal-light: #5A8FA3;
    --accent-purple-mystic: #6B4C9A;
    --accent-indigo-deep: #3D5A80;

    /* ==========================================
       STRUCTURAL ELEMENTS
       ========================================== */

    /* Teal/petrol - LOGIC, ORGANIZATION */
    --accent-structural: #3A5F6F;

    /* ==========================================
       GRADIENTS
       ========================================== */

    --gradient-mystical: linear-gradient(135deg, #6B4C9A 0%, #3A5F6F 100%);
    --gradient-gold: linear-gradient(135deg, #C7A44A 0%, #9E8440 100%);
    --gradient-cosmic: radial-gradient(circle at center, rgba(107, 76, 154, 0.2) 0%, transparent 70%);
    --gradient-dark-overlay: linear-gradient(to bottom, transparent 0%, rgba(14, 22, 33, 0.9) 100%);

    /* ==========================================
       TENSION & ALERTS
       ========================================== */

    --accent-wine: #5A1F2E;

    /* ==========================================
       BORDERS & INTERACTION
       ========================================== */

    --border-subtle: #2A3442;
    --hover-overlay: rgba(199, 164, 74, 0.08);

    /* ==========================================
       SEMANTIC COLORS
       ========================================== */

    --semantic-success: var(--accent-structural);
    --semantic-warning: var(--accent-gold);
    --semantic-error: var(--accent-wine);


    /* ==========================================
       TYPOGRAPHY SCALE
       ========================================== */

    --font-display: 'Cinzel', serif;
    --font-body: 'Inter', -apple-system, system-ui, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    /* Mega sizes for Hero */
    --font-size-5xl: 3rem;
    --font-size-6xl: 4rem;


    /* ==========================================
       SPACING SCALE
       ========================================== */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 6rem;


    /* ==========================================
       BORDER RADIUS
       ========================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;


    /* ==========================================
       SHADOWS (Enhanced Depth)
       ========================================== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* New Elevation Levels */
    --shadow-elevated: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    --shadow-floating: 0 20px 60px -15px rgba(0, 0, 0, 0.6);
    --shadow-inset-subtle: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Gold glow for activated elements */
    --shadow-gold: 0 0 24px rgba(199, 164, 74, 0.3);


    /* ==========================================
       TRANSITIONS & TIMINGS
       ========================================== */

    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 400ms;
    --transition-slower: 600ms;

    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --easing-snap: cubic-bezier(0.4, 0, 0.6, 1);


    /* ==========================================
       BLUR EFFECTS
       ========================================== */

    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;


    /* ==========================================
       FLUID TYPOGRAPHY
       ========================================== */

    --fluid-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    --fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --fluid-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
    --fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);


    /* ==========================================
       Z-INDEX SCALE
       ========================================== */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-nav: 30;
    --z-modal: 40;
    --z-overlay: 50;
    --z-toast: 60;
}


/* ==========================================
   PDF THEME (Inverted for print)
   ========================================== */

.pdf-theme {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F0;
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --accent-gold: #B89A3F;
    --accent-gold-muted: #8B7332;
    --accent-structural: #2A4F5F;
    --border-subtle: #E0E0E0;
}