/**
 * tokens.css - Design System Tokens (Dark & Light Themes, Capsule Pill Radii, Layer Colors)
 */
:root,
[data-theme="dark"] {
    --bg-app: #0b1120;
    --bg-surface: #111827;
    --bg-elevated: #1e293b;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-glass: rgba(17, 24, 39, 0.88);

    --border-subtle: #1e293b;
    --border-default: #334155;
    --border-focus: #38bdf8;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;

    --accent-primary: #66a3ff;
    --accent-glow: rgba(102, 163, 255, 0.25);

    /* Layer Pill Tokens */
    --pg-bg: rgba(59, 130, 246, 0.16);
    --pg-border: rgba(59, 130, 246, 0.45);
    --pg-text: #bfdbfe;
    --pg-dot: #3b82f6;

    --ug-bg: rgba(16, 185, 129, 0.16);
    --ug-border: rgba(16, 185, 129, 0.45);
    --ug-text: #a7f3d0;
    --ug-dot: #10b981;

    --dept-bg: rgba(139, 92, 246, 0.16);
    --dept-border: rgba(139, 92, 246, 0.45);
    --dept-text: #ddd6fe;
    --dept-dot: #8b5cf6;

    --cel-bg: rgba(234, 179, 8, 0.14);
    --cel-border: rgba(250, 204, 21, 0.32);
    --cel-text: #fef08a;
    --cel-dot: #eab308;

    --anniv-bg: rgba(244, 114, 182, 0.14);
    --anniv-border: rgba(244, 114, 182, 0.32);
    --anniv-text: #fbcfe8;

    --pill-radius: 9999px;
    --card-radius: 16px;
    --shadow-popover: 0 20px 45px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
    --bg-app: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-hover: rgba(15, 23, 42, 0.05);
    --bg-glass: rgba(255, 255, 255, 0.94);

    --border-subtle: #e2e8f0;
    --border-default: #cbd5e1;
    --border-focus: #2563eb;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --accent-primary: #1769ff;
    --accent-glow: rgba(23, 105, 255, 0.16);

    /* Layer Pill Tokens (Light Mode) */
    --pg-bg: #eff6ff;
    --pg-border: #93c5fd;
    --pg-text: #1d4ed8;
    --pg-dot: #2563eb;

    --ug-bg: #ecfdf5;
    --ug-border: #6ee7b7;
    --ug-text: #047857;
    --ug-dot: #059669;

    --dept-bg: #f5f3ff;
    --dept-border: #c4b5fd;
    --dept-text: #6d28d9;
    --dept-dot: #7c3aed;

    --cel-bg: #fefce8;
    --cel-border: #fef08a;
    --cel-text: #854d0e;
    --cel-dot: #d97706;

    --anniv-bg: #fdf2f8;
    --anniv-border: #fbcfe8;
    --anniv-text: #9d174d;
    
    --shadow-popover: 0 20px 40px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-app);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

button, input {
    font-family: inherit;
}