/* ==========================================================================
   DotIntel Design Tokens
   Shared CSS custom properties for public and admin frontends.
   Import this file FIRST in any stylesheet that needs design tokens.
   ========================================================================== */

:root {
    /* ── Brand ───────────────────────────────────────────────────────────── */
    --color-primary: #009245;
    --color-primary-dark: #006E34;
    --color-primary-light: #E8F5E9;

    /* ── Neutrals ────────────────────────────────────────────────────────── */
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #E0E0E0;
    --color-gray-400: #BDBDBD;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* ── Semantic ─────────────────────────────────────────────────────────── */
    --color-error: #D32F2F;
    --color-warning: #F9A825;
    --color-success: #2E7D32;
    --color-info: #1565C0;

    /* ── Surfaces ─────────────────────────────────────────────────────────── */
    --color-surface: #FFFFFF;
    --color-surface-raised: #FAFAFA;
    --color-border: #E0E0E0;

    /* ── FDOT District Colors (softened) ──────────────────────────────────── */
    --color-fdot-d1: #E53935;       /* muted red */
    --color-fdot-d1-text: #FFFFFF;
    --color-fdot-d2: #FB8C00;       /* warm orange */
    --color-fdot-d2-text: #000000;
    --color-fdot-d3: #F9A825;       /* golden yellow */
    --color-fdot-d3-text: #000000;
    --color-fdot-d4: #EC407A;       /* rose */
    --color-fdot-d4-text: #FFFFFF;
    --color-fdot-d5: #1E88E5;       /* calm blue */
    --color-fdot-d5-text: #FFFFFF;
    --color-fdot-d6: #37474F;       /* charcoal */
    --color-fdot-d6-text: #FFFFFF;
    --color-fdot-d7: #00ACC1;       /* teal */
    --color-fdot-d7-text: #000000;
    --color-fdot-t: #8E24AA;        /* purple */
    --color-fdot-t-text: #FFFFFF;
    --color-fdot-co: #6D4C41;       /* brown */
    --color-fdot-co-text: #FFFFFF;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'DM Sans', sans-serif;

    --text-xs: 0.75rem;       /* 12px — table data, fine print */
    --text-sm: 0.8125rem;     /* 13px — secondary text, captions */
    --text-base: 13px;        /* body text — matches original; px to avoid rem recursion on html */
    --text-lg: 1.125rem;      /* 18px — card titles */
    --text-xl: 1.5rem;        /* 24px — section headers */
    --text-2xl: 2rem;         /* 32px — page titles */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ── Spacing (8px scale) ─────────────────────────────────────────────── */
    --space-1: 0.25rem;       /* 4px */
    --space-2: 0.5rem;        /* 8px */
    --space-3: 0.75rem;       /* 12px */
    --space-4: 1rem;          /* 16px */
    --space-5: 1.5rem;        /* 24px */
    --space-6: 2rem;          /* 32px */
    --space-8: 3rem;          /* 48px */
    --space-10: 4rem;         /* 64px */

    /* ── Borders & Radii ─────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

}