/**
 * Pasarguard Reseller Management System
 * Design Tokens — Light / Dark themes, RTL-first, glassmorphism
 */

/* ─── Font: Vazirmatn (Persian) ─── */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

/* ─── Root defaults (light) ─── */
:root {
  color-scheme: light;

  /* Typography */
  --font-sans: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono: 'Vazirmatn', ui-monospace, 'Cascadia Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

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

  /* Spacing scale (4px base) */
  --space-0: 0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows — Stripe/Linear inspired */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 0 3px rgba(99, 91, 255, 0.15);
  --shadow-glow-success: 0 0 0 3px rgba(16, 185, 129, 0.15);
  --shadow-glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* Layout */
  --sidebar-width: 17.5rem;
  --sidebar-collapsed-width: 4.5rem;
  --header-height: 4rem;
  --content-max-width: 90rem;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 320;
  --z-overlay: 340;
  --z-sidebar: 360;
  --z-modal: 600;
  --z-toast: 700;

  /* ─── Light theme colors ─── */
  --color-bg: #fafafa;
  --color-bg-subtle: #f5f5f7;
  --color-bg-muted: #e8e8ed;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: rgba(255, 255, 255, 0.85);

  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-subtle: #f1f5f9;

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-link: #635bff;

  --color-primary: #635bff;
  --color-primary-hover: #5046e5;
  --color-primary-active: #4338ca;
  --color-primary-subtle: #eef2ff;
  --color-primary-muted: rgba(99, 91, 255, 0.12);

  --color-accent: #0ea5e9;
  --color-accent-hover: #0284c7;
  --color-accent-subtle: #e0f2fe;

  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-subtle: #ecfdf5;
  --color-success-text: #047857;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-subtle: #fffbeb;
  --color-warning-text: #b45309;

  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-subtle: #fef2f2;
  --color-danger-text: #b91c1c;

  --color-info: #6366f1;
  --color-info-subtle: #eef2ff;
  --color-info-text: #4338ca;

  /* Glassmorphism — light */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-subtle: rgba(226, 232, 240, 0.8);
  --glass-blur: 16px;
  --glass-blur-strong: 24px;
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);

  /* Sidebar & header */
  --sidebar-bg: var(--glass-bg-strong);
  --header-bg: var(--glass-bg-strong);
  --nav-item-hover: rgba(99, 91, 255, 0.06);
  --nav-item-active: rgba(99, 91, 255, 0.12);
  --nav-item-active-text: var(--color-primary);

  /* Form */
  --input-bg: #ffffff;
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--color-text-muted);

  /* Table */
  --table-header-bg: var(--color-bg-subtle);
  --table-row-hover: rgba(99, 91, 255, 0.03);
  --table-stripe: rgba(248, 250, 252, 0.8);

  /* Chart palette */
  --chart-1: #635bff;
  --chart-2: #0ea5e9;
  --chart-3: #10b981;
  --chart-4: #f59e0b;
  --chart-5: #ec4899;
  --chart-6: #8b5cf6;
  --chart-grid: rgba(148, 163, 184, 0.2);
  --chart-text: var(--color-text-secondary);

  /* Skeleton */
  --skeleton-base: #e2e8f0;
  --skeleton-shine: #f8fafc;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(99, 91, 255, 0.25);

  /* Gradient accents */
  --gradient-primary: linear-gradient(135deg, #635bff 0%, #0ea5e9 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(99, 91, 255, 0.08) 0%, transparent 50%),
    radial-gradient(at 80% 0%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
    radial-gradient(at 0% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
}

/* ─── Dark theme ─── */
[data-theme='dark'],
:root[data-theme='dark'] {
  color-scheme: dark;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px 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.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  --shadow-glow-success: 0 0 0 3px rgba(52, 211, 153, 0.2);
  --shadow-glow-danger: 0 0 0 3px rgba(248, 113, 113, 0.2);

  --color-bg: #0b0f19;
  --color-bg-subtle: #111827;
  --color-bg-muted: #1e293b;
  --color-surface: #151b28;
  --color-surface-raised: #1a2234;
  --color-surface-overlay: rgba(21, 27, 40, 0.92);

  --color-border: #1e293b;
  --color-border-strong: #334155;
  --color-border-subtle: #151b28;

  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;
  --color-text-link: #818cf8;

  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
  --color-primary-active: #6366f1;
  --color-primary-subtle: rgba(129, 140, 248, 0.12);
  --color-primary-muted: rgba(129, 140, 248, 0.18);

  --color-accent: #38bdf8;
  --color-accent-hover: #7dd3fc;
  --color-accent-subtle: rgba(56, 189, 248, 0.12);

  --color-success: #34d399;
  --color-success-hover: #6ee7b7;
  --color-success-subtle: rgba(52, 211, 153, 0.12);
  --color-success-text: #6ee7b7;

  --color-warning: #fbbf24;
  --color-warning-hover: #fcd34d;
  --color-warning-subtle: rgba(251, 191, 36, 0.12);
  --color-warning-text: #fcd34d;

  --color-danger: #f87171;
  --color-danger-hover: #fca5a5;
  --color-danger-subtle: rgba(248, 113, 113, 0.12);
  --color-danger-text: #fca5a5;

  --color-info: #818cf8;
  --color-info-subtle: rgba(129, 140, 248, 0.12);
  --color-info-text: #a5b4fc;

  --glass-bg: rgba(21, 27, 40, 0.75);
  --glass-bg-strong: rgba(21, 27, 40, 0.88);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-subtle: rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  --sidebar-bg: var(--glass-bg-strong);
  --header-bg: var(--glass-bg-strong);
  --nav-item-hover: rgba(129, 140, 248, 0.08);
  --nav-item-active: rgba(129, 140, 248, 0.16);
  --nav-item-active-text: var(--color-primary);

  --input-bg: #111827;
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--color-text-muted);

  --table-header-bg: rgba(30, 41, 59, 0.5);
  --table-row-hover: rgba(129, 140, 248, 0.05);
  --table-stripe: rgba(17, 24, 39, 0.5);

  --chart-1: #818cf8;
  --chart-2: #38bdf8;
  --chart-3: #34d399;
  --chart-4: #fbbf24;
  --chart-5: #f472b6;
  --chart-6: #a78bfa;
  --chart-grid: rgba(100, 116, 139, 0.15);
  --chart-text: var(--color-text-secondary);

  --skeleton-base: #1e293b;
  --skeleton-shine: #334155;

  --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.3);

  --gradient-primary: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
  --gradient-surface: linear-gradient(180deg, rgba(21, 27, 40, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(129, 140, 248, 0.12) 0%, transparent 50%),
    radial-gradient(at 80% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
    radial-gradient(at 0% 50%, rgba(52, 211, 153, 0.06) 0%, transparent 50%);
}

/* System preference fallback when data-theme="system" */
@media (prefers-color-scheme: dark) {
  :root[data-theme='system']:not([data-theme-resolved]) {
    color-scheme: dark;
  }

  html[data-theme='system'] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px 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.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --color-bg: #0b0f19;
    --color-bg-subtle: #111827;
    --color-bg-muted: #1e293b;
    --color-surface: #151b28;
    --color-surface-raised: #1a2234;
    --color-surface-overlay: rgba(21, 27, 40, 0.92);
    --color-border: #1e293b;
    --color-border-strong: #334155;
    --color-border-subtle: #151b28;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;
    --color-text-link: #818cf8;
    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-primary-active: #6366f1;
    --color-primary-subtle: rgba(129, 140, 248, 0.12);
    --color-primary-muted: rgba(129, 140, 248, 0.18);
    --color-accent: #38bdf8;
    --color-accent-hover: #7dd3fc;
    --color-accent-subtle: rgba(56, 189, 248, 0.12);
    --color-success: #34d399;
    --color-success-hover: #6ee7b7;
    --color-success-subtle: rgba(52, 211, 153, 0.12);
    --color-success-text: #6ee7b7;
    --color-warning: #fbbf24;
    --color-warning-hover: #fcd34d;
    --color-warning-subtle: rgba(251, 191, 36, 0.12);
    --color-warning-text: #fcd34d;
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-subtle: rgba(248, 113, 113, 0.12);
    --color-danger-text: #fca5a5;
    --color-info: #818cf8;
    --color-info-subtle: rgba(129, 140, 248, 0.12);
    --color-info-text: #a5b4fc;
    --glass-bg: rgba(21, 27, 40, 0.75);
    --glass-bg-strong: rgba(21, 27, 40, 0.88);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-subtle: rgba(255, 255, 255, 0.04);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --sidebar-bg: var(--glass-bg-strong);
    --header-bg: var(--glass-bg-strong);
    --nav-item-hover: rgba(129, 140, 248, 0.08);
    --nav-item-active: rgba(129, 140, 248, 0.16);
    --nav-item-active-text: var(--color-primary);
    --input-bg: #111827;
    --input-border: var(--color-border-strong);
    --input-border-focus: var(--color-primary);
    --input-placeholder: var(--color-text-muted);
    --table-header-bg: rgba(30, 41, 59, 0.5);
    --table-row-hover: rgba(129, 140, 248, 0.05);
    --table-stripe: rgba(17, 24, 39, 0.5);
    --chart-1: #818cf8;
    --chart-2: #38bdf8;
    --chart-3: #34d399;
    --chart-4: #fbbf24;
    --chart-5: #f472b6;
    --chart-6: #a78bfa;
    --chart-grid: rgba(100, 116, 139, 0.15);
    --chart-text: var(--color-text-secondary);
    --skeleton-base: #1e293b;
    --skeleton-shine: #334155;
    --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.3);
    --gradient-primary: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
    --gradient-surface: linear-gradient(180deg, rgba(21, 27, 40, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(129, 140, 248, 0.12) 0%, transparent 50%),
      radial-gradient(at 80% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
      radial-gradient(at 0% 50%, rgba(52, 211, 153, 0.06) 0%, transparent 50%);
  }
}

/* Resolved system theme via JS */
html[data-theme-resolved='dark'] {
  color-scheme: dark;
}

html[data-theme-resolved='light'] {
  color-scheme: light;
}

/* ─── RTL base ─── */
html {
  direction: rtl;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[dir='ltr'] {
  direction: ltr;
}

/* Logical property helpers for RTL/LTR */
:root {
  --inline-start: right;
  --inline-end: left;
  --transform-sidebar-open: translateX(0);
  --transform-sidebar-closed: translateX(100%);
}

html[dir='ltr'] {
  --inline-start: left;
  --inline-end: right;
  --transform-sidebar-open: translateX(0);
  --transform-sidebar-closed: translateX(-100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}