@property --gold-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* ----------------------------------------------------------------------
       1. Base Luxury Palette - The Royal Trilogy:
          Charcoal (ذغالی), Champagne Gold (طلایی), Imperial Emerald (زمردی)
       ---------------------------------------------------------------------- */
    --talayar-charcoal: #0C0D10;
    --talayar-charcoal-surface: #14161D;
    --talayar-charcoal-elevated: #1C1F28;
    --talayar-charcoal-border: rgba(255, 255, 255, 0.08);

    --talayar-bg-base: var(--talayar-charcoal);
    --talayar-bg-surface: var(--talayar-charcoal-surface);
    --talayar-bg-surface-elevated: var(--talayar-charcoal-elevated);

    --talayar-gold: #C5A880;
    --talayar-gold-light: #E5D5B8;
    --talayar-gold-dark: #9A7E56;
    --talayar-gold-gradient: linear-gradient(135deg, #ECC880 0%, #C5A880 50%, #8A6836 100%);
    --talayar-gold-metallic: linear-gradient(135deg, #ECC880 0%, #C5A880 50%, #8A6836 100%);
    --talayar-gold-conic: conic-gradient(from var(--gold-angle), #ECC880, #C5A880, #8A6836, #ECC880);
    --talayar-gold-radial: radial-gradient(circle at center, rgba(197, 168, 128, 0.28) 0%, transparent 70%);

    --talayar-emerald: #0D2818;
    --talayar-emerald-deep: #06190F;
    --talayar-emerald-accent: #10B981;
    --talayar-emerald-glass: rgba(13, 40, 24, 0.55);
    --talayar-emerald-glow: rgba(16, 185, 129, 0.25);
    --talayar-emerald-gradient: linear-gradient(135deg, #10B981 0%, #0D2818 50%, #06190F 100%);

    --talayar-ivory: #F6F1E7;

    --talayar-text-primary: #F7F8F9;
    --talayar-text-secondary: #D1D5DB;
    --talayar-text-muted: #9B9FA8;
    --talayar-text-gold: #DFBA6B;

    /* ----------------------------------------------------------------------
       2. Liquid Glass & Glassmorphism Tokens
       ---------------------------------------------------------------------- */
    --talayar-glass-bg: rgba(22, 24, 27, 0.65);
    --talayar-glass-bg-hover: rgba(31, 34, 39, 0.78);
    --talayar-glass-header: rgba(14, 15, 17, 0.72);
    --talayar-glass-blur: blur(20px) saturate(180%);
    --talayar-glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --talayar-glass-border-gold: 1px solid rgba(201, 162, 75, 0.35);
    --talayar-specular: inset 0 1px 1px rgba(255, 255, 255, 0.12);
    --talayar-specular-gold: inset 0 1px 1px rgba(223, 186, 107, 0.3);

    /* ----------------------------------------------------------------------
       3. Shadows & Atmospheric Glow
       ---------------------------------------------------------------------- */
    --talayar-glow-gold: 0 0 35px rgba(201, 162, 75, 0.22);
    --talayar-glow-emerald: 0 0 30px rgba(15, 157, 110, 0.25);
    --talayar-shadow-card: 0 20px 45px -15px rgba(0, 0, 0, 0.65);
    --talayar-shadow-elevated: 0 30px 60px -20px rgba(0, 0, 0, 0.85);

    /* ----------------------------------------------------------------------
       4. Typography Tokens (Self-Hosted)
       ---------------------------------------------------------------------- */
    --talayar-font-fa: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --talayar-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

    /* ----------------------------------------------------------------------
       5. Layout, Spacing & Geometry
       ---------------------------------------------------------------------- */
    --talayar-container-max: 1320px;
    --talayar-header-height: 96px;
    --talayar-header-logo-height: 58px;
    --talayar-radius-card: 22px;
    --talayar-radius-button: 999px; /* Pill */
    --talayar-radius-sm: 10px;

    /* ----------------------------------------------------------------------
       6. Transitions & Easing
       ---------------------------------------------------------------------- */
    --talayar-transition-fast: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --talayar-transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --talayar-transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Light Luxury Mode (Ivory Cream, Burnished Gold, Forest Emerald)
   -------------------------------------------------------------------------- */
html[data-theme="light"],
body.talayar-theme-light {
    --talayar-bg-base: #F6F1E7;
    --talayar-bg-surface: #FFFFFF;
    --talayar-bg-surface-elevated: #EDE7DC;

    --talayar-gold: #9A7424;
    --talayar-gold-light: #B88E35;
    --talayar-gold-dark: #7A5B1C;
    --talayar-gold-gradient: linear-gradient(135deg, #B88E35 0%, #9A7424 50%, #7A5B1C 100%);
    --talayar-gold-radial: radial-gradient(circle at center, rgba(154, 116, 36, 0.15) 0%, transparent 70%);

    --talayar-emerald: #0B5C3E;
    --talayar-emerald-deep: #07422C;
    --talayar-emerald-gradient: linear-gradient(135deg, #107C55 0%, #0B5C3E 50%, #07422C 100%);

    --talayar-text-primary: #18191B;
    --talayar-text-secondary: #3D4046;
    --talayar-text-muted: #565961;
    --talayar-text-gold: #9A7424;

    --talayar-glass-bg: rgba(255, 255, 255, 0.72);
    --talayar-glass-bg-hover: rgba(255, 255, 255, 0.88);
    --talayar-glass-header: rgba(246, 241, 231, 0.82);
    --talayar-glass-border: 1px solid rgba(154, 116, 36, 0.15);
    --talayar-glass-border-gold: 1px solid rgba(154, 116, 36, 0.4);
    --talayar-specular: inset 0 1px 1px rgba(255, 255, 255, 0.95);
    --talayar-specular-gold: inset 0 1px 1px rgba(184, 142, 53, 0.35);

    --talayar-glow-gold: 0 0 25px rgba(154, 116, 36, 0.16);
    --talayar-glow-emerald: 0 0 22px rgba(11, 92, 62, 0.18);
    --talayar-shadow-card: 0 20px 45px -15px rgba(154, 116, 36, 0.12);
    --talayar-shadow-elevated: 0 30px 60px -20px rgba(154, 116, 36, 0.18);
}

/* --------------------------------------------------------------------------
   7. Advanced Dynamic @property Animation & Shimmer
   -------------------------------------------------------------------------- */
@keyframes talayar-rotate-gold {
    0% { --gold-angle: 0deg; }
    100% { --gold-angle: 360deg; }
}

.talayar-metallic-border {
    border: 1px solid transparent;
    background-image: linear-gradient(var(--talayar-bg-surface), var(--talayar-bg-surface)), var(--talayar-gold-conic);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: talayar-rotate-gold 10s linear infinite;
}

/* --------------------------------------------------------------------------
   8. Mobile Performance & Low-GPU Optimization
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --talayar-glass-blur: blur(8px) saturate(130%);
        --talayar-shadow-card: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
    }
    .talayar-metallic-border {
        animation: none !important;
        border-color: rgba(197, 168, 128, 0.35) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}