/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — SoiMenh "OBSIDIAN & GOLD"
   Brand: #c9a96e Champagne Gold | Font: Lexend Deca
   Palette: Pure obsidian black + gold accents — NO purple
   v5.0.0 — Complete redesign "Thiên Mệnh"
   ═══════════════════════════════════════════════════════════ */


:root {
    /* ── PRIMARY — Champagne Gold ── */
    --color-primary-50:  #fdf9f1;
    --color-primary-100: #f7edda;
    --color-primary-200: #eddbb5;
    --color-primary-300: #e0c88f;
    --color-primary-400: #d4b876; /* Bright gold — CTA, highlights */
    --color-primary-500: #c9a96e; /* Brand color — Champagne Gold */
    --color-primary-600: #b0935a;
    --color-primary-700: #8b7446;
    --color-primary-800: #6b5935;
    --color-primary-900: #4a3e25;

    /* ── NEUTRAL — Warm-tinted (gold undertone) ── */
    --color-neutral-50:  #F5F0E8;
    --color-neutral-100: #E8E0D0;
    --color-neutral-200: #C4BAA8;
    --color-neutral-300: #9E9484;
    --color-neutral-400: #7A7164;
    --color-neutral-500: #5C5548;
    --color-neutral-600: #433D33;
    --color-neutral-700: #2E2A23;
    --color-neutral-800: #1F1C17;
    --color-neutral-900: #151311;
    --color-neutral-950: #0c0c0a;

    /* ── SEMANTIC ── */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
    --color-info:    var(--color-primary-500);

    /* ── NGU HANH ENERGY COLORS — Element system ── */
    --color-element-kim:  #c9a96e;   /* Metal — gold */
    --color-element-moc:  #4caf50;   /* Wood — green */
    --color-element-thuy: #42a5f5;   /* Water — blue */
    --color-element-hoa:  #ef5350;   /* Fire — red */
    --color-element-tho:  #ff9800;   /* Earth — amber */

    /* ── DEPTH ACCENTS — Obsidian & Gold (NO purple) ── */
    --color-depth-warm:    #0f0f0d;    /* Deep warm black — replaces mystic-purple */
    --color-depth-bronze:  #1a1814;    /* Bronze-black — replaces cosmic-blue */
    --color-gold-mist:     rgba(212, 175, 55, 0.08);   /* Gold ambient glow */
    --color-bronze-mist:   rgba(190, 169, 142, 0.06);  /* Bronze ambient glow */
    --color-gold-glow:     rgba(212, 175, 55, 0.12);   /* Stronger gold for hero */

    /* ── SURFACES — Obsidian Black ── */
    --surface-primary:    #0c0c0a;  /* Page background — obsidian black */
    --surface-secondary:  #111110;  /* Sections — slightly lighter */
    --surface-elevated:   #1a1814;  /* Cards, modals — warm charcoal */
    --surface-overlay:    rgba(12, 12, 10, 0.92);

    /* ── TEXT — Warm tones ── */
    --text-primary:   #F5F0E8;  /* Main text — warm white */
    --text-secondary: #9E9484;  /* Secondary — warm gray */
    --text-muted:     #8A8278;  /* Muted — dim warm (contrast ≥4.5:1 WCAG AA on #0c0c0a) */
    --text-inverse:   #0c0c0a;
    --text-link:      var(--color-primary-400);
    --text-gold:      var(--color-primary-300); /* For luxury headings */

    /* ── GLASSMORPHISM — Pure dark glass (no purple) ── */
    --glass-bg:       rgba(12, 12, 10, 0.85);  /* Obsidian glass — NO purple tint */
    --glass-border:   rgba(201, 169, 110, 0.18);
    --glass-blur:     20px;
    --glass-shadow:   0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-highlight: inset 0 1px 0 rgba(201, 169, 110, 0.1);

    /* ── TYPOGRAPHY ── */
    --font-family:      'Lexend Deca', system-ui, -apple-system, sans-serif;
    --font-display:     'Lexend Deca', system-ui, sans-serif;
    --font-calligraphy: 'Lexend Deca', system-ui, sans-serif;
    --font-hero:        'Lexend Deca', system-ui, sans-serif;

    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg:   1.125rem;  /* 18px */
    --font-size-xl:   1.25rem;   /* 20px */
    --font-size-2xl:  1.5rem;    /* 24px */
    --font-size-3xl:  1.875rem;  /* 30px */
    --font-size-4xl:  2.25rem;   /* 36px */
    --font-size-5xl:  3rem;      /* 48px */
    --font-size-6xl:  3.75rem;   /* 60px */
    --font-size-7xl:  4.5rem;    /* 72px — hero display */
    --font-size-8xl:  5.5rem;    /* 88px — hero display max */

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1.2;
    --line-height-normal: 1.6;
    --line-height-loose:  1.8;

    /* ── SPACING ── */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px — premium section spacing (skill: frontend-design) */
    --space-32: 8rem;     /* 128px — hero/CTA breathing room */

    /* ── BORDER RADIUS ── */
    --radius-sm:   4px;   /* Tighter — luxury feel */
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── SHADOWS — Gold-tinted luxury ── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px rgba(201, 169, 110, 0.25), 0 0 60px rgba(201, 169, 110, 0.08);
    --shadow-glow-lg: 0 0 40px rgba(201, 169, 110, 0.35), 0 0 80px rgba(201, 169, 110, 0.12);
    /* 3-layer narrative shadow — skill: frontend-design */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(201, 169, 110, 0.08);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.2), 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(201, 169, 110, 0.15), 0 0 40px rgba(201, 169, 110, 0.08);

    /* ── GOLD GRADIENT — Luxury signature ── */
    --gradient-gold: linear-gradient(135deg, #c9a96e, #d4b876, #e0c88f, #d4b876, #c9a96e);
    --gradient-gold-text: linear-gradient(135deg, #e0c88f 0%, #d4b876 40%, #c9a96e 60%, #e0c88f 100%);
    --gradient-gold-subtle: linear-gradient(135deg, rgba(201, 169, 110, 0.1), rgba(212, 184, 118, 0.05));
    /* Shimmer gradient for hero text — skill: ui-ux-pro-max */
    --gradient-gold-shimmer: linear-gradient(110deg, #c9a96e 0%, #f4d03f 25%, #fff8dc 50%, #f4d03f 75%, #c9a96e 100%);

    /* ── TRANSITIONS ── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── LAYOUT ── */
    --container-max: 1200px;
    --container-narrow: 800px;
    --header-bar: 88px; /* Thiên Môn v3 — actual header element height */
    --cbar-height: 36px; /* Thanh Thiên Cơ — Celestial Bar */
    --header-height: 124px; /* 88 header + 36 cbar — used for content offset (sticky, padding) */

    /* ── Z-INDEX ── */
    --z-header:  100;
    --z-mobile:  200;
    --z-modal:   300;
    --z-toast:   400;
    --z-loader:  500;
}

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

/* ── LUXURY ANIMATIONS ── */
@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gentlePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── v5 OBSIDIAN & GOLD — New animations ── */
@keyframes borderRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringGlowPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

@keyframes constellationPulse {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.12; }
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroVVMReveal {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to { opacity: 0.28; transform: translate(-50%, -50%) scale(1); }
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes portalAuraPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}