/* ==========================================================
   Design tokens — single source of truth for the whole app.
   Linked from every page (layouts/app.blade.php + login.blade.php)
   before any other stylesheet, so every page reads the same values.
   ========================================================== */
:root {
    /* ---- Brand ---- */
    --color-primary: #F97316;
    --color-primary-dark: #EA580C;
    --color-primary-tint: rgba(249, 115, 22, 0.1);
    --color-primary-text: #C2410C; /* AA-safe orange for text/links on light backgrounds — #F97316 text on white is ~2.8:1, fails WCAG AA */
    --color-accent: var(--color-primary);
    --color-accent-dark: var(--color-primary-dark);
    --color-accent-tint: var(--color-primary-tint);

    /* ---- Status: bg tints per the brief; text shades darkened one step where
       needed so every pair clears WCAG AA (4.5:1) — see note below. ---- */
    --color-success-bg: #F0FDF4;
    --color-success-text: #15803D; /* brief specified #16A34A, which is ~3.15:1 on this bg — darkened for AA */
    --color-warning-bg: #FFFBEB;
    --color-warning-text: #B45309; /* brief specified #D97706, which is ~3.07:1 on this bg — darkened for AA */
    --color-danger-bg: #FEF2F2;
    --color-danger-text: #B91C1C; /* brief specified #DC2626, which is ~4.4:1 on this bg — darkened for AA */
    --color-info-bg: #EFF6FF;
    --color-info-text: #2563EB; /* passes AA as specified (~4.75:1) */

    /* ---- Neutrals ---- */
    --color-heading: #111827;
    --color-text: var(--color-heading);
    --color-subtext: #6B7280;
    --color-muted: #9CA3AF;

    /* ---- Surfaces ---- */
    --color-card-bg: #FFFFFF;
    --color-page-bg: #F9FAFB;
    --page-gradient: var(--color-page-bg);
    --color-section-bg: #F3F4F6;
    --color-border: #E5E7EB;
    --color-border-hover: #D1D5DB;

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

    /* ---- Radius scale ----
       sm  = buttons, inputs, non-pill badges
       md  = cards, panels, modals
       pill (999px, used literally) = pills / status badges / chips */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;

    /* ---- Shadows: subtle, layered elevation ---- */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.08);

    --sidebar-width: 248px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}