/**
 * KhoTruyen Design System Variables & Design Tokens (v3.2.0)
 * Matching https://khotruyen.site/ Apple UI Aesthetics
 */

:root {
    /* 1. Global Font Families */
    --font-sans: 'SVN-Poppins', 'Parkinsans', 'Manrope', -apple-system, 'SF Pro Text', system-ui, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

    /* 2. KhoTruyen Brand Colors & Gradients (Light Mode) */
    --c-bg: #f5f5f7;
    --c-canvas: #ffffff;
    --c-ink: #1d1d1f;
    --c-ink-heading: #0f0f0f;
    --c-ink-48: #7a7a7a;
    --c-hairline: #e0e0e0;
    --c-divider: #f0f0f0;
    --c-chip: #f0f0f0;
    --c-chip-t: #7a7a7a;

    --c-primary: #ff7a00;
    --c-primary-h: #e56e00;
    --c-primary-tint: rgba(255, 122, 0, 0.1);
    --c-primary-gradient: linear-gradient(273.29deg, #ff8802 -35.31%, #ff4e01 100.54%);
    --c-btn-gradient: linear-gradient(270deg, #ff5301, #ff8802);
    --c-hero-accent: linear-gradient(45deg, #ff9500, #ff4400);

    --c-blue: #0066cc;
    --c-blue-h: #0071e3;
    --c-blue-tint: rgba(0, 102, 204, 0.1);
    --c-green: #34c759;
    --c-green-tint: rgba(52, 199, 89, 0.12);
    --c-warning: #ff9500;
    --c-warning-tint: rgba(255, 149, 0, 0.15);
    --c-danger: #b42323;
    --c-danger-tint: rgba(210, 54, 54, 0.12);
    --c-mob-nav: hsla(0, 0%, 100%, 0.95);

    /* 3. GDWP Engine Compatibility Mappings */
    --gdwp-primary: var(--c-primary);
    --gdwp-primary-hover: var(--c-primary-h);
    --gdwp-primary-active: #ff4e01;
    --gdwp-primary-rgb: 255, 122, 0;
    --gdwp-primary-light: var(--c-primary-tint);
    --gdwp-primary-glow: rgba(255, 122, 0, 0.25);

    --gdwp-secondary: #0f172a;
    --gdwp-accent: var(--c-primary);
    --gdwp-accent-telegram: #0088cc;
    --gdwp-success: var(--c-green);
    --gdwp-warning: var(--c-warning);
    --gdwp-danger: var(--c-danger);

    --gdwp-bg-light: var(--c-chip);
    --gdwp-bg-body: var(--c-bg);
    --gdwp-text-color: var(--c-ink);
    --gdwp-text-heading: var(--c-ink-heading);
    --gdwp-text-muted: var(--c-ink-48);
    --gdwp-card-bg: var(--c-canvas);
    --gdwp-border-color: var(--c-divider);
    --gdwp-border-color-darker: var(--c-hairline);

    --gdwp-sidebar-width: 230px;
    --gdwp-sidebar-bg: var(--c-canvas);

    --gdwp-radius-sm: 8px;
    --gdwp-radius: 12px;
    --gdwp-radius-lg: 16px;
    --gdwp-radius-xl: 20px;
    --gdwp-radius-pill: 9999px;

    --gdwp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --gdwp-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.05);
    --gdwp-shadow-hover: 0 12px 30px rgba(255, 122, 0, 0.16);
    --gdwp-shadow-popover: 0 18px 48px rgba(15, 15, 15, 0.18);
}

/* Dark Mode Tokens (Apple OLED Style) */
.dark-mode, [data-bs-theme="dark"], body.dark-mode {
    color-scheme: dark;
    --c-bg: #000000;
    --c-canvas: #1c1c1e;
    --c-ink: #f5f5f7;
    --c-ink-heading: #ffffff;
    --c-ink-48: #98989d;
    --c-hairline: hsla(0, 0%, 100%, 0.14);
    --c-divider: hsla(0, 0%, 100%, 0.08);
    --c-chip: hsla(0, 0%, 100%, 0.1);
    --c-chip-t: #98989d;
    
    --c-primary: #ff7a00;
    --c-primary-h: #ff9500;
    --c-primary-tint: rgba(255, 122, 0, 0.18);
    --c-blue: #2997ff;
    --c-blue-h: #3fa5ff;
    --c-blue-tint: rgba(41, 151, 255, 0.15);
    --c-green: #30d158;
    --c-green-tint: rgba(48, 209, 88, 0.15);
    --c-warning: #ffb340;
    --c-warning-tint: rgba(255, 159, 10, 0.18);
    --c-danger: #ff6961;
    --c-danger-tint: rgba(255, 105, 97, 0.16);
    --c-mob-nav: rgba(28, 28, 30, 0.95);

    --gdwp-bg-body: #000000;
    --gdwp-card-bg: #1c1c1e;
    --gdwp-sidebar-bg: #1c1c1e;
    --gdwp-text-color: #f5f5f7;
    --gdwp-text-heading: #ffffff;
    --gdwp-text-muted: #98989d;
    --gdwp-border-color: hsla(0, 0%, 100%, 0.08);
    --gdwp-border-color-darker: hsla(0, 0%, 100%, 0.14);
    --gdwp-bg-light: #2c2c2e;
    --gdwp-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.5);
    --gdwp-shadow-hover: 0 12px 35px rgba(255, 122, 0, 0.25);
    --gdwp-shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* Animations */
@keyframes contact-card-animation {
    0% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transform: scale(0.98) rotate(0deg); }
    12% { filter: drop-shadow(0 12px 20px rgba(255,215,0,0.3)); transform: scale(1.08) rotate(0deg); }
    18% { filter: drop-shadow(0 12px 20px rgba(255,105,180,0.4)); transform: scale(1.08) rotate(-6deg); }
    24% { filter: drop-shadow(0 12px 20px rgba(135,206,250,0.4)); transform: scale(1.08) rotate(6deg); }
    30% { filter: drop-shadow(0 14px 24px rgba(255,215,0,0.5)); transform: scale(1.08) rotate(-7deg); }
    36% { filter: drop-shadow(0 14px 24px rgba(255,105,180,0.5)); transform: scale(1.08) rotate(7deg); }
    42% { filter: drop-shadow(0 12px 20px rgba(135,206,250,0.4)); transform: scale(1.09) rotate(-5deg); }
    48% { filter: drop-shadow(0 12px 20px rgba(255,215,0,0.4)); transform: scale(1.09) rotate(5deg); }
    55% { filter: drop-shadow(0 12px 20px rgba(255,215,0,0.3)); transform: scale(1.09) rotate(0deg); }
    65% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transform: scale(0.98) rotate(0deg); }
    100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); transform: scale(0.98) rotate(0deg); }
}

@keyframes sidebar-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

@keyframes home-hero-marquee-scroll {
    0% { transform: translateZ(0); }
    100% { transform: translate3d(-50%, 0, 0); }
}