/* ═══════════════════════════════════════════════════════
   Helpex ERP — Centralized Design Tokens
   Light & Dark Theme Support via CSS Custom Properties
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root,
[data-theme="light"] {
  /* ── Brand ── */
  --hp-primary:         #1e293b;
  --hp-secondary:       #2563eb;
  --hp-accent:          #7c3aed;
  --hp-success:         #16a34a;
  --hp-danger:          #dc2626;
  --hp-warning:         #d97706;
  --hp-info:            #0891b2;
  --hp-primary-light:   #334155;
  --hp-secondary-dark:  #1d4ed8;

  /* ── Surface / Background ── */
  --hp-bg:              #f1f5f9;
  --hp-bg-alt:          #f8fafc;
  --hp-surface:         #ffffff;
  --hp-surface-hover:   #f8fafc;
  --hp-surface-active:  #e2e8f0;

  /* ── Text ── */
  --hp-text:            #0f172a;
  --hp-text-secondary:  #475569;
  --hp-text-muted:      #94a3b8;
  --hp-text-light:      #cbd5e1;
  --hp-text-inverse:    #ffffff;

  /* ── Borders ── */
  --hp-border:          #e2e8f0;
  --hp-border-light:    #f1f5f9;
  --hp-border-focus:    var(--hp-secondary);

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

  /* ── Typography ── */
  --hp-font:            'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --hp-font-mono:       'JetBrains Mono', 'Fira Code', monospace;
  --hp-font-size-xs:    0.75rem;
  --hp-font-size-sm:    0.8125rem;
  --hp-font-size-base:  0.875rem;
  --hp-font-size-lg:    1rem;
  --hp-font-size-xl:    1.25rem;
  --hp-font-size-2xl:   1.5rem;
  --hp-font-size-3xl:   1.875rem;
  --hp-line-height:     1.6;

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

  /* ── Border Radius ── */
  --hp-radius-sm: 4px;
  --hp-radius-md: 8px;
  --hp-radius-lg: 12px;
  --hp-radius-xl: 16px;
  --hp-radius-full: 9999px;

  /* ── Sidebar ── */
  --hp-sidebar-width: 250px;
  --hp-sidebar-bg: #1e293b;
  --hp-sidebar-bg-hover: rgba(255,255,255,0.08);
  --hp-sidebar-bg-active: rgba(255,255,255,0.12);
  --hp-sidebar-text: rgba(255,255,255,0.75);
  --hp-sidebar-text-active: #ffffff;
  --hp-sidebar-brand-bg: rgba(255,255,255,0.05);

  /* ── Topbar ── */
  --hp-topbar-bg: #ffffff;
  --hp-topbar-border: #e2e8f0;

  /* ── Cards ── */
  --hp-card-bg: #ffffff;
  --hp-card-border: #e2e8f0;
  --hp-card-shadow: 0 1px 3px rgba(0,0,0,0.08);

  /* ── Tables ── */
  --hp-table-bg: #ffffff;
  --hp-table-stripe: #f8fafc;
  --hp-table-hover: #f1f5f9;
  --hp-table-border: #e2e8f0;

  /* ── Forms ── */
  --hp-input-bg: #ffffff;
  --hp-input-border: #cbd5e1;
  --hp-input-focus-bg: #ffffff;
  --hp-input-focus-border: var(--hp-secondary);
  --hp-input-focus-ring: rgba(37, 99, 235, 0.15);
  --hp-input-disabled-bg: #f1f5f9;

  /* ── Badge / Status ── */
  --hp-badge-draft: #e2e8f0;
  --hp-badge-draft-text: #475569;
  --hp-badge-pending: #fef3c7;
  --hp-badge-pending-text: #92400e;
  --hp-badge-approved: #dcfce7;
  --hp-badge-approved-text: #166534;
  --hp-badge-rejected: #fee2e2;
  --hp-badge-rejected-text: #991b1b;
  --hp-badge-in-transit: #dbeafe;
  --hp-badge-in-transit-text: #1e40af;

  /* ── Gradients ── */
  --hp-gradient-primary:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --hp-gradient-success:   linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  --hp-gradient-warning:   linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --hp-gradient-info:      linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  --hp-gradient-danger:    linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --hp-gradient-sidebar:   linear-gradient(180deg, #1e293b 0%, #0f172a 100%);

  /* ── Transitions ── */
  --hp-transition-fast: 0.15s ease;
  --hp-transition:      0.3s ease;
  --hp-transition-slow: 0.5s ease;

  /* ── Z-Index Scale ── */
  --hp-z-sidebar: 1000;
  --hp-z-backdrop: 999;
  --hp-z-toolbar: 999;
  --hp-z-modal: 1050;
  --hp-z-toast: 9999;
  --hp-z-spinner: 9999;
}

/* ═══════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --hp-primary:         #e2e8f0;
  --hp-secondary:       #60a5fa;
  --hp-accent:          #a78bfa;
  --hp-success:         #4ade80;
  --hp-danger:          #f87171;
  --hp-warning:         #fbbf24;
  --hp-info:            #22d3ee;
  --hp-primary-light:   #94a3b8;
  --hp-secondary-dark:  #3b82f6;

  --hp-bg:              #0f172a;
  --hp-bg-alt:          #1e293b;
  --hp-surface:         #1e293b;
  --hp-surface-hover:   #334155;
  --hp-surface-active:  #475569;

  --hp-text:            #f1f5f9;
  --hp-text-secondary:  #cbd5e1;
  --hp-text-muted:      #64748b;
  --hp-text-light:      #475569;
  --hp-text-inverse:    #0f172a;

  --hp-border:          #334155;
  --hp-border-light:    #1e293b;
  --hp-border-focus:    var(--hp-secondary);

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

  --hp-sidebar-bg: #0f172a;
  --hp-sidebar-bg-hover: rgba(255,255,255,0.06);
  --hp-sidebar-bg-active: rgba(255,255,255,0.1);
  --hp-sidebar-text: rgba(255,255,255,0.6);
  --hp-sidebar-text-active: #ffffff;
  --hp-sidebar-brand-bg: rgba(255,255,255,0.03);

  --hp-topbar-bg: #1e293b;
  --hp-topbar-border: #334155;

  --hp-card-bg: #1e293b;
  --hp-card-border: #334155;
  --hp-card-shadow: 0 1px 3px rgba(0,0,0,0.3);

  --hp-table-bg: #1e293b;
  --hp-table-stripe: #1a2a3a;
  --hp-table-hover: #334155;
  --hp-table-border: #334155;

  --hp-input-bg: #0f172a;
  --hp-input-border: #475569;
  --hp-input-focus-bg: #1e293b;
  --hp-input-focus-border: var(--hp-secondary);
  --hp-input-focus-ring: rgba(96, 165, 250, 0.2);
  --hp-input-disabled-bg: #1e293b;

  --hp-badge-draft: #334155;
  --hp-badge-draft-text: #94a3b8;
  --hp-badge-pending: #78350f;
  --hp-badge-pending-text: #fbbf24;
  --hp-badge-approved: #14532d;
  --hp-badge-approved-text: #4ade80;
  --hp-badge-rejected: #7f1d1d;
  --hp-badge-rejected-text: #fca5a5;
  --hp-badge-in-transit: #1e3a5f;
  --hp-badge-in-transit-text: #93c5fd;

  --hp-gradient-primary:   linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --hp-gradient-success:   linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  --hp-gradient-warning:   linear-gradient(135deg, #b45309 0%, #d97706 100%);
  --hp-gradient-info:      linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
  --hp-gradient-danger:    linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  --hp-gradient-sidebar:   linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

/* ═══════════════════════════════════════════════════════
   System Preference Auto-Detection (Fallback)
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hp-primary:         #e2e8f0;
    --hp-secondary:       #60a5fa;
    --hp-accent:          #a78bfa;
    --hp-success:         #4ade80;
    --hp-danger:          #f87171;
    --hp-warning:         #fbbf24;
    --hp-info:            #22d3ee;
    --hp-primary-light:   #94a3b8;
    --hp-secondary-dark:  #3b82f6;

    --hp-bg:              #0f172a;
    --hp-bg-alt:          #1e293b;
    --hp-surface:         #1e293b;
    --hp-surface-hover:   #334155;
    --hp-surface-active:  #475569;

    --hp-text:            #f1f5f9;
    --hp-text-secondary:  #cbd5e1;
    --hp-text-muted:      #64748b;
    --hp-text-light:      #475569;
    --hp-text-inverse:    #0f172a;

    --hp-border:          #334155;
    --hp-border-light:    #1e293b;
    --hp-border-focus:    var(--hp-secondary);

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

    --hp-sidebar-bg: #0f172a;
    --hp-sidebar-bg-hover: rgba(255,255,255,0.06);
    --hp-sidebar-bg-active: rgba(255,255,255,0.1);
    --hp-sidebar-text: rgba(255,255,255,0.6);
    --hp-sidebar-text-active: #ffffff;
    --hp-sidebar-brand-bg: rgba(255,255,255,0.03);

    --hp-topbar-bg: #1e293b;
    --hp-topbar-border: #334155;

    --hp-card-bg: #1e293b;
    --hp-card-border: #334155;
    --hp-card-shadow: 0 1px 3px rgba(0,0,0,0.3);

    --hp-table-bg: #1e293b;
    --hp-table-stripe: #1a2a3a;
    --hp-table-hover: #334155;
    --hp-table-border: #334155;

    --hp-input-bg: #0f172a;
    --hp-input-border: #475569;
    --hp-input-focus-bg: #1e293b;
    --hp-input-focus-border: var(--hp-secondary);
    --hp-input-focus-ring: rgba(96, 165, 250, 0.2);
    --hp-input-disabled-bg: #1e293b;

    --hp-badge-draft: #334155;
    --hp-badge-draft-text: #94a3b8;
    --hp-badge-pending: #78350f;
    --hp-badge-pending-text: #fbbf24;
    --hp-badge-approved: #14532d;
    --hp-badge-approved-text: #4ade80;
    --hp-badge-rejected: #7f1d1d;
    --hp-badge-rejected-text: #fca5a5;
    --hp-badge-in-transit: #1e3a5f;
    --hp-badge-in-transit-text: #93c5fd;

    --hp-gradient-primary:   linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --hp-gradient-success:   linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    --hp-gradient-warning:   linear-gradient(135deg, #b45309 0%, #d97706 100%);
    --hp-gradient-info:      linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
    --hp-gradient-danger:    linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    --hp-gradient-sidebar:   linear-gradient(180deg, #0f172a 0%, #020617 100%);
  }
}