/*
 * Color theme tokens — dark & light
 * Homa CMS · shared by editorial, news-design-system, redesign-dark
 */

/* Shared structural tokens (theme-agnostic) */
:root {
    --hx-radius:        0.5rem;
    --hx-radius-lg:     0.875rem;
    --hx-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --hx-ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --hx-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --news-radius:      0.5rem;
    --news-radius-lg:   0.875rem;
    --news-header-height: auto;
    --news-transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-duration: 0.35s;
}

/* ─── Dark (default) ─── */
html.dark-theme {
    --hx-bg:            #030508;
    --hx-elevated:      #080d18;
    --hx-surface:       #0c1220;
    --hx-surface-2:     #111c30;
    --hx-border:        rgba(255, 255, 255, 0.055);
    --hx-border-soft:   rgba(255, 255, 255, 0.10);
    --hx-accent:        #00c2ff;
    --hx-accent-glow:   rgba(0, 194, 255, 0.28);
    --hx-accent-dim:    rgba(0, 194, 255, 0.10);
    --hx-accent-2:      #6366f1;
    --hx-accent-2-glow: rgba(99, 102, 241, 0.22);
    --hx-red:           #ef4444;
    --hx-red-glow:      rgba(239, 68, 68, 0.30);
    --hx-text:          #f0f6fc;
    --hx-text-muted:    #8b929e;
    --hx-text-dim:      #3d4454;

    --hx-header-glass:           rgba(3, 5, 8, 0.75);
    --hx-header-glass-scrolled:  rgba(3, 5, 8, 0.92);
    --hx-header-shadow-soft:     0 1px 0 var(--hx-border), 0 8px 32px rgba(0, 0, 0, 0.4);
    --hx-header-shadow-strong:   0 1px 0 var(--hx-border), 0 16px 48px rgba(0, 0, 0, 0.6);
    --hx-ticker-bg:              linear-gradient(90deg, #0c0f1a 0%, #0e1625 50%, #0c0f1a 100%);
    --hx-ticker-fade:            #0c0f1a;
    --hx-ticker-text:            rgba(255, 255, 255, 0.75);
    --hx-featured-panel-bg:      linear-gradient(165deg, rgba(12, 18, 32, 0.95) 0%, var(--hx-bg) 100%);
    --hx-featured-glow-1:        rgba(0, 194, 255, 0.1);
    --hx-featured-glow-2:        rgba(99, 102, 241, 0.08);
    --hx-hero-empty-bg:          linear-gradient(135deg, #080d18 0%, #0c1220 50%, #030508 100%);
    --hx-hero-scrim:             linear-gradient(to top, rgba(3, 5, 8, 0.96) 0%, rgba(3, 5, 8, 0.35) 42%, transparent 72%),
                                 linear-gradient(to left, rgba(3, 5, 8, 0.75) 0%, transparent 55%);
    --hx-card-glass:             rgba(8, 13, 24, 0.65);
    --hx-section-aurora:         linear-gradient(160deg, rgba(0, 194, 255, 0.06) 0%, rgba(99, 102, 241, 0.08) 45%, rgba(3, 5, 8, 0.9) 100%);
    --hx-shadow-card:            0 12px 32px rgba(0, 0, 0, 0.4);
    --hx-shadow-dropdown:        0 20px 60px rgba(0, 0, 0, 0.6);
    --hx-grain-opacity:          0.022;
    --hx-overlay-backdrop:       rgba(0, 0, 0, 0.5);
    --hx-hero-title:             #fff;
    --hx-hero-title-hover:       #bae6fd;
    --hx-hero-lead:              rgba(255, 255, 255, 0.72);
    --hx-hero-foot-border:       rgba(255, 255, 255, 0.1);
    --hx-stroke-decorative:      rgba(0, 194, 255, 0.08);
    --hx-dropdown-bg:            rgba(12, 18, 32, 0.95);
    --hx-input-bg:               rgba(255, 255, 255, 0.04);
    --hx-mobile-search-bg:       rgba(3, 5, 8, 0.6);
    --hx-mobile-panel-bg:        rgba(8, 13, 24, 0.98);
    --hx-mobile-submenu-bg:      rgba(3, 5, 8, 0.5);
    --hx-nav-hover-bg:           rgba(0, 194, 255, 0.06);
    --hx-card-scrim:             linear-gradient(to top, rgba(3, 5, 8, 0.95) 0%, rgba(3, 5, 8, 0.2) 55%, transparent 100%);
    --hx-card-scrim-soft:        linear-gradient(to top, rgba(3, 5, 8, 0.92) 0%, transparent 70%);
    --hx-featured-pick-bg:       rgba(8, 13, 24, 0.55);

    --news-bg:            #030508;
    --news-bg-elevated:   #080d18;
    --news-surface:       #0c1220;
    --news-surface-hover: #111c30;
    --news-border:        rgba(255, 255, 255, 0.055);
    --news-border-strong: rgba(255, 255, 255, 0.10);
    --news-text:          #f0f6fc;
    --news-text-muted:    #8b929e;
    --news-text-dim:      #3d4454;
    --news-accent:        #00c2ff;
    --news-accent-hover:  #00a8e0;
    --news-accent-dim:    rgba(0, 194, 255, 0.10);
    --news-accent-glow:   rgba(0, 194, 255, 0.28);
    --news-purple-glow:   rgba(99, 102, 241, 0.20);

    color-scheme: dark;
}

/* ─── Light ─── */
html.light-theme {
    --hx-bg:            #f1f5f9;
    --hx-elevated:      #e8eef4;
    --hx-surface:       #ffffff;
    --hx-surface-2:     #e2e8f0;
    --hx-border:        rgba(15, 23, 42, 0.08);
    --hx-border-soft:   rgba(15, 23, 42, 0.14);
    --hx-accent:        #0284c7;
    --hx-accent-glow:   rgba(2, 132, 199, 0.22);
    --hx-accent-dim:    rgba(2, 132, 199, 0.08);
    --hx-accent-2:      #4f46e5;
    --hx-accent-2-glow: rgba(79, 70, 229, 0.15);
    --hx-red:           #dc2626;
    --hx-red-glow:      rgba(220, 38, 38, 0.25);
    --hx-text:          #0f172a;
    --hx-text-muted:    #475569;
    --hx-text-dim:      #94a3b8;

    --hx-header-glass:           rgba(255, 255, 255, 0.88);
    --hx-header-glass-scrolled:  rgba(255, 255, 255, 0.96);
    --hx-header-shadow-soft:     0 1px 0 var(--hx-border), 0 4px 24px rgba(15, 23, 42, 0.08);
    --hx-header-shadow-strong:   0 1px 0 var(--hx-border), 0 8px 32px rgba(15, 23, 42, 0.12);
    --hx-ticker-bg:              linear-gradient(90deg, #e8eef4 0%, #f8fafc 50%, #e8eef4 100%);
    --hx-ticker-fade:            #f8fafc;
    --hx-ticker-text:            #475569;
    --hx-featured-panel-bg:      linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, var(--hx-bg) 100%);
    --hx-featured-glow-1:        rgba(2, 132, 199, 0.06);
    --hx-featured-glow-2:        rgba(79, 70, 229, 0.05);
    --hx-hero-empty-bg:          linear-gradient(135deg, #e2e8f0 0%, #f8fafc 50%, #f1f5f9 100%);
    --hx-hero-scrim:             linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.35) 42%, transparent 72%),
                                 linear-gradient(to left, rgba(15, 23, 42, 0.55) 0%, transparent 55%);
    --hx-card-glass:             rgba(255, 255, 255, 0.92);
    --hx-section-aurora:         linear-gradient(160deg, rgba(2, 132, 199, 0.05) 0%, rgba(79, 70, 229, 0.04) 45%, rgba(241, 245, 249, 0.95) 100%);
    --hx-shadow-card:            0 8px 24px rgba(15, 23, 42, 0.08);
    --hx-shadow-dropdown:        0 16px 40px rgba(15, 23, 42, 0.12);
    --hx-grain-opacity:          0.04;
    --hx-overlay-backdrop:       rgba(15, 23, 42, 0.35);
    --hx-hero-title:             #fff;
    --hx-hero-title-hover:       #e0f2fe;
    --hx-hero-lead:              rgba(255, 255, 255, 0.88);
    --hx-hero-foot-border:       rgba(255, 255, 255, 0.2);
    --hx-stroke-decorative:      rgba(2, 132, 199, 0.12);
    --hx-dropdown-bg:            rgba(255, 255, 255, 0.98);
    --hx-input-bg:               rgba(15, 23, 42, 0.04);
    --hx-mobile-search-bg:       rgba(255, 255, 255, 0.75);
    --hx-mobile-panel-bg:        rgba(255, 255, 255, 0.98);
    --hx-mobile-submenu-bg:      rgba(241, 245, 249, 0.95);
    --hx-nav-hover-bg:           rgba(2, 132, 199, 0.06);
    --hx-card-scrim:             linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.15) 55%, transparent 100%);
    --hx-card-scrim-soft:        linear-gradient(to top, rgba(15, 23, 42, 0.75) 0%, transparent 70%);
    --hx-featured-pick-bg:       rgba(255, 255, 255, 0.85);

    --news-bg:            #f1f5f9;
    --news-bg-elevated:   #e8eef4;
    --news-surface:       #ffffff;
    --news-surface-hover: #f1f5f9;
    --news-border:        rgba(15, 23, 42, 0.08);
    --news-border-strong: rgba(15, 23, 42, 0.14);
    --news-text:          #0f172a;
    --news-text-muted:    #475569;
    --news-text-dim:      #94a3b8;
    --news-accent:        #0284c7;
    --news-accent-hover:  #0369a1;
    --news-accent-dim:    rgba(2, 132, 199, 0.08);
    --news-accent-glow:   rgba(2, 132, 199, 0.2);
    --news-purple-glow:   rgba(79, 70, 229, 0.12);

    color-scheme: light;
}

/* Smooth color transitions when switching theme */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
        background-color var(--theme-transition-duration) var(--hx-ease),
        color var(--theme-transition-duration) var(--hx-ease),
        border-color var(--theme-transition-duration) var(--hx-ease),
        box-shadow var(--theme-transition-duration) var(--hx-ease),
        fill var(--theme-transition-duration) var(--hx-ease),
        stroke var(--theme-transition-duration) var(--hx-ease) !important;
}