/* ============================================================
   UrbanSetu Design Tokens v2.0
   8px spacing system · 12-col grid · WCAG AA · Dark mode
   ============================================================ */

:root {
    /* ============================================================
       COLOR · Light Theme
       ============================================================ */

    /* Brand */
    --color-primary-50:  #F5F3FF;
    --color-primary-100: #EDE9FE;
    --color-primary-200: #DDD6FE;
    --color-primary-300: #C4B5FD;
    --color-primary-400: #A78BFA;
    --color-primary-500: #8B5CF6;
    --color-primary-600: #7C3AED;
    --color-primary-700: #6D28D9;
    --color-primary-800: #5B21B6;
    --color-primary-900: #4C1D95;
    --color-primary-950: #2E1065;

    /* Accent (Saffron Gold) */
    --color-accent-50:  #FFFBEB;
    --color-accent-100: #FEF3C7;
    --color-accent-200: #FDE68A;
    --color-accent-300: #FCD34D;
    --color-accent-400: #FBBF24;
    --color-accent-500: #F59E0B;
    --color-accent-600: #D97706;
    --color-accent-700: #B45309;

    /* Success */
    --color-success-50:  #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;

    /* Warning */
    --color-warning-50:  #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;

    /* Danger */
    --color-danger-50:  #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-500: #EF4444;
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;

    /* Info */
    --color-info-50:  #EFF6FF;
    --color-info-100: #DBEAFE;
    --color-info-500: #3B82F6;
    --color-info-600: #2563EB;

    /* Neutral / Gray scale (cool) */
    --color-neutral-0:   #FFFFFF;
    --color-neutral-25:  #FAFBFC;
    --color-neutral-50:  #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;
    --color-neutral-950: #020617;

    /* Semantic */
    --bg:           var(--color-neutral-50);
    --bg-subtle:    var(--color-neutral-100);
    --bg-elevated:  var(--color-neutral-0);
    --bg-overlay:   rgba(15, 23, 42, 0.6);

    --surface:           var(--color-neutral-0);
    --surface-hover:     var(--color-neutral-50);
    --surface-active:    var(--color-neutral-100);
    --surface-inverse:   var(--color-neutral-900);

    --border:        var(--color-neutral-200);
    --border-strong: var(--color-neutral-300);
    --border-focus:  var(--color-primary-600);

    --text-primary:   var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-tertiary:  var(--color-neutral-500);
    --text-disabled:  var(--color-neutral-400);
    --text-inverse:   var(--color-neutral-0);
    --text-link:      var(--color-primary-700);
    --text-link-hover:var(--color-primary-800);

    --text-on-primary: var(--color-neutral-0);
    --text-on-accent:  var(--color-neutral-900);

    --primary:        var(--color-primary-600);
    --primary-hover:  var(--color-primary-700);
    --primary-active: var(--color-primary-800);
    --primary-subtle: var(--color-primary-50);
    --primary-foreground: var(--color-neutral-0);

    --accent:         var(--color-accent-500);
    --accent-hover:   var(--color-accent-600);
    --accent-subtle:  var(--color-accent-50);
    --accent-foreground: var(--color-neutral-900);

    --success:        var(--color-success-500);
    --success-subtle: var(--color-success-50);
    --success-foreground: var(--color-neutral-0);

    --warning:        var(--color-warning-500);
    --warning-subtle: var(--color-warning-50);
    --warning-foreground: var(--color-neutral-900);

    --danger:         var(--color-danger-500);
    --danger-hover:   var(--color-danger-600);
    --danger-subtle:  var(--color-danger-50);
    --danger-foreground: var(--color-neutral-0);

    --info:           var(--color-info-500);
    --info-subtle:    var(--color-info-50);
    --info-foreground: var(--color-neutral-0);

    /* ============================================================
       SPACING · 8px system
       ============================================================ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;
    --space-48: 192px;

    /* ============================================================
       TYPOGRAPHY · Inter
       ============================================================ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --font-display: 'Inter', sans-serif;

    --text-xs:   12px;     /* caption */
    --text-sm:   14px;     /* small */
    --text-base: 16px;     /* body */
    --text-lg:   18px;     /* body-large */
    --text-xl:   20px;
    --text-2xl:  24px;     /* h4 */
    --text-3xl:  32px;     /* h3 */
    --text-4xl:  42px;     /* h2 */
    --text-5xl:  56px;     /* h1 */
    --text-6xl:  72px;
    --text-7xl:  96px;

    --leading-tight:  1.2;
    --leading-snug:   1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose:  1.8;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold: 800;

    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;

    /* ============================================================
       RADIUS
       ============================================================ */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 12px;      /* buttons + inputs */
    --radius-lg: 16px;
    --radius-xl: 20px;      /* cards + images */
    --radius-2xl: 24px;
    --radius-3xl: 32px;     /* large sections */
    --radius-full: 9999px;  /* pills */

    /* ============================================================
       SHADOWS · Soft elevation
       ============================================================ */
    --shadow-0:  none;
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
    --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.04);

    --shadow-focus: 0 0 0 4px rgba(124, 58, 237, 0.15);
    --shadow-focus-danger: 0 0 0 4px rgba(239, 68, 68, 0.15);

    --shadow-button: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --shadow-button-hover: 0 4px 12px 0 rgba(124, 58, 237, 0.20);
    --shadow-card-hover: 0 12px 24px -6px rgba(15, 23, 42, 0.10);

    /* ============================================================
       MOTION
       ============================================================ */
    --duration-fast: 150ms;
    --duration: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ============================================================
       LAYOUT
       ============================================================ */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;

    --header-height: 72px;
    --sidebar-width: 240px;
    --content-max: var(--container-xl);

    /* ============================================================
       Z-INDEX
       ============================================================ */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-popover: 300;
    --z-toast: 400;
    --z-tooltip: 500;

    /* ============================================================
       TRANSITIONS
       ============================================================ */
    --transition-all: all var(--duration) var(--ease-out);
    --transition-colors: color, background-color, border-color var(--duration) var(--ease-out);
    --transition-transform: transform var(--duration) var(--ease-out);
    --transition-shadow: box-shadow var(--duration) var(--ease-out);
    --transition-opacity: opacity var(--duration) var(--ease-out);
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg:           var(--color-neutral-950);
        --bg-subtle:    var(--color-neutral-900);
        --bg-elevated:  var(--color-neutral-800);

        --surface:           var(--color-neutral-900);
        --surface-hover:     var(--color-neutral-800);
        --surface-active:    var(--color-neutral-700);

        --border:        var(--color-neutral-800);
        --border-strong: var(--color-neutral-700);

        --text-primary:   var(--color-neutral-50);
        --text-secondary: var(--color-neutral-300);
        --text-tertiary:  var(--color-neutral-400);
        --text-disabled:  var(--color-neutral-600);

        --bg-overlay: rgba(0, 0, 0, 0.7);

        --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    }
}

:root.dark {
    --bg:           var(--color-neutral-950);
    --bg-subtle:    var(--color-neutral-900);
    --bg-elevated:  var(--color-neutral-800);

    --surface:           var(--color-neutral-900);
    --surface-hover:     var(--color-neutral-800);
    --surface-active:    var(--color-neutral-700);

    --border:        var(--color-neutral-800);
    --border-strong: var(--color-neutral-700);

    --text-primary:   var(--color-neutral-50);
    --text-secondary: var(--color-neutral-300);
    --text-tertiary:  var(--color-neutral-400);
    --text-disabled:  var(--color-neutral-600);

    --bg-overlay: rgba(0, 0, 0, 0.7);

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}