:root {
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --topbar-height: 66px;
    --sidebar-width: 264px;
}

/* =========================
   THEMES
   ========================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0a0a0a;
    --color-surface: #121212;
    --color-surface-2: #171717;
    --color-surface-3: #1d1d1d;
    --color-section-tabs: #141414;

    --color-sidebar: #111111;
    --color-topbar: #111111;
    --color-panel: #121212;
    --color-input: #171717;
    --color-table-header: #171717;

    --color-border: rgba(255,255,255,.065);
    --color-border-strong: rgba(255,255,255,.10);

    --color-text: #ffffff;
    --color-text-muted: #d1d5db;
    --color-text-soft: #9ca3af;
    --color-text-faint: #6b7280;

    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-soft: rgba(59,130,246,.10);

    --color-success-text: #6ee7b7;
    --color-success-bg: rgba(16,185,129,.10);
    --color-success-border: rgba(16,185,129,.20);

    --color-warning-text: #fbbf24;
    --color-warning-bg: rgba(245,158,11,.10);
    --color-warning-border: rgba(245,158,11,.20);

    --color-danger-text: #fca5a5;
    --color-danger-bg: rgba(239,68,68,.10);
    --color-danger-border: rgba(239,68,68,.20);

    --color-table-row-odd: rgba(255,255,255,.016);
    --color-table-row-hover: rgba(255,255,255,.045);
}

html[data-theme="light"] {
    color-scheme: light;

    --color-bg: #f4f6fa;
    --color-surface: #ffffff;
    --color-surface-2: #f5f7fb;
    --color-surface-3: #edf1f7;
    --color-section-tabs: #f3f6fb;

    --color-sidebar: #f7f9fc;
    --color-topbar: #f7f9fc;
    --color-panel: #ffffff;
    --color-input: #ffffff;
    --color-table-header: #f6f8fc;

    --color-border: rgba(15,23,42,.075);
    --color-border-strong: rgba(15,23,42,.12);

    --color-text: #0f172a;
    --color-text-muted: #334155;
    --color-text-soft: #64748b;
    --color-text-faint: #94a3b8;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: rgba(37,99,235,.09);

    --color-success-text: #047857;
    --color-success-bg: rgba(16,185,129,.10);
    --color-success-border: rgba(16,185,129,.20);

    --color-warning-text: #b45309;
    --color-warning-bg: rgba(245,158,11,.10);
    --color-warning-border: rgba(245,158,11,.20);

    --color-danger-text: #b91c1c;
    --color-danger-bg: rgba(239,68,68,.10);
    --color-danger-border: rgba(239,68,68,.20);

    --color-table-row-odd: rgba(15,23,42,.022);
    --color-table-row-hover: rgba(15,23,42,.05);
}

html[data-theme="soft_light"] {
    color-scheme: light;

    --color-bg: #f3f4f9;
    --color-surface: #ffffff;
    --color-surface-2: #f6f6fb;
    --color-surface-3: #eeeff6;
    --color-section-tabs: #f3f2fa;

    --color-sidebar: #f7f7fc;
    --color-topbar: #f7f7fc;
    --color-panel: #ffffff;
    --color-input: #ffffff;
    --color-table-header: #f5f5fb;

    --color-border: rgba(99,102,241,.10);
    --color-border-strong: rgba(99,102,241,.16);

    --color-text: #172033;
    --color-text-muted: #334155;
    --color-text-soft: #64748b;
    --color-text-faint: #94a3b8;

    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-soft: rgba(124,58,237,.09);

    --color-success-text: #047857;
    --color-success-bg: rgba(16,185,129,.10);
    --color-success-border: rgba(16,185,129,.20);

    --color-warning-text: #b45309;
    --color-warning-bg: rgba(245,158,11,.10);
    --color-warning-border: rgba(245,158,11,.20);

    --color-danger-text: #b91c1c;
    --color-danger-bg: rgba(239,68,68,.10);
    --color-danger-border: rgba(239,68,68,.20);

    --color-table-row-odd: rgba(15,23,42,.02);
    --color-table-row-hover: rgba(15,23,42,.045);
}

html[data-theme="graphite"] {
    color-scheme: dark;

    --color-bg: #0f1115;
    --color-surface: #171a21;
    --color-surface-2: #1b1f27;
    --color-surface-3: #212632;

    --color-sidebar: #161920;
    --color-topbar: #161920;
    --color-panel: #171a21;
    --color-input: #1b1f27;
    --color-table-header: #1b1f27;

    --color-border: rgba(255,255,255,.075);
    --color-border-strong: rgba(255,255,255,.12);

    --color-text: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-text-soft: #94a3b8;
    --color-text-faint: #64748b;

    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-soft: rgba(96,165,250,.11);

    --color-success-text: #6ee7b7;
    --color-success-bg: rgba(16,185,129,.10);
    --color-success-border: rgba(16,185,129,.20);

    --color-warning-text: #fcd34d;
    --color-warning-bg: rgba(245,158,11,.10);
    --color-warning-border: rgba(245,158,11,.20);

    --color-danger-text: #fda4af;
    --color-danger-bg: rgba(239,68,68,.10);
    --color-danger-border: rgba(239,68,68,.20);

    --color-table-row-odd: rgba(255,255,255,.012);
    --color-table-row-hover: rgba(255,255,255,.035);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    overflow: hidden;
}

.page {
    height: 100dvh;
    overflow: hidden;
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    [data-flash] {
        transition: none !important;
        transform: none !important;
    }
}

.user-row-highlight {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.24);
}

.user-row-highlight > td {
    background: rgba(59, 130, 246, 0.08);
    transition: background 260ms ease;
}

[x-cloak] { display: none !important; }