/*
 * Design Tokens — per-theme CSS custom properties
 * Loaded as a static file; DB admin overrides are injected inline AFTER this file.
 * Golden Rule: Components use var(--nh-*). Themes define the values.
 */

/* ═══════════════════════════════════════════════════════════
   DEFAULT THEME (dark)
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="default"] {
    --nh-primary:        #203526;
    --nh-secondary:      #51ba74;
    --nh-accent:         #3498db;
    --nh-success:        #10b981;
    --nh-warning:        #f59e0b;
    --nh-danger:         #ef4444;
    --nh-info:           #3b82f6;

    --nh-hero-bg:        #06080f;
    --nh-announce-bg:    #0a1a10;

    --nh-radius-card:    24px;
    --nh-radius-btn:     9999px;
    --nh-radius-badge:   9999px;
    --nh-radius-input:   8px;
    --nh-radius-dropdown:12px;

    --nh-shadow-card:    0 48px 80px rgba(0,0,0,0.55);
    --nh-shadow-dropdown:0 20px 48px rgba(0,0,0,0.7);
    --nh-shadow-btn-glow:0 0 28px rgba(81,186,116,0.35);

    --nh-nav-height:     60px;
    --nh-hero-min-h:     92vh;

    /* ── Semantic surface tokens (dark defaults) ── */
    --nh-fg:             rgba(255,255,255,0.94);
    --nh-fg-2:           rgba(255,255,255,0.56);
    --nh-fg-3:           rgba(255,255,255,0.34);
    --nh-stroke:         rgba(255,255,255,0.08);
    --nh-stroke-2:       rgba(255,255,255,0.14);
    --nh-glass:          rgba(255,255,255,0.05);
    --nh-glass-2:        rgba(255,255,255,0.09);
    --nh-surface:        rgba(255,255,255,0.04);
    --nh-shadow-surface: 0 1px 1px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4);
    --nh-shadow-card-hover: 0 12px 40px rgba(0,0,0,0.45);
}

/* ── Light mode overrides — premium SaaS (gray bg + white cards) ── */
html:not(.dark) {
    /* Page bg - clearly gray so white cards POP (FlowUp/Taskly reference) */
    --nh-hero-bg:        #ebedf0;
    --nh-announce-bg:    #ffffff;
    --nh-surface:        #ffffff;

    /* Text — NEUTRAL grays (no green tint) */
    --nh-fg:             #0a0d12;
    --nh-fg-2:           #4f545d;
    --nh-fg-3:           #8a8f99;

    /* Borders — soft neutrals */
    --nh-stroke:         rgba(10,13,18,0.07);
    --nh-stroke-2:       rgba(10,13,18,0.12);

    /* Glass tints */
    --nh-glass:          rgba(10,13,18,0.03);
    --nh-glass-2:        rgba(10,13,18,0.06);

    /* Soft ambient shadows */
    --nh-shadow-card:    0 1px 2px rgba(10,13,18,0.04), 0 8px 28px rgba(10,13,18,0.06);
    --nh-shadow-card-hover: 0 1px 2px rgba(10,13,18,0.04), 0 18px 44px rgba(10,13,18,0.10);
    --nh-shadow-surface: 0 1px 2px rgba(10,13,18,0.03), 0 4px 16px rgba(10,13,18,0.04);
    --nh-shadow-dropdown:0 12px 40px rgba(10,13,18,0.10), 0 2px 6px rgba(10,13,18,0.06);
    --nh-shadow-btn-glow:0 8px 24px rgba(81,186,116,0.20);
}

/* ═══════════════════════════════════════════════════════════
   ACADEMY THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="academy"] {
    --nh-primary:        #1e3a8a;
    --nh-secondary:      #3b82f6;
    --nh-accent:         #8b5cf6;
    --nh-success:        #10b981;
    --nh-warning:        #f59e0b;
    --nh-danger:         #ef4444;
    --nh-info:           #06b6d4;

    --nh-hero-bg:        #0a0f1e;
    --nh-announce-bg:    #0d1a3a;

    --nh-radius-card:    20px;
    --nh-radius-btn:     12px;
    --nh-radius-badge:   9999px;

    --nh-shadow-btn-glow:0 0 28px rgba(59,130,246,0.4);
}

/* ═══════════════════════════════════════════════════════════
   CONSULTATION THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="consultation"] {
    --nh-primary:        #7c2d12;
    --nh-secondary:      #f97316;
    --nh-accent:         #fbbf24;
    --nh-success:        #10b981;
    --nh-warning:        #f59e0b;
    --nh-danger:         #ef4444;
    --nh-info:           #3b82f6;

    --nh-hero-bg:        #0f0a06;
    --nh-announce-bg:    #1a0f06;

    --nh-radius-card:    20px;
    --nh-radius-btn:     8px;

    --nh-shadow-btn-glow:0 0 28px rgba(249,115,22,0.4);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="admin"] {
    --nh-primary:        #1e1b4b;
    --nh-secondary:      #6366f1;
    --nh-accent:         #a855f7;
    --nh-success:        #10b981;
    --nh-warning:        #f59e0b;
    --nh-danger:         #ef4444;
    --nh-info:           #06b6d4;

    --nh-hero-bg:        #09090f;
    --nh-announce-bg:    #13101e;

    --nh-radius-card:    16px;
    --nh-radius-btn:     8px;
    --nh-radius-badge:   6px;

    --nh-shadow-btn-glow:0 0 28px rgba(99,102,241,0.4);
}