/* =============================================================
   variables.css — Central Design Token / CSS Custom Properties
   Lawyer Office App — Design System v1.0
   All visual values should reference these variables.
   ============================================================= */

:root {
  /* ── Brand / Primary Colors ──────────────────────────── */
  --color-primary:        var(--theme-primary,   #0d6b5a);
  --color-primary-alt:    var(--theme-secondary, #12846d);
  --color-primary-soft:   #e6f5f2;
  --color-primary-deep:   #0a5246;

  /* ── Semantic State Colors ───────────────────────────── */
  --color-success:        #0e7d58;
  --color-success-soft:   #dcfce7;
  --color-success-border: #86efac;
  --color-warning:        #d59025;
  --color-warning-soft:   #fef3c7;
  --color-warning-border: #fcd34d;
  --color-danger:         #ba2f24;
  --color-danger-soft:    #fee2e2;
  --color-danger-border:  #fca5a5;
  --color-info:           #1e40af;
  --color-info-soft:      #dbeafe;
  --color-info-border:    #93c5fd;

  /* ── Surface / Background ────────────────────────────── */
  --color-bg:             var(--bg-page,  #f6f7f6);
  --color-surface:        var(--bg-card,  #ffffff);
  --color-surface-soft:   var(--bg-soft,  #eef5f3);
  --color-border:         var(--border,   #d7e5e2);
  --color-border-strong:  var(--border-strong, #b9d2cc);

  /* ── Text ────────────────────────────────────────────── */
  --color-text:           var(--text,      #143d35);
  --color-text-soft:      var(--text-soft, #58736f);
  --color-text-muted:     #93aca8;
  --color-text-ink:       #0f172a;
  --color-text-slate:     #64748b;

  /* ── Neutral Palette (Tailwind-compat aliases) ───────── */
  --color-slate-50:       #f8fafc;
  --color-slate-100:      #f1f5f9;
  --color-slate-200:      #e2e8f0;
  --color-slate-400:      #94a3b8;
  --color-slate-500:      #64748b;
  --color-slate-600:      #475569;
  --color-slate-700:      #334155;
  --color-slate-900:      #0f172a;
  --color-gray-100:       #f3f4f6;
  --color-gray-200:       #e5e7eb;
  --color-gray-400:       #9ca3af;
  --color-gray-500:       #6b7280;
  --color-gray-700:       #374151;
  --color-amber-50:       #fffbeb;
  --color-amber-100:      #fef3c7;
  --color-amber-200:      #fde68a;
  --color-amber-500:      #f59e0b;
  --color-emerald-100:    #d1fae5;
  --color-emerald-500:    #10b981;
  --color-rose-500:       #f43f5e;
  --color-blue-500:       #3b82f6;

  /* ── Typography Scale ────────────────────────────────── */
  --font-family:          var(--theme-font, 'Tajawal', Arial, Helvetica, sans-serif);
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;
  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* ── Spacing Scale (4 / 8 system) ───────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ── Border Radius ───────────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-full: 9999px;

  /* Bootstrap-compat aliases */
  --radius-rounded-lg: 0.5rem;
  --radius-rounded-xl: 0.75rem;

  /* ── Shadows / Elevation ─────────────────────────────── */
  --shadow-xs:    0 1px 3px rgba(0,0,0,.08);
  --shadow-sm:    0 2px 8px -2px rgba(0,0,0,.16);
  --shadow-md:    0 10px 28px -10px rgba(0,0,0,.25);
  --shadow-lg:    0 24px 56px -22px rgba(0,0,0,.35);
  --shadow-card:  0 16px 44px -20px rgba(0,0,0,.28);
  --shadow-soft:  0 10px 28px -14px rgba(0,0,0,.16);
  --shadow-hover: 0 22px 50px -18px rgba(0,0,0,.38);
  --shadow-focus: 0 0 0 3px rgba(13,107,90,.30);

  /* ── Transitions / Motion ────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-base:   220ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-smooth: 300ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-slow:   450ms cubic-bezier(0.19, 1, 0.22, 1);

  /* Skeleton shimmer speed */
  --skeleton-duration: 1.6s;

  /* ── Toast ───────────────────────────────────────────── */
  --toast-success-bg: #0e7d58;
  --toast-error-bg:   #ba2f24;
  --toast-warning-bg: #d59025;
  --toast-info-bg:    #1e40af;
}

/* ── Dark Mode Overrides ────────────────────────────────── */
html.dark-mode,
[data-theme="dark"] {
  --color-bg:           var(--dm-bg,   #111615);
  --color-surface:      var(--dm-card, #182320);
  --color-surface-soft: var(--dm-soft, #17201e);
  --color-border:       var(--dm-border, #2d3c39);
  --color-border-strong: var(--dm-border-strong, #39524d);
  --color-text:         var(--dm-text, #eef8f5);
  --color-text-soft:    #8fb8b0;
  --color-text-muted:   #5f7e78;
  --color-primary:      var(--dm-primary, #1d9c66);
  --color-primary-alt:  var(--dm-secondary, #28b776);
  --color-primary-soft: #17302b;
  --color-slate-50:     #1a2520;
  --color-slate-200:    #2d3c39;
  --color-amber-50:     #2d2010;
  --color-emerald-100:  #0e2b1e;
}