/* ============================================
   SERAPHIM VIETNAM - COMPLETE PREMIUM STYLESHEET
   Restored with all design elements
   ============================================ */

/* ============================================
   DAY/NIGHT ADAPTIVE THEMING SYSTEM
   Auto-detects user's local time
   Day: 6am-6pm | Night: 6pm-6am
   ============================================ */

:root {
    /* Core Colors */
    --void: #000000;
    --surface: #0a0a0a;
    --surface-elevated: #111111;
    --border: rgba(255,255,255,0.08);
    --border-glow: rgba(255,255,255,0.15);
    --terminal-green: #00ff88;
    --terminal-silver: #c8d4e0;
    --terminal-silver-bright: #e8f0f8;
    --text-bright: #ffffff;
    --text-secondary: #b8c0c8;
    --text-muted: #8a95a5;
    --text-dim: #404448;
    --glow-green: rgba(0, 255, 136, 0.4);
    --glow-silver: rgba(200, 212, 224, 0.3);
    --zalo-blue: #0068FF;
    
    /* === NIGHT MODE (Default) === */
    /* Glass tints */
    --glass-primary: rgba(0, 100, 150, 0.08);
    --glass-secondary: rgba(0, 50, 100, 0.05);
    --glass-accent: rgba(0, 80, 120, 0.06);
    --glass-base: rgba(5, 8, 12, 0.92);
    
    /* Ambient glows */
    --ambient-glow-1: rgba(0, 200, 255, 0.08);
    --ambient-glow-2: rgba(0, 255, 136, 0.06);
    --ambient-glow-3: rgba(100, 150, 255, 0.05);
    
    /* Edge highlights */
    --edge-highlight: rgba(0, 200, 255, 0.4);
    --edge-prismatic-1: rgba(0, 255, 136, 0.3);
    --edge-prismatic-2: rgba(0, 200, 255, 0.4);
    --edge-prismatic-3: rgba(100, 150, 255, 0.3);
    
    /* Particle colors */
    --particle-primary: rgba(0, 255, 136, 0.8);
    --particle-secondary: rgba(0, 200, 255, 0.6);
    --particle-tertiary: rgba(150, 200, 255, 0.5);
    
    /* Backdrop filter */
    --glass-blur: blur(20px) saturate(180%) brightness(95%);
    --glass-blur-heavy: blur(30px) saturate(200%) brightness(90%);
    
    /* Time indicator */
    --time-mode: 'night';

    /* Typography Scale - Golden Ratio */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    --text-2xl: clamp(1.5rem, 1rem + 2.5vw, 2.625rem);
    --text-3xl: clamp(2rem, 1rem + 4vw, 4.25rem);
    --text-4xl: clamp(2.5rem, 1rem + 6vw, 6.875rem);

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.2em;

    /* Line Heights */
    --leading-none: 1.0;
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Fibonacci Spacing */
    --space-xs: 8px;
    --space-sm: 13px;
    --space-md: 21px;
    --space-lg: 34px;
    --space-xl: 55px;
    --space-2xl: 89px;
    --space-3xl: 144px;
}

/* === DAY MODE === */
html.daytime {
    /* Warmer glass tints for day */
    --glass-primary: rgba(255, 200, 150, 0.06);
    --glass-secondary: rgba(255, 180, 120, 0.04);
    --glass-accent: rgba(255, 220, 180, 0.05);
    --glass-base: rgba(8, 10, 15, 0.88);
    
    /* Warm ambient glows */
    --ambient-glow-1: rgba(255, 180, 100, 0.1);
    --ambient-glow-2: rgba(255, 200, 80, 0.08);
    --ambient-glow-3: rgba(255, 220, 150, 0.06);
    
    /* Warm edge highlights */
    --edge-highlight: rgba(255, 180, 100, 0.5);
    --edge-prismatic-1: rgba(255, 200, 100, 0.4);
    --edge-prismatic-2: rgba(255, 150, 80, 0.3);
    --edge-prismatic-3: rgba(255, 220, 150, 0.35);
    
    /* Warm particles */
    --particle-primary: rgba(255, 200, 100, 0.8);
    --particle-secondary: rgba(255, 180, 80, 0.6);
    --particle-tertiary: rgba(255, 220, 150, 0.5);
    
    /* Slightly brighter backdrop for day */
    --glass-blur: blur(20px) saturate(160%) brightness(100%);
    --glass-blur-heavy: blur(30px) saturate(180%) brightness(95%);
    
    --time-mode: 'day';
}

/* Transition for smooth day/night changes */
.header, .site-header,
.footer, .site-footer,
.header-row-2 {
    /* .mobile-menu-overlay removed - moved to self-contained template v30 */
    transition: 
        background 1.5s ease,
        box-shadow 1.5s ease,
        border-color 1s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'JetBrains Mono', 'Noto Sans KR', monospace;
    background: var(--void);
    color: var(--text-secondary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Korean language specific styling */
html[lang="ko"] body,
html[lang="ko"] .page-title,
html[lang="ko"] .section-title,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4 {
    font-family: 'Noto Sans KR', 'JetBrains Mono', sans-serif;
    word-break: keep-all;
}
/* Domain-conditional display */
[data-active-domain="intl"] [data-domain="vn"] { display: none !important; }
[data-active-domain="vn"] [data-domain="intl"] { display: none !important; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 50px); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }