/**
 * Design Tokens — single source of truth
 * Phase 1–2: imported by design-system.css. Login pages import directly.
 * Legacy variable names (--tw-*, --rd-*, --admin-*) alias semantic tokens below.
 */

:root {
    /* ── Typography ── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-sans-ar: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;

    /* ── Primitive: Navy (legacy brand palette) ── */
    --color-navy-50:  #eff6ff;
    --color-navy-100: #dbeafe;
    --color-navy-200: #bfdbfe;
    --color-navy-300: #93c5fd;
    --color-navy-400: #60a5fa;
    --color-navy-500: #0036b0;
    --color-navy-600: #001E62;
    --color-navy-700: #001a52;
    --color-navy-800: #001440;
    --color-navy-900: #000e30;

    /* ── Primitive: Slate (modern neutral palette) ── */
    --color-slate-50:  #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* ── Primitive: Brand accent ── */
    --color-brand-500: #001E62;
    --color-brand-400: #0036b0;
    --color-accent-teal: #00c9a7;
    --color-accent-amber: #f59e0b;
    --color-accent-indigo: #4f46e5;

    /* ── Primitive: Status ── */
    --color-green-500: #10b981;
    --color-green-100: #d1fae5;
    --color-red-500:   #ef4444;
    --color-red-100:   #fee2e2;
    --color-amber-500: #f59e0b;
    --color-amber-100: #fef3c7;
    --color-blue-500:  #3b82f6;
    --color-blue-100:  #dbeafe;

    /* ── Primitive: Spacing scale ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Primitive: Radius scale ── */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 9999px;

    /* ── Primitive: Shadows ── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ── Semantic: Surfaces & text ── */
    --surface:        #ffffff;
    --surface-raised: #ffffff;
    --surface-muted:  #f8f9fa;
    --text:           var(--color-slate-800);
    --text-secondary: var(--color-slate-500);
    --text-muted:     var(--color-slate-400);
    --text-inverse:   #ffffff;
    --border:         var(--color-slate-200);
    --border-light:   var(--color-slate-100);

    /* ── Semantic: Brand & status ── */
    --brand:          var(--color-brand-500);
    --brand-hover:    var(--color-brand-400);
    --brand-light:    var(--color-navy-50);
    --brand-muted:    rgba(0, 30, 98, 0.08);
    --brand-gradient: linear-gradient(135deg, #001E62 0%, #0036b0 100%);
    --accent:         var(--color-accent-teal);
    --success:        var(--color-green-500);
    --success-bg:     var(--color-green-100);
    --danger:         var(--color-red-500);
    --danger-bg:      var(--color-red-100);
    --warning:        var(--color-amber-500);
    --warning-bg:     var(--color-amber-100);
    --info:           var(--color-blue-500);
    --info-bg:        var(--color-blue-100);

    /* ── Component tokens ── */
    --btn-height:       44px;
    --btn-height-sm:    36px;
    --btn-radius:       var(--radius-sm);
    --card-radius:      var(--radius-md);
    --input-radius:     var(--radius-sm);
    --modal-backdrop:   rgba(0, 0, 0, 0.5);
    --modal-radius:     var(--radius-lg);
    --header-height:    60px;
    --bottom-nav-height: 68px;

    /* ── Bootstrap-neutral palette (legacy --tw-gray-* source) ── */
    --color-neutral-100: #f1f3f5;
    --color-neutral-200: #e9ecef;
    --color-neutral-300: #dee2e6;
    --color-neutral-500: #6c757d;
    --color-neutral-600: #868e96;
    --color-neutral-700: #495057;
    --color-neutral-900: #212529;

    /* ── Legacy --tw-* aliases (Phase 2) ──
       Consumers keep using --tw-primary etc.; values flow from semantic tokens. */
    --tw-primary:        var(--brand);
    --tw-primary-light:  var(--brand-hover);
    --tw-accent:         var(--accent);
    --tw-bg:             var(--surface-muted);
    --tw-white:          var(--surface);
    --tw-gray-100:       var(--color-neutral-100);
    --tw-gray-200:       var(--color-neutral-200);
    --tw-gray-300:       var(--color-neutral-300);
    --tw-gray-400:       #ced4da;
    --tw-gray-500:       var(--color-neutral-500);
    --tw-gray-600:       var(--color-neutral-600);
    --tw-gray-700:       var(--color-neutral-700);
    --tw-gray-800:       #343a40;
    --tw-gray-900:       var(--color-neutral-900);
    --tw-gray-50:        #f9fafb;
    --tw-shadow:         var(--shadow-sm);
    --tw-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.12);
    --tw-shadow-lg:      var(--shadow-lg);
    --tw-radius:         var(--radius-md);
    --tw-radius-sm:      var(--radius-sm);
    --tw-radius-lg:      var(--radius-lg);
    --tw-radius-xl:      24px;
    --tw-font-heading:   var(--font-sans);
    --tw-font-body:      var(--font-sans);
    --tw-header-bg:      var(--surface);
    --tw-header-text:    var(--color-neutral-900);
    --tw-footer-bg:      var(--color-neutral-900);
    --tw-footer-text:    var(--text-inverse);
    --tw-hero-overlay:   rgba(0, 30, 98, 0.4);
    --tw-success:        var(--success);
    --tw-warning:        var(--warning);
    --tw-danger:         var(--danger);
    --tw-info:           var(--info);

    /* ── Legacy --admin-* aliases (Phase 3e) ── */
    --admin-primary: var(--brand);
    --admin-primary-dark: var(--brand-hover);
    --admin-primary-light: var(--brand-hover);
    --admin-secondary: #059669;
    --admin-success: var(--success);
    --admin-warning: var(--warning);
    --admin-danger: var(--danger);
    --admin-info: #06b6d4;
    --admin-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --admin-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --admin-gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --admin-gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --admin-gradient-blue-green: linear-gradient(135deg, #2563eb 0%, #059669 100%);
    --admin-shadow-sm: var(--shadow-sm);
    --admin-shadow-md: var(--shadow-md);
    --admin-shadow-lg: var(--shadow-lg);
    --admin-shadow-xl: var(--shadow-xl);
    --app-header-height: 64px;
    --app-bottom-nav-height: 72px;
    --app-padding: 16px;

    /* ── Legacy --rd-* aliases (Phase 3e) ── */
    --rd-primary: var(--brand);
    --rd-primary-hover: var(--brand-hover);
    --rd-primary-light: var(--brand-light);
    --rd-primary-muted: var(--brand-muted);
    --rd-primary-100: var(--color-navy-100);
    --rd-primary-gradient: var(--brand-gradient);
    --rd-accent: var(--accent);
    --rd-success: var(--success);
    --rd-success-light: var(--success-bg);
    --rd-success-muted: rgba(16, 185, 129, 0.1);
    --rd-warning: var(--warning);
    --rd-warning-light: var(--warning-bg);
    --rd-warning-muted: rgba(245, 158, 11, 0.1);
    --rd-danger: var(--danger);
    --rd-danger-light: var(--danger-bg);
    --rd-danger-muted: rgba(239, 68, 68, 0.1);
    --rd-info: var(--info);
    --rd-info-light: var(--info-bg);
    --rd-bg: var(--surface-muted);
    --rd-surface: var(--surface);
    --rd-surface-raised: var(--surface-raised);
    --rd-border: var(--border);
    --rd-border-light: var(--border-light);
    --rd-text-primary: var(--text);
    --rd-text-secondary: var(--text-secondary);
    --rd-text-muted: var(--text-muted);
    --rd-text-inverse: var(--text-inverse);
    --rd-glass-bg: rgba(255, 255, 255, 0.85);
    --rd-glass-border: rgba(255, 255, 255, 0.3);
    --rd-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    --rd-glass-blur: 20px;
    --rd-shadow-xs: var(--shadow-xs);
    --rd-shadow-sm: var(--shadow-sm);
    --rd-shadow-md: var(--shadow-md);
    --rd-shadow-lg: var(--shadow-lg);
    --rd-shadow-xl: var(--shadow-xl);
    --rd-header-height: var(--header-height);
    --rd-bottom-nav-height: var(--bottom-nav-height);
    --rd-content-padding: 16px;
    --rd-radius-xs: var(--radius-xs);
    --rd-radius-sm: var(--radius-sm);
    --rd-radius-md: var(--radius-md);
    --rd-radius-lg: var(--radius-lg);
    --rd-radius-xl: var(--radius-xl);
    --rd-radius-pill: var(--radius-pill);
    --rd-font: 'Inter', var(--font-sans);
    --rd-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --rd-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --rd-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark mode semantic overrides (Phase 3) ──
   dark-mode.css loads last for legacy hardcoded rules; these tokens
   propagate via --tw-* / --rd-* aliases without !important. */
@media (prefers-color-scheme: dark) {
    :root {
        --surface:        #1e293b;
        --surface-raised: #334155;
        --surface-muted:  #0f172a;
        --text:           #e2e8f0;
        --text-secondary: #94a3b8;
        --text-muted:     #64748b;
        --border:         #334155;
        --border-light:   #2a3850;
        --brand:          #60a5fa;
        --brand-hover:    #93c5fd;
        --brand-light:    rgba(96, 165, 250, 0.18);
        --brand-muted:    rgba(96, 165, 250, 0.15);
        --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
        --input-surface:  #1b2638;

        --color-neutral-100: #232f43;
        --color-neutral-200: #334155;
        --color-neutral-300: #3d4a60;
        --color-neutral-500: #94a3b8;
        --color-neutral-700: #cbd5e1;
        --color-neutral-900: #e2e8f0;

        --tw-white:          #ffffff;
        --tw-shadow:         0 2px 8px rgba(0, 0, 0, 0.4);
        --tw-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.5);
        --tw-header-bg:      #1e293b;
        --tw-header-text:    #e2e8f0;
        --tw-footer-bg:      #0f172a;

        --rd-glass-bg: rgba(15, 23, 42, 0.85);
        --rd-glass-border: rgba(51, 65, 85, 0.5);
        --rd-text-inverse: #0b1220;

        --rd-success-light: rgba(16, 185, 129, 0.18);
        --rd-warning-light: rgba(245, 158, 11, 0.18);
        --rd-danger-light:  rgba(239, 68, 68, 0.18);
        --rd-primary-light: rgba(96, 165, 250, 0.18);
        --success-bg: rgba(16, 185, 129, 0.18);
        --warning-bg: rgba(245, 158, 11, 0.18);
        --danger-bg:  rgba(239, 68, 68, 0.18);
        --error-bg:   rgba(239, 68, 68, 0.18);
        --info-bg:    rgba(96, 165, 250, 0.18);
    }
}