/**
 * Cinematic Ivory — Design Tokens & CSS Variables
 * 
 * Purpose: Defines the centralized visual tokens including color palettes,
 * editorial font pairings, easing curves, layout paddings, and borders.
 */

:root {
    /* --------------------------------------------------
       1. COLOR SYSTEM (Option 2: Deep Indigo Navy & Champagne Gold)
       -------------------------------------------------- */
    --ivory: #0F1523;         /* Deep royal indigo navy background */
    --cream: #1B2436;         /* Slate navy panels/overlays */
    --sand: #2C3A50;          /* Subtle blue-grey border lines */
    --ink: #F6F8FA;           /* Warm milk off-white for body text/copy */
    --muted: #7E8F9F;         /* Muted steel blue for secondary labels */
    
    /* Fine Luxury Accents */
    --gold: #DFB76C;          /* Saturated champagne gold accent */
    --burnt-orange: #C04E26;  /* Deep rust sienna for highly active states */
    
    /* Hero background gradient overlay token (Indigo rgb: 15, 21, 35) */
    --hero-gradient: linear-gradient(to right, var(--ivory) 15%, rgba(15, 21, 35, 0.85) 35%, rgba(15, 21, 35, 0.3) 60%, transparent 100%);
    
    /* Scrolled navbar background color token */
    --navbar-bg: rgba(15, 21, 35, 0.92);

    /* --------------------------------------------------
       2. TYPOGRAPHY SYSTEM
       -------------------------------------------------- */
    /* Display Serif: Google Instrument Serif (Elegant, high-contrast, editorial) */
    --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    /* UI / Body Sans-Serif: Google Plus Jakarta Sans */
    --font-sans: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    /* Display Headings: Google Syne (Wide, geometric, expensive creative look) */
    --font-display: "Syne", "Outfit", sans-serif;

    /* --------------------------------------------------
       3. MOTION & TRANSITION PHYSICS
       -------------------------------------------------- */
    /* Premium physics-mode timing functions (bezier coordinates) */
    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Dynamic duration presets */
    --transition-slow: 0.9s var(--ease-expo);
    --transition-medium: 0.5s var(--ease-smooth);
    --transition-fast: 0.25s ease;

    /* --------------------------------------------------
       4. SPACING & STRUCTURAL LAYOUT
       -------------------------------------------------- */
    /* Fluid viewport clamp definitions (prevents layout collapse) */
    --container-padding: clamp(2rem, 5vw, 6rem);
    --section-gap: clamp(4rem, 10vw, 10rem);
    --border-width: 1px;
}