/* ═══════════════════════════════════════════════════════════════════════
   Design tokens
   Colour always carries meaning here — never decoration, and never the only
   signal (every status pairs colour with an icon or a label).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Sidebar (dark) ───────────────────────────────────────────────── */
  --sidebar-bg:            #0F172A;
  --sidebar-bg-soft:       #1E293B;
  --sidebar-border:        #1E293B;
  --sidebar-text:          #CBD5E1;
  --sidebar-text-muted:    #64748B;
  --sidebar-text-active:   #FFFFFF;
  --sidebar-active-bg:     #134E4A;
  --sidebar-hover-bg:      #1E293B;
  --sidebar-label:         #475569;

  /* ─── Surfaces (light) ─────────────────────────────────────────────── */
  --canvas:                #F8FAFC;
  --surface:               #FFFFFF;
  --surface-soft:          #F1F5F9;
  --surface-hover:         #F8FAFC;
  --border:                #E2E8F0;
  --border-strong:         #CBD5E1;

  /* ─── Text ─────────────────────────────────────────────────────────── */
  --text:                  #0F172A;
  --text-secondary:        #475569;
  --text-muted:            #94A3B8;
  --text-inverse:          #FFFFFF;

  /* ─── Semantic ─────────────────────────────────────────────────────── */
  --primary:               #0D9488;
  --primary-hover:         #0F766E;
  --primary-soft:          #CCFBF1;
  --primary-text:          #115E59;

  --success:               #10B981;
  --success-soft:          #D1FAE5;
  --success-text:          #065F46;

  --warning:               #F59E0B;
  --warning-soft:          #FEF3C7;
  --warning-text:          #92400E;

  --danger:                #EF4444;
  --danger-hover:          #DC2626;
  --danger-soft:           #FEE2E2;
  --danger-text:           #991B1B;

  --info:                  #3B82F6;
  --info-soft:             #DBEAFE;
  --info-text:             #1E40AF;

  --violet:                #8B5CF6;
  --violet-soft:           #EDE9FE;
  --violet-text:           #5B21B6;

  --neutral:               #94A3B8;
  --neutral-soft:          #F1F5F9;
  --neutral-text:          #475569;

  /* ─── Chart palette (colour-blind safe, used everywhere) ───────────── */
  --chart-1: #0D9488;
  --chart-2: #3B82F6;
  --chart-3: #8B5CF6;
  --chart-4: #F59E0B;
  --chart-5: #10B981;
  --chart-6: #EC4899;
  --chart-7: #06B6D4;
  --chart-8: #F97316;

  /* ─── Typography ───────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", var(--font-sans);
  --font-mono: "SF Mono", "Cascadia Mono", "Consolas", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.875rem;  /* 14 — the app's working size */
  --text-md:   1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */

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

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  /* ─── Space (4px 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-16: 4rem;

  /* ─── Radius ───────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ─── Elevation — three levels only ────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04),
               0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow:    0 2px 4px -1px rgb(15 23 42 / 0.06),
               0 4px 12px -2px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 8px 16px -4px rgb(15 23 42 / 0.10),
               0 20px 32px -8px rgb(15 23 42 / 0.12);

  /* ─── Layout ───────────────────────────────────────────────────────── */
  --sidebar-width:           260px;
  --sidebar-width-collapsed: 72px;
  --header-height:           64px;
  --content-max:             1440px;

  /* ─── Motion — everything under 300ms except the app intro ─────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --fast:     120ms;
  --normal:   200ms;
  --slow:     300ms;

  --z-sidebar:  100;
  --z-header:    90;
  --z-dropdown: 200;
  --z-backdrop: 300;
  --z-modal:    400;
  --z-toast:    500;
}

/* Anyone who has asked their system to reduce motion gets none of it. */
@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;
  }
}