/**
 * Design tokens — single source for all CSS.
 * Defaults = Manning (red). Wilson host remaps --manning-red* via brand.css_vars in base.html.
 * Python: app/brand.py + app/brands/registry.py + app/theme.py.
 * EXSPEEDITE skin: set UI_THEME=exspeedite → theme.py remaps tokens + theme-exspeedite.css.
 */
:root {
    /* Brand accent (Manning red by default; Wilson navy via data-brand / brand.css_vars) */
    --manning-red: #db111f;
    --manning-red-dark: #b50e19;
    --manning-red-soft: #fdf2f3;
    --manning-red-hover: #ff4d5a;
    --manning-red-glow: rgba(219, 17, 31, 0.45);

    /* Neutrals — light (public lookup) */
    --text-primary: #111111;
    --text-secondary: #737373;
    --text-muted: #999999;
    --border: #e8e8e8;
    --border-subtle: #f0f0f0;
    --border-strong: #d4d4d4;
    --surface: #ffffff;
    --surface-alt: #f7f7f7;
    --surface-raised: #ffffff;
    --surface-muted: #fafafa;
    --surface-hero: #1a1a1a;

    /* Futuristic portal palette */
    --portal-bg: #06080f;
    --portal-bg-elevated: #0c101c;
    --portal-surface: rgba(14, 20, 36, 0.82);
    --portal-surface-hover: rgba(22, 30, 52, 0.92);
    --portal-border: rgba(148, 163, 184, 0.14);
    --portal-border-glow: rgba(219, 17, 31, 0.35);
    --portal-text: #f1f5f9;
    --portal-text-muted: #94a3b8;
    --portal-grid: rgba(148, 163, 184, 0.06);
    --portal-accent-line: linear-gradient(90deg, transparent, var(--manning-red), #ff6b7a, transparent);

    /* Status */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.12);
    --warn: #f59e0b;
    --warn-bg: rgba(245, 158, 11, 0.12);
    --info: #38bdf8;
    --info-bg: rgba(56, 189, 248, 0.12);

    /* Layout — fixed desktop widths (overridden by app/theme.py from .env) */
    --content-width: 1120px;
    --content-width-admin: 1440px;
    /* Portal — moderate width (not ultra-wide; ~half-inch side feel via 92vw + cap) */
    --content-width-portal: 1360px;
    /* Shipment Command / Active Shipments — wider so FB/PO/BOL/zones aren't clipped */
    --content-width-portal-loads: 1680px;
    --login-card-width: 440px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 32px rgba(17, 17, 17, 0.08);
    --shadow-lg: 0 20px 48px rgba(17, 17, 17, 0.12);
    --shadow-glow: 0 0 40px var(--manning-red-glow);
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --font: "Outfit", "Inter", "Segoe UI", system-ui, sans-serif;
    --header-height: 96px;
    --header-height-portal: 132px;
    --header-height-admin: 132px;
    --nav-touch-min: 44px;
    --impersonation-banner-height: 0px;
    --auth-bg: radial-gradient(ellipse 90% 70% at 50% -20%, rgba(219, 17, 31, 0.18), transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 50%, rgba(56, 189, 248, 0.06), transparent),
        linear-gradient(180deg, #06080f 0%, #0a0e1a 50%, #06080f 100%);

    /* Brand logo on dark glass — normal for transparent assets; brands may override */
    --brand-logo-blend: normal;
    --brand-logo-blend-light: multiply;

    /* Shared futuristic loader (PipelineLoader) */
    --loader-size-sm: 1.35rem;
    --loader-size-md: 2.75rem;
    --loader-size-lg: 3.75rem;
    --loader-ring: rgba(219, 17, 31, 0.22);
    --loader-arc: var(--manning-red);
    --loader-arc-soft: var(--manning-red-hover);
    --loader-glow: var(--manning-red-glow);
    --loader-spin: 1.35s;
    --loader-spin-reverse: 2.1s;
    --loader-pulse: 2.4s;
}