/* MAPTOO Design System — Variables */

:root {
    /* Brand Colors */
    --maptoo-navy: #0F1B44;
    --maptoo-blue: #4F6CE0;
    --maptoo-light-blue: #6A85FF;
    --maptoo-very-light-blue: #ACC2FF;
    --maptoo-gray: #7a8bb5;
    --maptoo-white: #FFFFFF;
    --maptoo-border: rgba(15, 27, 68, 0.1);

    /* Status Colors */
    --maptoo-success: #27AE60;
    --maptoo-warning: #E67E22;
    --maptoo-error: #E74C3C;
    --maptoo-info: #4F6CE0;

    /* Typography */
    --maptoo-font: 'DM Sans', Arial, sans-serif;
    --maptoo-font-mono: ui-monospace, "Cascadia Mono", monospace;

    /* Spacing (8px grid) */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 27, 68, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 27, 68, 0.1);
    --shadow-lg: 0 8px 24px rgba(15, 27, 68, 0.15);

    /* Layout */
    --nav-height: 64px;
    --sidebar-width: 280px;
}

body.maptoo {
    font-family: var(--maptoo-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--maptoo-navy);
    background: #f5f7fb;
}