:root {
    --font-sans: "Manrope", "Segoe UI", "Trebuchet MS", sans-serif;

    --radius: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-md: var(--radius);
    --radius-pill: 999px;
    --radius-1: 10px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-soft: rgba(99, 102, 241, 0.14);
    --border: #e5e7eb;
    --border-strong: color-mix(in srgb, var(--border) 76%, var(--color-primary));

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;
    --success-rgb: 34, 197, 94;
    --warning-rgb: 245, 158, 11;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 56, 189, 248;
    --success-soft: rgba(var(--success-rgb), 0.14);
    --warning-soft: rgba(var(--warning-rgb), 0.14);
    --danger-soft: rgba(var(--danger-rgb), 0.14);
    --info-soft: rgba(var(--info-rgb), 0.14);

    --control-height: 44px;
    --border-width-1: 1px;
    --transition-fast: 150ms ease;
    --duration-fast: 150ms;
    --duration-normal: 190ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: 2.25rem;

    --font-weight-regular: 500;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    --bg-page: #f8fafc;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-inset: #f8fafc;
    --bg-hover: #f1f5f9;

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #94a3b8;

    --focus-ring-color: rgba(99, 102, 241, 0.25);
    --focus-ring: 0 0 0 3px var(--focus-ring-color);

    --table-zebra: #f8fafc;
    --table-hover: rgba(99, 102, 241, 0.08);
    --table-header-bg: #f8fafc;
    --table-border-strong: #dbe2ea;

    --elev-1: 0 4px 20px rgba(15, 23, 42, 0.08);
    --elev-2: 0 18px 40px rgba(15, 23, 42, 0.14);
    --elev-3: 0 24px 60px rgba(15, 23, 42, 0.16);

    --brand-500: var(--color-primary);
    --brand-600: var(--color-primary-hover);
    --brand-700: #4338ca;
    --brand-soft: var(--color-primary-soft);

    --rank-capo-de-tutti-capi: #d97706;
    --rank-capo-crimini: #7c3aed;
    --rank-gudfar: #2563eb;
    --rank-boss: #16a34a;

    /* Compatibility aliases for existing templates/scripts */
    --bg-app: var(--bg-page);
    --bg-surface-1: var(--bg-panel);
    --bg-surface-2: color-mix(in srgb, var(--bg-card) 82%, #eef2ff);
    --bg-0: var(--bg-page);
    --bg-1: var(--bg-panel);
    --bg-2: var(--bg-card);
    --bg-3: var(--bg-hover);
    --bg-auth: var(--bg-page);
    --line-0: var(--border);
    --line-1: color-mix(in srgb, var(--border) 82%, var(--color-primary));
    --border-subtle: var(--border);
    --border-0: var(--border-width-1) solid var(--border);
    --bg: var(--bg-page);
    --bg-grad-1: color-mix(in srgb, var(--bg-page) 90%, white);
    --bg-grad-2: var(--bg-page);
    --bg-grad-3: color-mix(in srgb, var(--bg-page) 80%, #dbeafe);
    --topbar-grad-1: color-mix(in srgb, var(--bg-panel) 96%, white);
    --topbar-grad-2: color-mix(in srgb, var(--bg-card) 90%, #eef2ff);
    --auth-grad-1: var(--bg-page);
    --auth-grad-2: var(--bg-panel);
    --auth-grad-3: var(--bg-page);
    --panel: var(--bg-panel);
    --panel-soft: var(--bg-card);
    --line: var(--border);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --text-0: var(--text-primary);
    --text-1: var(--text-secondary);
    --text-2: var(--text-muted);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --primary-soft: var(--color-primary-soft);
    --hover-soft: var(--table-hover);
    --input-border: var(--border);
    --input-bg: color-mix(in srgb, var(--bg-panel) 88%, #eef2ff);
    --secondary-bg: transparent;
    --secondary-text: var(--text-primary);
    --secondary-hover: var(--bg-hover);
    --result-bg: var(--bg-card);
    --table-line: var(--border);
    --th-text: var(--text-secondary);
    --search-bg: var(--bg-panel);
    --search-line: var(--border);
    --search-hover: var(--bg-hover);
    --countdown-30-bg: rgba(var(--warning-rgb), 0.12);
    --countdown-30-text: var(--warning);
    --countdown-10-bg: rgba(var(--success-rgb), 0.12);
    --countdown-10-text: var(--success);
    --row-hover: var(--table-hover);
    --panel-shadow: var(--elev-1);
    --btn-height: var(--control-height);
    --btn-border: var(--color-primary-hover);
}

[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-panel: #111827;
    --bg-card: #1f2937;
    --bg-inset: #172131;
    --bg-hover: #374151;

    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #94a3b8;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --focus-ring-color: rgba(99, 102, 241, 0.28);
    --table-zebra: rgba(255, 255, 255, 0.015);
    --table-hover: rgba(99, 102, 241, 0.12);
    --table-header-bg: #243044;
    --table-border-strong: rgba(255, 255, 255, 0.12);

    --elev-1: 0 4px 20px rgba(0, 0, 0, 0.22);
    --elev-2: 0 22px 50px rgba(0, 0, 0, 0.35);
    --elev-3: 0 30px 72px rgba(0, 0, 0, 0.42);

    --rank-capo-de-tutti-capi: #f59e0b;
    --rank-capo-crimini: #c4b5fd;
    --rank-gudfar: #60a5fa;
    --rank-boss: #4ade80;

    --bg-surface-2: color-mix(in srgb, var(--bg-card) 92%, #111827);
    --bg-grad-1: #172036;
    --bg-grad-2: #0f172a;
    --bg-grad-3: #111827;
    --topbar-grad-1: rgba(17, 24, 39, 0.92);
    --topbar-grad-2: rgba(31, 41, 55, 0.86);
    --input-bg: #0b1220;
}

[data-theme="light"] {
    --bg-page: #f8fafc;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-inset: #f8fafc;
    --bg-hover: #f1f5f9;

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #94a3b8;

    --border: #e5e7eb;
    --border-strong: #cbd5e1;
    --input-bg: #f8fafc;
    --table-header-bg: #f8fafc;
    --table-border-strong: #dbe2ea;
}