:root {
    /* ------------------------------------------------------------------ */
    /*  Ofaami Enterprise Dashboard — Design Tokens                       */
    /*  Ported from the HTML reference (html/assets/css/variables.css)    */
    /* ------------------------------------------------------------------ */

    /* Brand / primary */
    --primary: #6C4FE8;
    --primary-dark: #4C35C8;
    --primary-darker: #2F1F8F;
    --primary-soft: #EEF0FF;
    --primary-mid: #A89BFF;
    --primary-p50: #F5F4FF;
    --primary-gradient: linear-gradient(160deg, #7B5FFF 0%, #4C35C8 100%);
    --primary-gradient-soft: linear-gradient(160deg, #EEF0FF 0%, #F5F4FF 100%);

    /* Semantic */
    --success: #1D9E75;
    --success-dark: #157A5B;
    --success-soft: #E1F5EE;
    --warning: #E2A000;
    --warning-dark: #B88200;
    --warning-soft: #FFF3CD;
    --danger: #E24B4A;
    --danger-dark: #C22F30;
    --danger-soft: #FCEBEB;
    --gold: #F5C842;
    --gold-dark: #D9A71C;
    --gold-soft: #FFF8E0;
    --info: #4FA7FF;
    --info-soft: #E7F1FD;

    /* Sidebar (dark navy) */
    --sidebar-w: 228px;
    --sidebar-bg: linear-gradient(160deg, #0C1A3D 0%, #122A6A 55%, #0B1A4A 100%);
    --sidebar-bg-solid: #0C1A3D;
    --sidebar-text: #C7D0F4;
    --sidebar-text-dim: #7E8BB8;
    --sidebar-active: #FFFFFF;
    --sidebar-active-bg: rgba(255,255,255,0.10);
    --sidebar-hover-bg: rgba(255,255,255,0.06);
    --sidebar-badge: #F5C842;

    /* Surfaces */
    --bg: #F2F2FA;
    --bg-card: #FFFFFF;
    --text: #0F0F23;
    --text-2: #3A4265;
    --text-muted: #64748B;
    --text-faint: #94A3B8;
    --border: rgba(108, 79, 232, 0.10);
    --border-strong: rgba(108, 79, 232, 0.18);
    --surface-input: #FBFBFF;

    /* Header */
    --topbar-h: 56px;

    /* Elevation */
    --shadow-sm: 0 2px 6px rgba(47, 31, 143, 0.05), 0 1px 2px rgba(47, 31, 143, 0.04);
    --shadow-md: 0 8px 24px rgba(47, 31, 143, 0.08), 0 2px 6px rgba(47, 31, 143, 0.04);
    --shadow-lg: 0 18px 44px rgba(47, 31, 143, 0.14), 0 4px 12px rgba(47, 31, 143, 0.06);
    --shadow-purple: 0 10px 22px rgba(108, 79, 232, 0.28);
    --shadow-dark: 0 8px 22px rgba(5, 12, 40, 0.35);

    /* Radii */
    --r-8: 8px;
    --r-10: 10px;
    --r-12: 12px;
    --r-14: 14px;
    --r-18: 18px;
    --r-full: 999px;

    /* Type */
    --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

    /* Sizes */
    --fz-9: 9px;   --fz-10: 10px;  --fz-11: 11px;  --fz-12: 12.5px;
    --fz-13: 13px; --fz-14: 14px;  --fz-16: 16px;  --fz-20: 20px;
    --fz-24: 24px; --fz-28: 28px;

    --sp-4: 4px;   --sp-6: 6px;    --sp-8: 8px;    --sp-10: 10px;
    --sp-12: 12px; --sp-14: 14px;  --sp-16: 16px;  --sp-20: 20px;
    --sp-24: 24px; --sp-28: 28px;

    /* Charts */
    --chart-grid: rgba(108, 79, 232, 0.08);
    --chart-line-1: #6C4FE8;
    --chart-line-2: #1D9E75;
    --chart-line-3: #E2A000;
    --chart-axis: #94A3B8;
}