:root {
    /* Legacy aliases (tables, admin) */
    --bg: #f0f6ff;
    --card: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --accent: #2563eb;
    --amber-50: #fef3c7;

    /* Layout — full-width with gutters (tighter density) */
    --appMainMarginLeft: 30px;
    --page-gutter: clamp(16px, 2.4vw, 32px);
    --page-gutter-mobile: 14px;
    --content-max: 1120px;
    --content-wide-max: 1360px;

    /* Density — single tuning surface (~18–22% tighter than legacy) */
    --appSidebarWidth: 272px;
    --appPageMaxWidth: 1120px;
    --appPageWideMaxWidth: 1360px;
    --appSectionGap: 16px;
    --appCardPadding: 16px;
    --appCardPadding-lg: 20px;
    --appCardRadius: 8px;
    --appPagePaddingTop: 18px;
    --appPagePaddingBottom: 28px;
    --appToolbarHeight: 44px;
    --appGridGap: 16px;

    --appButtonHeight: 40px;
    --appButtonHeight-lg: 46px;
    --appButtonPadding-x: 14px;
    --appInputHeight: 40px;

    --appNavGap: 5px;
    --appNavLink-padding-y: 9px;
    --appNavLink-padding-x: 12px;

    --font-scale-eyebrow: 0.6875rem;
    --font-scale-body: 0.9375rem;
    --font-scale-body-lg: 1rem;

    /* Surfaces */
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f8fafc;
    --surface-subtle: #f1f5f9;
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.12);
    --panel-border: rgba(15, 23, 42, 0.08);
    --panel-shadow: var(--shadow-card);
    --panel-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.11);
    --text: var(--ink);
    --text-soft: #475569;
    --text-muted: var(--muted);
    --control-bg: #ffffff;
    --control-bg-hover: #f8fafc;
    --control-border: var(--border-subtle);
    --control-text: var(--ink);
    --table-bg: #ffffff;
    --table-header-bg: #f1f5f9;
    --table-row-hover-bg: #f8fafc;
    --modal-bg: #ffffff;
    --overlay-bg: rgba(15, 23, 42, 0.45);
    --focus-ring: var(--accent);

    /* Brand — primary CTAs: polished cyan → blue */
    --brand-primary: #2563eb;
    --brand-primary-dark: #1e40af;
    --brand-primary-soft: #38bdf8;
    --brand-primary-accent: #14b8a6;

    --gradient-primary: linear-gradient(135deg,
            #38bdf8 0%,
            #2563eb 46%,
            #1e40af 100%);

    /* Logo-aligned primary CTAs: polished cyan → blue with subtle depth */
    --gradient-brand-vertical: linear-gradient(180deg,
            #0284c7 0%,
            #1d4ed8 46%,
            #1e3a8a 100%);

    --gradient-brand-vertical-hover: linear-gradient(180deg,
            #0ea5e9 0%,
            #2563eb 44%,
            #1e40af 100%);

    --gradient-brand-vertical-active: linear-gradient(180deg,
            #1e40af 0%,
            #1d4ed8 48%,
            #172554 100%);

    --gradient-cta: var(--gradient-brand-vertical);
    --gradient-cta-hover: var(--gradient-brand-vertical-hover);
    --gradient-cta-active: var(--gradient-brand-vertical-active);

    --cta-border: rgba(14, 165, 233, 0.42);
    --cta-border-hover: rgba(56, 189, 248, 0.62);
    --cta-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
    --cta-shadow-hover: 0 10px 22px rgba(37, 99, 235, 0.22);
    --brand-orange: #ea580c;
    --brand-orange-dark: #c2410c;
    --gradient-warn-cta: linear-gradient(135deg, #fb923c 0%, #ea580c 55%, #c2410c 100%);
    --success: #15803d;
    --success-bg: #dcfce7;
    --warning: #b45309;
    --warning-bg: #fef3c7;

    /* Shape */
    --radius-page: 8px;
    --radius-card: 8px;
    --radius-pill: 999px;
    --radius-input: 8px;

    /* App shell page background */
    --shell-bg: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);

    /* Block Party brand — logo-aligned accents (neutral panels + thin bars / highlights) */
    --bpNavy: #0c1630;
    --bpNavySoft: #14213d;
    --bpBlue: #2f6fed;
    --bpCyan: #20c7f3;
    --bpOrange: #f28c28;
    --bpText: #18233d;
    --bpTextSoft: #5d6b82;
    --bpBorder: rgba(20, 33, 61, 0.12);
    --bpBorderStrong: rgba(20, 33, 61, 0.18);
    --bpPanel: #ffffff;
    --bpPanelSoft: #f7f9fc;
    --bpPrimary: #4f6789;
    --bpPrimaryHover: #5c769b;
    --bpPrimaryActive: #445a78;
    --bpAccentGradient: linear-gradient(90deg, #2f6fed 0%, #20c7f3 62%, #f28c28 100%);
    /* Thin brand-gradient rim on muted primary CTAs (layered with --gradient-cta) */
    --ctaAccentBorderGradient: var(--bpAccentGradient);
}