/* LifeVed Devotional — Design System Variables (Premium 9.5+ Target)
   Inspired by: Vama app, temple architecture, premium devotional aesthetics
   Mobile-first, touch-optimized, immersive feel */

:root {
    /* === COLORS: Warm Temple Palette === */
    --bg-primary: #fdf8f0;
    --bg-secondary: #f8f1e6;
    --bg-card: #ffffff;
    --bg-card-hover: #fffbf5;
    --bg-deep: #1a0f05;

    /* Accent: Deep Saffron / Temple Orange */
    --accent: #d4520a;
    --accent-hover: #b8440a;
    --accent-light: #f5a623;
    --accent-glow: rgba(212,82,10,0.08);
    --accent-gradient: linear-gradient(135deg, #f5a623 0%, #d4520a 50%, #a63d0a 100%);

    /* Gold / Temple */
    --temple-gold: #c6993e;
    --temple-gold-light: #e8c872;
    --gold-gradient: linear-gradient(135deg, #f7d56b, #c6993e);

    /* Spiritual Purple (secondary) */
    --spiritual: #6b21a8;
    --spiritual-light: #a855f7;
    --spiritual-glow: rgba(107,33,168,0.08);

    /* Status */
    --success: #16a34a;
    --success-bg: rgba(22,163,74,0.08);
    --warning: #d97706;
    --error: #dc2626;

    /* Text */
    --text-primary: #1c0f05;
    --text-secondary: #5c3d1e;
    --text-muted: #8b6e4e;
    --text-hindi: #1a0a00;
    --text-on-accent: #ffffff;
    --text-on-dark: #f5ede3;

    /* Border */
    --border: rgba(198,153,62,0.18);
    --border-strong: rgba(212,82,10,0.22);
    --border-card: rgba(198,153,62,0.12);

    /* Glass/Frosted */
    --glass: rgba(255,255,255,0.92);
    --glass-dark: rgba(26,15,5,0.85);

    /* === SPACING === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* === TYPOGRAPHY === */
    --font-body: 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: Georgia, 'Noto Serif Devanagari', serif;
    --fs-xs: 0.7rem;
    --fs-sm: 0.82rem;
    --fs-base: 0.95rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.85rem;
    --fs-3xl: 2.2rem;
    --fs-hindi: 1.1rem;
    --fs-hindi-lg: 1.35rem;
    --lh-tight: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 2.0;

    /* === RADIUS === */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 100px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 8px rgba(26,15,5,0.04);
    --shadow: 0 4px 16px rgba(26,15,5,0.06);
    --shadow-md: 0 8px 24px rgba(26,15,5,0.08);
    --shadow-lg: 0 16px 48px rgba(26,15,5,0.12);
    --shadow-xl: 0 24px 64px rgba(26,15,5,0.16);
    --shadow-glow: 0 4px 20px rgba(212,82,10,0.1);
    --shadow-gold: 0 4px 20px rgba(198,153,62,0.15);
    --shadow-inner: inset 0 2px 4px rgba(26,15,5,0.04);

    /* === ANIMATION === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;
    --duration-slower: 0.6s;

    /* === LAYOUT === */
    --max-width: 1200px;
    --content-width: 720px;
    --nav-height: 72px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* === Z-INDEX === */
    --z-nav: 100;
    --z-header: 90;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 150;
}

/* Dark mode for reader (scoped, not site-wide) */
.reader-dark {
    --bg-card: #1a1208;
    --text-primary: #f5ede3;
    --text-secondary: #d4c4a8;
    --text-hindi: #ffe8c4;
    --border: rgba(198,153,62,0.25);
}
