/**
 * chouhantaha.co.in — Royal Futuristic Professional design system
 * Shared tokens + base chrome for every public page
 */

:root {
    /* Royal palette */
    --royal-void: #030711;
    --royal-deep: #070d1a;
    --royal-navy: #0a1628;
    --royal-navy-mid: #122038;
    --royal-indigo: #1a2d4d;
    --royal-gold: #c9a962;
    --royal-gold-light: #e8d5a3;
    --royal-gold-dark: #8a7340;
    --royal-platinum: #e8ecf2;
    --royal-silver: #9aa6ba;
    --royal-muted: #7b8798;
    --royal-accent: #6ea8ff;
    --royal-accent-soft: rgba(110, 168, 255, 0.14);

    /* Glass / frost */
    --royal-glass: rgba(255, 255, 255, 0.05);
    --royal-glass-strong: rgba(255, 255, 255, 0.09);
    --royal-glass-border: rgba(255, 255, 255, 0.11);
    --royal-glass-border-gold: rgba(201, 169, 98, 0.32);
    --royal-blur: 20px;
    --royal-radius: 18px;
    --royal-radius-sm: 12px;
    --royal-shadow: 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --royal-shadow-hover: 0 22px 55px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(201, 169, 98, 0.18);

    /* Typography */
    --royal-font-display: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
    --royal-font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* Legacy aliases (classic style.css) */
    --bg-dark: var(--royal-void);
    --bg-card: var(--royal-glass);
    --text-main: var(--royal-platinum);
    --text-muted: var(--royal-silver);
    --accent-gold: var(--royal-gold);
    --accent-gold-hover: var(--royal-gold-light);
    --font-heading: var(--royal-font-display);
    --font-body: var(--royal-font-body);

    /* Executive aliases */
    --exec-bg: var(--royal-void);
    --exec-bg-elevated: var(--royal-deep);
    --exec-bg-card: rgba(18, 32, 56, 0.72);
    --exec-border: var(--royal-glass-border-gold);
    --exec-gold: var(--royal-gold);
    --exec-gold-light: var(--royal-gold-light);
    --exec-gold-dark: var(--royal-gold-dark);
    --exec-text: var(--royal-platinum);
    --exec-muted: var(--royal-silver);
    --exec-navy: var(--royal-navy);
    --font-display: var(--royal-font-display);
    --font-sans: var(--royal-font-body);

    /* Frost aliases */
    --frost-bg: var(--royal-void);
    --frost-bg-2: var(--royal-deep);
    --frost-surface: var(--royal-glass);
    --frost-surface-strong: var(--royal-glass-strong);
    --frost-border: var(--royal-glass-border);
    --frost-border-gold: var(--royal-glass-border-gold);
    --frost-glow: var(--royal-accent-soft);
    --frost-glow-gold: rgba(201, 169, 98, 0.2);
    --frost-blur: var(--royal-blur);
    --frost-radius: var(--royal-radius);
    --frost-radius-sm: var(--royal-radius-sm);
    --frost-shadow: var(--royal-shadow);
    --frost-shadow-hover: var(--royal-shadow-hover);
}

html {
    scroll-behavior: smooth;
}

body.royal-site,
body.frost-theme,
body.executive-body {
    background-color: var(--royal-void);
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -15%, rgba(56, 110, 200, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 100% 85%, rgba(201, 169, 98, 0.09) 0%, transparent 52%),
        linear-gradient(180deg, var(--royal-deep) 0%, var(--royal-void) 100%);
    color: var(--royal-platinum);
    font-family: var(--royal-font-body);
}

body.royal-site main,
body.frost-theme main,
body.executive-body.frost-site main {
    position: relative;
    z-index: 1;
}

/* Royal glass panel utility */
.royal-glass,
.frost-glass {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(var(--royal-blur)) saturate(165%);
    -webkit-backdrop-filter: blur(var(--royal-blur)) saturate(165%);
    border: 1px solid var(--royal-glass-border);
    border-radius: var(--royal-radius);
    box-shadow: var(--royal-shadow);
}

.royal-glass--gold-edge {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--royal-shadow), inset 0 1px 0 rgba(201, 169, 98, 0.15);
}

.royal-section-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--royal-gold);
    margin-bottom: 0.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--royal-gold);
    color: var(--royal-void);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.royal-divider {
    width: min(240px, 60%);
    height: 1px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
    opacity: 0.65;
}

.royal-nav {
    background: rgba(3, 7, 17, 0.58);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.royal-nav.is-scrolled {
    background: rgba(3, 7, 17, 0.88);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42);
}

.royal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(3, 7, 17, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.royal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-family: var(--royal-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.royal-btn--gold {
    background: linear-gradient(135deg, var(--royal-gold) 0%, var(--royal-gold-dark) 100%);
    color: #0a0e14;
    border: none;
    box-shadow: 0 6px 24px rgba(201, 169, 98, 0.28);
}

.royal-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(201, 169, 98, 0.38);
    color: #0a0e14;
}

.royal-btn--outline {
    background: rgba(255, 255, 255, 0.04);
    color: var(--royal-gold-light);
    border: 1px solid var(--royal-glass-border-gold);
}

.royal-btn--outline:hover {
    background: rgba(201, 169, 98, 0.1);
    color: var(--royal-gold-light);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .royal-btn--gold:hover,
    .royal-btn--outline:hover { transform: none; }
}