/* =============================================================================
   DARTS — Design tokens (single source of truth for color/space/type)
   Brand: City Government of Pagadian — deep navy + gold seal
   ============================================================================= */

:root {
    /* Brand */
    --brand-primary:        #0f4c81;     /* Deep govt navy */
    --brand-primary-600:    #0d3d68;
    --brand-primary-700:    #0a2f50;
    --brand-primary-50:     #eaf2fa;
    --brand-accent:         #c9a227;     /* Govt gold seal */
    --brand-accent-600:     #a48319;

    /* Neutrals — slate, not pure gray (warmer, more "official") */
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-150: #e9eef5;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;
    --info:    #06b6d4;

    /* Surfaces */
    --bg-app:        var(--neutral-50);
    --bg-elevated:   #ffffff;
    --bg-sunken:     var(--neutral-100);
    --border:        var(--neutral-200);
    --border-strong: var(--neutral-300);

    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted:     var(--neutral-500);
    --text-inverse:   #ffffff;

    /* Type */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

    /* Type scale (clamp for fluid sizes) */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  34px;

    /* Spacing — 4px base */
    --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;

    /* Radius */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Shadows — sober, not floaty */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
    --shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, .07), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10);

    /* Motion */
    --motion-fast:    120ms;
    --motion-ui:      180ms;
    --motion-medium:  240ms;
    --motion-slow:    320ms;
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --ease-emphasized: cubic-bezier(.2,0,0,1);

    /* Layout */
    --sidebar-w: 260px;
    --topbar-h:  64px;
    --content-max: 1480px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Dark-leaning auth screen (login/error) palette */
.auth-body {
    --bg-app: #0a1a2e;
    --bg-elevated: #0f223e;
    --bg-sunken: #0c1c34;
    --border: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.12);
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
}