/**
 * Speru Admin design tokens — premium fleet SaaS palette.
 * Loaded before app.css; app.css keeps backward-compatible aliases.
 */
:root {
    /* Core Speru teal scale */
    --speru-teal-950: #063F43;
    --speru-teal-900: #064F55;
    --speru-teal-800: #075A60;
    --speru-teal-700: #08727A;
    --speru-teal-600: #0C8F96;
    --speru-teal-500: #12A5AD;

    /* Accents */
    --speru-green: #16A86B;
    --speru-blue: #3185F5;
    --speru-purple: #8357E8;
    --speru-amber: #F4A024;
    --speru-coral: #F45B4F;

    /* Surfaces */
    --speru-bg: #F4F1EB;
    --speru-surface: #FFFFFF;
    --speru-text: #0B2C31;
    --speru-muted: #5C6E70;
    --speru-border: #E6E0D6;

    /* Soft fills */
    --speru-teal-soft: #E6F5F6;
    --speru-blue-soft: #E8F1FE;
    --speru-purple-soft: #F1EBFC;
    --speru-amber-soft: #FFF4DF;
    --speru-green-soft: #EAF8F1;
    --speru-coral-soft: #FDECE8;
    --speru-neutral-soft: #F1F3F3;

    /* Spacing (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radius */
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 20px;
    --ui-radius-pill: 999px;

    /* Shadows */
    --ui-shadow-sm: 0 1px 2px rgba(6, 63, 67, 0.05);
    --ui-shadow-md: 0 8px 24px rgba(6, 63, 67, 0.07);
    --ui-shadow-lg: 0 16px 40px rgba(6, 63, 67, 0.10);

    /* Typography */
    --font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --font-size-page-title: 1.55rem;
    --font-size-section: 1.12rem;
    --font-size-body: 0.94rem;
    --font-size-meta: 0.8rem;
    --font-size-table-head: 0.72rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --transition-fast: 0.15s ease;
    --focus-ring-color: var(--speru-teal-600);
    --focus-ring: 0 0 0 3px rgba(12, 143, 150, 0.28);

    --sidebar-width: 272px;
    --content-max-width: 1680px;

    /* Canonical aliases used across app.css */
    --color-primary: var(--speru-teal-600);
    --color-primary-dark: var(--speru-teal-700);
    --color-accent: var(--speru-amber);
    --color-ink-deep: var(--speru-teal-950);
    --color-deep-ink: var(--speru-teal-950);
    --color-charcoal: var(--speru-text);
    --color-slate: var(--speru-muted);
    --color-border: var(--speru-border);
    --color-paper: var(--speru-bg);
    --color-surface: var(--speru-surface);
    --color-success: var(--speru-green);
    --color-offline: #8A9599;
    --color-danger: var(--speru-coral);
    --color-error: var(--speru-coral);
    --color-warning-text: #9A5B08;
    --color-primary-soft: var(--speru-teal-soft);
    --color-accent-soft: var(--speru-amber-soft);
    --color-success-soft: var(--speru-green-soft);
    --color-danger-soft: var(--speru-coral-soft);
    --color-offline-soft: var(--speru-neutral-soft);
    --color-blue: var(--speru-blue);
    --color-blue-soft: var(--speru-blue-soft);
    --color-purple: var(--speru-purple);
    --color-purple-soft: var(--speru-purple-soft);

    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-accent);
    --bg: var(--color-paper);
    --surface: var(--color-surface);
    --text: var(--color-charcoal);
    --muted: var(--color-slate);
    --border: var(--color-border);
    --success: var(--color-success);
    --info: var(--color-primary);

    --ui-sidebar: var(--speru-teal-950);
    --ui-sidebar-secondary: var(--speru-teal-900);
    --ui-bg: var(--speru-bg);
    --ui-surface: var(--speru-surface);
    --ui-primary: var(--color-primary);
    --ui-primary-hover: var(--color-primary-dark);
    --ui-primary-soft: var(--color-primary-soft);
    --ui-secondary: var(--color-accent);
    --ui-secondary-soft: var(--color-accent-soft);
    --ui-success: var(--color-success);
    --ui-warning: var(--color-accent);
    --ui-danger: var(--color-danger);
    --ui-neutral: var(--color-offline);
    --ui-text: var(--color-charcoal);
    --ui-muted: var(--color-slate);
    --ui-border: var(--color-border);

    /* Bootstrap remap */
    --bs-primary: #0C8F96;
    --bs-primary-rgb: 12, 143, 150;
    --bs-success: #16A86B;
    --bs-success-rgb: 22, 168, 107;
    --bs-warning: #F4A024;
    --bs-warning-rgb: 244, 160, 36;
    --bs-danger: #F45B4F;
    --bs-danger-rgb: 244, 91, 79;
}