/* ==============================================
   CSS CUSTOM PROPERTIES — Raj's Curry House
   ============================================== */

:root {
    /* ---- Brand Colours ---- */
    --clr-primary: #7B1E2D;
    --clr-primary-dark: #5A1420;
    --clr-primary-light: #9B3040;
    --clr-gold: #D4A853;
    --clr-gold-light: #E8C87C;
    --clr-gold-dark: #B08930;

    /* ---- Background Colours ---- */
    --bg-dark: #0D0A08;
    --bg-dark-surface: #1A1210;
    --bg-warm: #FFF8F0;
    --bg-warm-alt: #F5EDE0;
    --bg-cream: #FFFDF8;

    /* ---- Text Colours ---- */
    --text-light: #FFFFFF;
    --text-warm: #F5E6D3;
    --text-muted-light: rgba(255, 255, 255, 0.6);
    --text-dark: #2C1810;
    --text-muted-dark: #8C7B6B;

    /* ---- Typography ---- */
    --font-logo: 'Kaushan Script', cursive;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ---- Spacing ---- */
    --container-max: 1200px;
    --section-pad-y: clamp(5rem, 10vw, 9rem);
    --section-pad-x: clamp(1.25rem, 5vw, 3rem);
    --gap-sm: 0.75rem;
    --gap-md: 1.5rem;
    --gap-lg: 3rem;
    --gap-xl: 5rem;

    /* ---- Transitions ---- */
    --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.2s var(--ease-out-soft);
    --transition-base: 0.35s var(--ease-out-soft);
    --transition-slow: 0.6s var(--ease-out-soft);
    --transition-slide: 2s ease-in-out;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.18);
    --shadow-gold: 0 4px 30px rgba(212, 168, 83, 0.25);

    /* ---- Border Radius ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ---- Z-Index Scale ---- */
    --z-base: 1;
    --z-above: 10;
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
}