/* ════════════════════════════════════════════════════════════════════
   PayCash Design Tokens — Single Source of Truth
   ════════════════════════════════════════════════════════════════════
   • All colors, spacing, typography, layout dims defined ONCE here
   • Override per-theme below
   • NEVER hardcode a color/space value anywhere else
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────── */
  --brand-primary:     #D97656;
  --brand-primary-dim: #B8604A;
  --brand-on-primary:  #FFFFFF;

  /* ── Surfaces (Dark theme — DEFAULT) ───────────────────────────── */
  --bg-base:        #0B0E14;
  --bg-surface:     #14171F;
  --bg-elevated:    #1C2030;
  --bg-overlay:     #252A3A;
  --bg-hover:       #2A2F45;

  /* ── Borders ───────────────────────────────────────────────────── */
  --border:         #2A2F45;
  --border-strong:  #3D4358;
  --border-focus:   #D97656;

  /* ── Text ──────────────────────────────────────────────────────── */
  --text-primary:   #EAECEF;
  --text-secondary: #B7BDC6;
  --text-muted:     #848E9C;
  --text-disabled:  #474D57;
  --text-on-accent: #0B0E14;

  /* ── Status Colors ─────────────────────────────────────────────── */
  --success:        #0ECB81;
  --success-bg:     rgba(14,203,129,0.12);
  --success-border: rgba(14,203,129,0.3);
  --danger:         #F6465D;
  --danger-bg:      rgba(246,70,93,0.12);
  --danger-border:  rgba(246,70,93,0.3);
  --warning:        #D97656;
  --warning-bg:     rgba(217,118,86,0.12);
  --warning-border: rgba(217,118,86,0.3);
  --info:           #2684FF;
  --info-bg:        rgba(38,132,255,0.12);
  --info-border:    rgba(38,132,255,0.3);
  --neutral:        #848E9C;
  --neutral-bg:     rgba(132,142,156,0.12);

  /* ── Spacing (rem-based for accessibility scaling) ─────────────── */
  --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;

  /* Aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);

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

  /* ── Shadow ────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.45);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.55);

  /* ── Typography ────────────────────────────────────────────────── */
  --font-sans:  'Noto Kufi Arabic', 'Cairo', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, 'Consolas', monospace;
  --font-num:   'JetBrains Mono', 'Inter', sans-serif;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-md:    14px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Layout ────────────────────────────────────────────────────── */
  --topbar-h:             64px;
  --sidebar-w:            240px;
  --sidebar-collapsed-w:  64px;
  --content-max:          1440px;

  /* ── Z-Index ───────────────────────────────────────────────────── */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  900;
  --z-topbar:   1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ── Form Sizes (consistent everywhere) ────────────────────────── */
  --input-h:    44px;
  --input-h-sm: 36px;
  --btn-h:      40px;
  --btn-h-sm:   32px;
  --btn-h-lg:   48px;

  /* ── Table ─────────────────────────────────────────────────────── */
  --table-row-h:      52px;
  --table-header-h:   44px;
  --table-cell-px:    16px;

  color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════════════
   Light Theme Override
   ════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-base:        #F0F2F5;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F8F9FA;
  --bg-overlay:     #EBEDF0;
  --bg-hover:       #E4E7EB;

  --border:         #E0E3E7;
  --border-strong:  #C2C7CF;
  --border-focus:   #D97656;

  --text-primary:   #1E2329;
  --text-secondary: #474D57;
  --text-muted:     #707A8A;
  --text-disabled:  #B7BDC6;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.05);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.18);

  color-scheme: light;
}

/* ════════════════════════════════════════════════════════════════════
   Reduced Motion
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}