/* ============================================================
   HAWIYYA — Unified Design Tokens
   Single source of truth for admin, auth, and guest surfaces.
   Canonical vars live under --color/--surface/--text/--radius/
   --shadow/--ease/--font. Legacy --hw-*, --auth-*, --g-* names
   are kept as aliases so existing views keep working.
   ============================================================ */

:root {
    /* ── Brand palette ─────────────────────────────────────── */
    --color-primary:        #6366F1;
    --color-primary-rgb:    99, 102, 241;
    --color-primary-hover:  #4F46E5;
    --color-primary-light:  #818CF8;

    --color-violet:         #8B5CF6;
    --color-violet-rgb:     139, 92, 246;

    --color-accent:         #06B6D4;
    --color-accent-rgb:     6, 182, 212;

    /* Semantic */
    --color-danger:         #EF4444;
    --color-danger-rgb:     239, 68, 68;
    --color-warning:        #F59E0B;
    --color-warning-rgb:    245, 158, 11;
    --color-success:        #10B981;
    --color-success-rgb:    16, 185, 129;
    --color-info:           #3B82F6;
    --color-info-rgb:       59, 130, 246;
    --color-orange:         #F97316;
    --color-orange-rgb:     249, 115, 22;
    --color-pink:           #EC4899;
    --color-pink-rgb:       236, 72, 153;

    /* Soft tints (for chips, icon bubbles, soft buttons) */
    --tint-primary:   rgba(99, 102, 241, 0.10);
    --tint-violet:    rgba(139, 92, 246, 0.10);
    --tint-accent:    rgba(6, 182, 212, 0.10);
    --tint-danger:    rgba(239, 68, 68, 0.10);
    --tint-warning:   rgba(245, 158, 11, 0.12);
    --tint-success:   rgba(16, 185, 129, 0.10);
    --tint-info:      rgba(59, 130, 246, 0.10);
    --tint-orange:    rgba(249, 115, 22, 0.10);
    --tint-pink:      rgba(236, 72, 153, 0.10);

    /* Brand gradient — use everywhere a "primary" gradient appears */
    --gradient-brand:       linear-gradient(135deg, #6366F1, #8B5CF6);
    --gradient-brand-hover: linear-gradient(135deg, #4F46E5, #7C3AED);
    --gradient-brand-soft:  linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));

    /* ── Surfaces ──────────────────────────────────────────── */
    --surface-body:    #F5F5F7;
    --surface-mesh:    radial-gradient(ellipse at 15% 5%,  rgba(0,0,0,0.012) 0%, transparent 50%),
                       radial-gradient(ellipse at 85% 95%, rgba(0,0,0,0.008) 0%, transparent 50%);
    --surface-card:    #FFFFFF;
    --surface-hover:   rgba(0, 0, 0, 0.03);
    --surface-active:  rgba(99, 102, 241, 0.08);
    --surface-muted:   rgba(0, 0, 0, 0.025);
    --surface-input:   #F4F6FA;

    /* Liquid glass layers */
    --glass:           rgba(255, 255, 255, 0.65);
    --glass-strong:    rgba(255, 255, 255, 0.82);
    --glass-subtle:    rgba(255, 255, 255, 0.45);
    --glass-border:    rgba(0, 0, 0, 0.06);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --glass-blur:      saturate(120%) blur(30px);
    --glass-blur-lg:   saturate(120%) blur(40px);
    --glass-blur-sm:   saturate(150%) blur(10px);

    /* ── Text ──────────────────────────────────────────────── */
    --text-1: #0F172A;   /* titles */
    --text-2: #475569;   /* body */
    --text-3: #94A3B8;   /* muted */
    --text-4: #CBD5E1;   /* disabled / hairlines in type */

    /* ── Borders ───────────────────────────────────────────── */
    --border:        rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.10);

    /* ── Radii ─────────────────────────────────────────────── */
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   22px;
    --radius-xl:   28px;
    --radius-pill: 9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-xs:    0 1px 2px  rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.08);
    --shadow-xl:    0 24px 60px rgba(0, 0, 0, 0.12);
    --shadow-glass: 0 1px 3px  rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
    --shadow-glow:  0 0 20px   rgba(99, 102, 241, 0.08);
    --shadow-btn:   0 4px 12px rgba(99, 102, 241, 0.25);
    --shadow-btn-hover: 0 6px 20px rgba(99, 102, 241, 0.35);

    /* ── Motion ────────────────────────────────────────────── */
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Typography ────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

    /* ── Layout primitives (admin shell) ───────────────────── */
    --sidebar-w:         256px;
    --sidebar-collapsed: 72px;
    --nav-h:             60px;

    /* ── Legacy aliases — DO NOT reference these in new CSS ── */
    /* Admin (--hw-*) */
    --hw-primary:            var(--color-primary);
    --hw-primary-rgb:        var(--color-primary-rgb);
    --hw-primary-light:      var(--color-primary-light);
    --hw-primary-lighter:    var(--tint-primary);
    --hw-primary-tint:       var(--tint-primary);
    --hw-violet:             var(--color-violet);
    --hw-accent:             var(--color-accent);
    --hw-accent-rgb:         var(--color-accent-rgb);
    --hw-accent-light:       var(--tint-accent);
    --hw-accent-tint:        var(--tint-accent);
    --hw-danger:             var(--color-danger);
    --hw-danger-rgb:         var(--color-danger-rgb);
    --hw-danger-light:       var(--tint-danger);
    --hw-danger-tint:        var(--tint-danger);
    --hw-warning:            var(--color-warning);
    --hw-warning-rgb:        var(--color-warning-rgb);
    --hw-warning-light:      var(--tint-warning);
    --hw-warning-tint:       var(--tint-warning);
    --hw-success:            var(--color-success);
    --hw-success-rgb:        var(--color-success-rgb);
    --hw-success-light:      var(--tint-success);
    --hw-success-tint:       var(--tint-success);
    --hw-green:              var(--color-success);
    --hw-info:               var(--color-info);
    --hw-info-rgb:           var(--color-info-rgb);
    --hw-info-light:         var(--tint-info);
    --hw-info-tint:          var(--tint-info);
    --hw-orange:             var(--color-orange);
    --hw-pink:               var(--color-pink);

    --bg-body:   var(--surface-body);
    --bg-mesh:   var(--surface-mesh);
    --bg-hover:  var(--surface-hover);
    --bg-active: var(--surface-active);
    --bg-muted:  var(--surface-muted);
    --surface:   var(--surface-card);

    --border-glass: var(--glass-border);

    --shadow-glow-strong: 0 0 32px rgba(99, 102, 241, 0.18);

    --r-xs:   var(--radius-xs);
    --r-sm:   var(--radius-sm);
    --r-md:   var(--radius-md);
    --r-lg:   var(--radius-lg);
    --r-xl:   var(--radius-xl);
    --r-pill: var(--radius-pill);

    /* Older ad-hoc names found scattered across admin views */
    --bg-1:         var(--surface-input);
    --bg-2:         var(--surface-muted);
    --bg-secondary: var(--surface-muted);
    --border-1:     var(--border);
    --border-light: var(--border);
    --surface-2:    var(--surface-muted);

    /* Auth (--auth-*) — unified to brand indigo */
    --auth-accent:       var(--color-primary);
    --auth-accent-2:     var(--color-violet);
    --auth-accent-rgb:   var(--color-primary-rgb);
    --auth-accent-2-rgb: var(--color-violet-rgb);
    --auth-grad:         var(--gradient-brand);
    --auth-grad-hover:   var(--gradient-brand-hover);
    --auth-grad-subtle:  var(--gradient-brand-soft);

    --auth-bg:           var(--surface-body);
    --auth-bg-pure:      var(--surface-card);
    --auth-bg-hover:     var(--surface-hover);
    --auth-bg-input:     var(--surface-input);

    --auth-text-1: var(--text-1);
    --auth-text-2: var(--text-2);
    --auth-text-3: var(--text-3);
    --auth-text-4: var(--text-4);

    --auth-green:     var(--color-success);
    --auth-green-rgb: var(--color-success-rgb);
    --auth-red:       var(--color-danger);
    --auth-red-rgb:   var(--color-danger-rgb);
    --auth-amber:     var(--color-warning);
    --auth-amber-rgb: var(--color-warning-rgb);

    --auth-border:       var(--border);
    --auth-border-input: var(--border-strong);

    --auth-shadow-xs:         var(--shadow-xs);
    --auth-shadow-sm:         var(--shadow-sm);
    --auth-shadow-md:         var(--shadow-md);
    --auth-shadow-lg:         var(--shadow-lg);
    --auth-shadow-xl:         var(--shadow-xl);
    --auth-shadow-glow:       var(--shadow-glow);
    --auth-shadow-glow-strong:var(--shadow-glow-strong);
    --auth-shadow-btn:        var(--shadow-btn);
    --auth-shadow-btn-hover:  var(--shadow-btn-hover);
    --auth-shadow-green:      0 4px 16px rgba(16, 185, 129, 0.25);

    --auth-glass:        rgba(255, 255, 255, 0.15);
    --auth-glass-strong: rgba(255, 255, 255, 0.25);
    --auth-glass-border: rgba(255, 255, 255, 0.25);
    --auth-glass-blur:   saturate(120%) blur(20px);

    --auth-r-sm:  8px;
    --auth-r-md:  12px;
    --auth-r-lg:  var(--radius-md);
    --auth-r-xl:  var(--radius-lg);
    --auth-r-2xl: var(--radius-xl);

    --auth-ease:        var(--ease);
    --auth-ease-out:    var(--ease-out);
    --auth-ease-bounce: var(--ease-bounce);
    --auth-ease-spring: var(--ease-spring);

    /* Guest (--g-*) */
    --g-primary:       var(--color-primary);
    --g-primary-dark:  var(--color-primary-hover);
    --g-accent:        var(--color-accent);
    --g-bg:            var(--surface-body);
    --g-surface:       var(--surface-card);
    --g-surface-hover: var(--surface-hover);
    --g-text-1:        var(--text-1);
    --g-text-2:        var(--text-2);
    --g-text-3:        var(--text-3);
    --g-text-4:        var(--text-4);
    --g-border:        var(--border);
    --g-danger:        var(--color-danger);
    --g-success:       var(--color-success);
    --g-radius:        var(--radius-md);
    --g-radius-sm:     var(--radius-sm);
    --g-shadow:        var(--shadow-glass);
    --g-shadow-lg:     var(--shadow-lg);
    --g-glass:         var(--glass-strong);
    --g-glass-blur:    var(--glass-blur);
    --g-font:          var(--font-sans);
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   Two activation paths:
     1. Admin's explicit toggle:        [data-theme="dark"]
     2. OS preference on pages that don't set data-theme
        (auth, guest) — applies via the media query below.
   The data-theme="light" override beats the media query.
   ============================================================ */

[data-theme="dark"] {
    --surface-body:    #0B0D17;
    --surface-mesh:    radial-gradient(ellipse at 15% 5%,  rgba(99, 102, 241, 0.12) 0%, transparent 50%),
                       radial-gradient(ellipse at 85% 95%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                       radial-gradient(ellipse at 45% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 65%);
    --surface-card:    #151D2E;
    --surface-hover:   rgba(255, 255, 255, 0.04);
    --surface-active:  rgba(99, 102, 241, 0.18);
    --surface-muted:   rgba(255, 255, 255, 0.04);
    --surface-input:   rgba(255, 255, 255, 0.04);

    --glass:        rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.10);
    --glass-subtle: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --text-1: #F1F5F9;
    --text-2: #CBD5E1;
    --text-3: #64748B;
    --text-4: #475569;

    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.10);

    --shadow-xs:    0 1px 2px  rgba(0, 0, 0, 0.25);
    --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.20);
    --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.35);
    --shadow-xl:    0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --tint-primary: rgba(99, 102, 241, 0.16);
    --tint-violet:  rgba(139, 92, 246, 0.16);
    --tint-accent:  rgba(6, 182, 212, 0.16);
    --tint-danger:  rgba(239, 68, 68, 0.14);
    --tint-warning: rgba(245, 158, 11, 0.14);
    --tint-success: rgba(16, 185, 129, 0.14);
    --tint-info:    rgba(59, 130, 246, 0.14);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --surface-body:    #0B0D17;
        --surface-card:    #151D2E;
        --surface-hover:   rgba(255, 255, 255, 0.04);
        --surface-active:  rgba(99, 102, 241, 0.18);
        --surface-muted:   rgba(255, 255, 255, 0.04);
        --surface-input:   rgba(255, 255, 255, 0.04);

        --glass:        rgba(255, 255, 255, 0.06);
        --glass-strong: rgba(255, 255, 255, 0.10);
        --glass-subtle: rgba(255, 255, 255, 0.04);
        --glass-border: rgba(255, 255, 255, 0.10);

        --text-1: #F1F5F9;
        --text-2: #CBD5E1;
        --text-3: #64748B;
        --text-4: #475569;

        --border:        rgba(255, 255, 255, 0.06);
        --border-strong: rgba(255, 255, 255, 0.10);

        --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.20);
        --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.25);
        --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.35);
        --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.20);

        --tint-primary: rgba(99, 102, 241, 0.16);
        --tint-danger:  rgba(239, 68, 68, 0.14);
        --tint-warning: rgba(245, 158, 11, 0.14);
        --tint-success: rgba(16, 185, 129, 0.14);
        --tint-info:    rgba(59, 130, 246, 0.14);
    }
}

/* ============================================================
   GLOBAL RESETS + BASE — shared across admin / auth / guest
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--text-1);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

::selection { background: var(--tint-primary); }

::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(0, 0, 0, 0.12); border-radius: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible { outline: none; }

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