/* ========================================
   HUMBOLDT EVENTS — THEME
   Dark + light design tokens, reset
   ======================================== */

/* ========================================
   DARK THEME (default)
   ======================================== */
:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg:               #0f0f12;
    --bg-card:          #1a1a22;
    --bg-card-hover:    #22222c;
    --bg-input:         #2a2a32;
    --bg-sidebar:       #151519;
    --bg-navbar:        #0a0a0e;
    --bg-modal:         rgba(0, 0, 0, 0.75);
    --bg-code:          #1e1e26;

    /* Text */
    --text:             #e0e0e0;
    --text-muted:       #888888;
    --text-dim:         #555555;
    --text-inverse:     #0f0f12;

    /* Accent */
    --accent:           #00ff9d;
    --accent-hover:     #00cc7a;
    --accent-muted:     rgba(0, 255, 157, 0.15);
    --accent-gradient:  linear-gradient(135deg, #00ff9d, #00cc7a);

    /* Semantic colors */
    --success:          #00ff9d;
    --warning:          #ffb74d;
    --error:            #f87171;
    --info:             #60a5fa;

    /* Category colors */
    --cat-music:        #00ff9d;
    --cat-comedy:       #fbbf24;
    --cat-theater:      #c084fc;
    --cat-festival:     #fb923c;
    --cat-sports:       #38bdf8;
    --cat-community:    #a78bfa;
    --cat-arts:         #f472b6;
    --cat-outdoor:      #34d399;
    --cat-food:         #fb7185;
    --cat-education:    #818cf8;
    --cat-government:   #94a3b8;
    --cat-market:       #fcd34d;
    --cat-film:         #e879f9;
    --cat-dance:        #2dd4bf;
    --cat-charity:      #f87171;
    --cat-other:        #9ca3af;

    /* Borders */
    --border:           #333333;
    --border-hover:     #00ff9d;
    --border-light:     #222228;

    /* Shadows */
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow:      0 0 20px rgba(0, 255, 157, 0.25);

    /* Radii */
    --radius-xs:        4px;
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-full:      9999px;

    /* Spacing */
    --space-xs:         4px;
    --space-sm:         8px;
    --space-md:         16px;
    --space-lg:         24px;
    --space-xl:         32px;
    --space-2xl:        48px;
    --space-3xl:        64px;

    /* Typography */
    --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:        'JetBrains Mono', SFMono-Regular, Consolas, monospace;
    --text-xs:          0.75rem;
    --text-sm:          0.875rem;
    --text-base:        1rem;
    --text-lg:          1.125rem;
    --text-xl:          1.25rem;
    --text-2xl:         1.5rem;
    --text-3xl:         1.875rem;
    --text-4xl:         2.25rem;
    --text-5xl:         3rem;

    /* Layout */
    --max-width:        1280px;
    --navbar-height:    64px;
    --sidebar-width:    280px;
    --bottom-bar-height: 56px;
    --container-padding: 20px;

    /* Transitions */
    --transition-fast:  150ms ease;
    --transition-base:  250ms ease;
    --transition-slow:  400ms ease;

    /* Z-index */
    --z-dropdown:       100;
    --z-navbar:         200;
    --z-sidebar:        300;
    --z-modal:          400;
    --z-toast:          500;
    --z-tooltip:        600;
}

/* ========================================
   LIGHT THEME
   ======================================== */
[data-theme="light"] {
    --bg:               #f5f5f7;
    --bg-card:          #ffffff;
    --bg-card-hover:    #f0f0f2;
    --bg-input:         #e8e8ec;
    --bg-sidebar:       #fafafa;
    --bg-navbar:        #ffffff;
    --bg-modal:         rgba(0, 0, 0, 0.5);
    --bg-code:          #f0f0f4;

    --text:             #1a1a2e;
    --text-muted:       #666680;
    --text-dim:         #999;
    --text-inverse:     #f5f5f7;

    --accent:           #00994d;
    --accent-hover:     #007a3d;
    --accent-muted:     rgba(0, 153, 77, 0.12);
    --accent-gradient:  linear-gradient(135deg, #00b85c, #00994d);

    --success:          #00994d;
    --warning:          #e6a000;
    --error:            #dc2626;
    --info:             #2563eb;

    --border:           #d1d1d6;
    --border-hover:     #00994d;
    --border-light:     #e5e5ea;

    --shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow:      0 0 16px rgba(0, 153, 77, 0.2);
}

/* ========================================
   RESET
   ======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.6;
    min-height: 100vh;
    padding-top: var(--navbar-height);
    padding-bottom: var(--bottom-bar-height);
    transition: background var(--transition-base), color var(--transition-base);
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

@media (min-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
}

p { margin-bottom: var(--space-md); }

ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }

button {
    font-family: var(--font-sans);
}

code, pre {
    font-family: var(--font-mono);
    background: var(--bg-code);
    border-radius: var(--radius-xs);
}
code { padding: 2px 6px; font-size: 0.9em; }
pre {
    padding: var(--space-md);
    overflow-x: auto;
    margin-bottom: var(--space-md);
}
pre code { padding: 0; background: none; }

/* No hover effects on touch devices */
@media (hover: none) {
    .btn:hover { transform: none; box-shadow: none; }
}