/**
 * Taaboor Design System — tokens.css
 * Single source of truth: color, type, spacing, radius, shadow, motion, z-index, breakpoints.
 *
 * Identity: "Signal" — cool graphite surfaces, violet–indigo primary, restrained enterprise SaaS.
 * (Replaces legacy blue-forward palette; components consume these vars — no hardcoded brand in views.)
 */

:root {
  /* ── Brand (violet / indigo — distinct from legacy pure blue) ── */
  --color-primary: #5b21b6;
  --color-primary-hover: #4c1d95;
  --color-primary-soft: #ede9fe;
  --color-primary-strong: #3b0764;
  --color-primary-glow: color-mix(in srgb, var(--color-primary) 28%, transparent);
  --color-danger-glow: color-mix(in srgb, var(--color-danger) 22%, transparent);

  /* Accent (teal — operational highlights, success-adjacent) */
  --color-accent: #0f766e;
  --color-accent-soft: #ccfbf1;

  /* Surfaces */
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-2: #fafafa;
  --color-surface-3: #eceef2;
  --color-surface-soft: #f9fafb;
  --color-surface-muted: #e5e7eb;
  --color-surface-glass: rgba(255, 255, 255, 0.78);

  /* Text */
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-text-subtle: #6b7280;
  --color-text-on-dark: #f3f4f6;
  --color-text-on-primary: #ffffff;
  --color-text-soft: #9ca3af;
  --color-muted: var(--color-text-muted);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-subtle);
  --text-muted: var(--color-text-soft);

  /* Borders */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-soft: #f3f4f6;
  --color-border-glass: rgba(107, 114, 128, 0.2);

  /* Status */
  --color-success: #059669;
  --color-success-soft: #d1fae5;
  --color-success-strong: #065f46;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-warning-strong: #92400e;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-danger-strong: #991b1b;
  --color-info: #0891b2;
  --color-info-soft: #cffafe;
  --color-info-strong: #155e75;
  --color-purple: #7c3aed;
  --color-purple-soft: #ede9fe;

  /* Sidebar (dark rail) */
  --color-sidebar-bg: #0f172a;
  --color-sidebar-bg-2: #1e293b;
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-text-muted: #94a3b8;
  --color-sidebar-active: #8b5cf6;
  --color-sidebar-active-bg: color-mix(in srgb, var(--color-sidebar-active) 15%, transparent);
  --color-sidebar-border: #1e293b;

  /* 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-md: var(--space-4);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* Shadows — soft, editorial (avoid heavy “card stack”) */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.07);
  --shadow-lg: 0 14px 36px rgba(17, 24, 39, 0.09);
  --shadow-xl: 0 22px 56px rgba(17, 24, 39, 0.1);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 24%, transparent);
  --shadow-card-hover: 0 4px 12px rgba(17, 24, 39, 0.05), 0 18px 40px rgba(17, 24, 39, 0.08);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Cairo", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.95rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.45rem;
  --font-size-2xl: 1.85rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.8rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-snug: 1.35;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms ease;
  --transition-base: 220ms var(--ease-out-expo);
  --transition-slow: 350ms var(--ease-out-expo);

  /* Z-index scale (explicit + legacy aliases) */
  --z-base: 1;
  --z-sticky: 80;
  --z-topbar: 100;
  --z-sidebar: 110;
  --z-dropdown: 200;
  --z-overlay: 600;
  --z-modal: 1000;
  --z-modal-layer: 1000;
  --z-toast: 1100;

  /* Layout */
  --sidebar-width: 268px;
  --topbar-height: 64px;
  --container-max: 1280px;
  --container-narrow: 720px;

  /* Breakpoints (reference — use in @media, not var() where unsupported) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* Glass */
  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.38);

  /* Page mesh (manager shell) */
  --premium-gradient-page-soft: linear-gradient(165deg, #f9fafb 0%, #f5f3ff 42%, #f3f4f6 100%);
  --premium-gradient-mesh: radial-gradient(ellipse 85% 55% at 50% -15%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 58%);
  --premium-border-subtle: rgba(107, 114, 128, 0.22);
  --premium-border-rim: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --premium-shadow-elevated: var(--shadow-sm);
  --premium-shadow-floating: var(--shadow-md);
  --premium-transition-smooth: 0.35s var(--ease-out-expo);
  --premium-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  --premium-radius-card: var(--radius-xl);

  /* Staff console — maps to global tokens (quiet ops floor) */
  --staff-bg: var(--color-bg);
  --staff-glass-bg: var(--color-surface-glass);
  --staff-glass-border: var(--glass-border);
  --staff-glass-blur: 16px;
  --staff-card-shadow: var(--shadow-sm);
  --staff-card-hover-shadow: var(--shadow-md);
  --staff-gradient-warm: linear-gradient(165deg, #f9fafb 0%, #f5f3ff 38%, #fafafa 100%);
  --staff-ticket-radius: var(--radius-lg);
  --staff-pulse-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --staff-slide-duration: 0.4s;
  --staff-status-online: var(--color-success);
  --staff-status-break: var(--color-warning);

  /* Progress ring */
  --progress-size: 3rem;
  --progress-stroke: 4px;
  --progress-track: rgba(107, 114, 128, 0.15);
  --progress-fill: var(--color-primary);
}

/* Optional density */
.density-compact {
  --space-3: 0.5rem;
  --space-4: 0.7rem;
  --space-5: 0.85rem;
  --font-size-base: 0.88rem;
}

@media (max-width: 1024px) {
  :root {
    --topbar-height: 60px;
    --sidebar-width: 272px;
  }
}