/* ============================================================
   Centralized Barangay Management System — Design Tokens
   "Civic Modern" — deep civic blue + warm gold + warm neutral.
   Every value has a reason. No purple gradients, no glassmorphism,
   no decorative blobs. Motion honors prefers-reduced-motion.
   ============================================================ */

:root {
    /* --- Brand ------------------------------------------------ */
    --c-primary-50:  #EAF2FA;
    --c-primary-100: #C8DCEF;
    --c-primary-300: #6FA6D2;
    --c-primary-500: #1F6AAE;
    --c-primary-700: #0F4C81;
    --c-primary-900: #082F52;

    --c-accent-300:  #EFCF74;
    --c-accent-400:  #E5B94A;
    --c-accent-500:  #D4A017;
    --c-accent-600:  #A87C0F;

    /* --- Surface + ink --------------------------------------- */
    --c-surface-0:   #FAFAF7;   /* cards — warm neutral reduces eye fatigue */
    --c-surface-1:   #F2F0E9;   /* page background */
    --c-surface-2:   #E7E4DB;   /* muted panel */
    --c-ink-900:     #1A1E22;
    --c-ink-700:     #3C434C;
    --c-ink-500:     #64707D;
    --c-ink-400:     #8A95A2;
    --c-line:        #D5D1C5;

    /* --- Semantic -------------------------------------------- */
    --c-success-50:  #E6F6EE;
    --c-success-500: #067647;
    --c-warning-50:  #FCEFDA;
    --c-warning-500: #B54708;
    --c-danger-50:   #FBE7E3;
    --c-danger-500:  #B42318;
    --c-info-500:    #1F6AAE;

    /* --- Radii ----------------------------------------------- */
    --r-card:  10px;
    --r-btn:    8px;
    --r-input:  8px;
    --r-pill:  999px;

    /* --- Shadows (2 tiers only) ------------------------------ */
    --sh-card:      0 1px 2px rgba(10,20,40,0.05), 0 1px 1px rgba(10,20,40,0.03);
    --sh-elevated:  0 12px 32px -12px rgba(10,20,40,0.18), 0 2px 6px rgba(10,20,40,0.06);

    /* --- Motion ---------------------------------------------- */
    --motion-fast:    120ms;
    --motion-ui:      180ms;
    --motion-medium:  240ms;
    --motion-slow:    320ms;
    --ease-standard:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
    --ease-exit:        cubic-bezier(0.4, 0, 1, 1);

    /* --- Typography (anti-slop: no reflex Inter/Roboto) ----- */
    --ff-ui:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-doc:   "Source Serif 4", Georgia, "Times New Roman", serif;
    --ff-mono:  ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --fs-100: 0.75rem;   --lh-100: 1.1;
    --fs-200: 0.875rem;  --lh-200: 1.4;
    --fs-300: 1rem;      --lh-300: 1.55;
    --fs-400: 1.125rem;  --lh-400: 1.5;
    --fs-500: 1.375rem;  --lh-500: 1.3;
    --fs-600: 1.75rem;   --lh-600: 1.2;
    --fs-700: 2.25rem;   --lh-700: 1.15;

    /* --- Spacing (4px base, one scale) ---------------------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;

    /* --- Layout rails --------------------------------------- */
    --layout-sidebar:      248px;
    --layout-sidebar-slim:  72px;
    --layout-topbar:        64px;
    --layout-container:   1280px;

    /* --- Focus ring ----------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(31, 106, 174, 0.28);
    --focus-ring-danger: 0 0 0 3px rgba(180, 35, 24, 0.28);
}

/* Dark mode — real tokens, not a filter invert */
[data-theme="dark"] {
    --c-surface-0: #161B22;
    --c-surface-1: #0F1318;
    --c-surface-2: #1E242D;
    --c-ink-900:   #F3F5F8;
    --c-ink-700:   #C6CDD6;
    --c-ink-500:   #8A95A2;
    --c-ink-400:   #6A7380;
    --c-line:      #2A313B;
    --sh-card:     0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
    --sh-elevated: 0 12px 32px -12px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:   0ms;
        --motion-ui:     0ms;
        --motion-medium: 0ms;
        --motion-slow:   0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}