/* ══════════════════════════════════════════════════════
   e-Cities — Design Tokens
   Central theme values. All components reference these.
   ══════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --ec-primary:        #F57C00;   /* orange-700 — matches logo */
    --ec-primary-light:  #FF9800;   /* orange-500 */
    --ec-primary-dark:   #E65100;   /* orange-900 */
    --ec-primary-subtle: #FFF3E0;   /* orange-50 */

    --ec-accent:         #1976D2;   /* blue-700 — trust contrast accent */
    --ec-accent-light:   #42A5F5;   /* blue-400 */

    --ec-success:        #22C55E;   /* green-500 */
    --ec-warning:        #F59E0B;   /* amber-500 */
    --ec-danger:         #EF4444;   /* red-500 */
    --ec-info:           #3B82F6;   /* blue-500 */

    /* ── Neutrals (light mode) ── */
    --ec-bg:             #FFFFFF;
    --ec-bg-secondary:   #F9FAFB;   /* gray-50 */
    --ec-bg-tertiary:    #F3F4F6;   /* gray-100 */
    --ec-surface:        #FFFFFF;
    --ec-surface-hover:  #F9FAFB;
    --ec-border:         #E5E7EB;   /* gray-200 */
    --ec-border-strong:  #D1D5DB;   /* gray-300 */

    /* ── Text ── */
    --ec-text:           #111827;   /* gray-900 */
    --ec-text-secondary: #6B7280;   /* gray-500 */
    --ec-text-muted:     #9CA3AF;   /* gray-400 */
    --ec-text-inverse:   #FFFFFF;

    /* ── Typography ── */
    --ec-font-heading:   'Inter', system-ui, -apple-system, sans-serif;
    --ec-font-body:      'Inter', system-ui, -apple-system, sans-serif;
    --ec-font-mono:      'JetBrains Mono', ui-monospace, monospace;

    --ec-text-xs:        0.75rem;    /* 12px */
    --ec-text-sm:        0.875rem;   /* 14px */
    --ec-text-base:      1rem;       /* 16px */
    --ec-text-lg:        1.125rem;   /* 18px */
    --ec-text-xl:        1.25rem;    /* 20px */
    --ec-text-2xl:       1.5rem;     /* 24px */
    --ec-text-3xl:       1.875rem;   /* 30px */
    --ec-text-4xl:       2.25rem;    /* 36px */

    /* ── Spacing ── */
    --ec-space-1:  0.25rem;   /* 4px */
    --ec-space-2:  0.5rem;    /* 8px */
    --ec-space-3:  0.75rem;   /* 12px */
    --ec-space-4:  1rem;      /* 16px */
    --ec-space-5:  1.25rem;   /* 20px */
    --ec-space-6:  1.5rem;    /* 24px */
    --ec-space-8:  2rem;      /* 32px */
    --ec-space-10: 2.5rem;    /* 40px */
    --ec-space-12: 3rem;      /* 48px */
    --ec-space-16: 4rem;      /* 64px */

    /* ── Radii ── */
    --ec-radius-sm:  8px;
    --ec-radius-md:  12px;
    --ec-radius-lg:  16px;
    --ec-radius-xl:  24px;
    --ec-radius-full: 9999px;

    /* ── Shadows ── */
    --ec-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --ec-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ec-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ec-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Transitions ── */
    --ec-transition-fast:   0.15s ease;
    --ec-transition-normal: 0.2s ease;
    --ec-transition-slow:   0.3s ease;

    /* ── Z-index layers ── */
    --ec-z-dropdown: 100;
    --ec-z-sticky:   200;
    --ec-z-overlay:  300;
    --ec-z-modal:    400;
    --ec-z-toast:    500;

    /* ── Layout ── */
    --ec-max-width:  1280px;
    --ec-header-h:   64px;
    --ec-touch-min:  44px;   /* WCAG minimum touch target */
}