/* DocketRadar Design System — CSS Custom Properties
   Brand: Slate & Amber — Premium paper + gold authority */

:root {
  /* Primary — Slate & Amber */
  --color-primary: #44403c;
  --color-primary-light: #57534e;
  --color-primary-dark: #292524;
  --color-accent: #b8860b;
  --color-accent-light: #d4a533;
  --color-accent-dark: #8b6914;
  --color-bg: #fafaf8;
  --color-bg-alt: #f5f3ef;

  /* Legacy aliases (backward compat — maps old names to new palette) */
  --color-navy: #44403c;
  --color-navy-light: #57534e;
  --color-navy-dark: #292524;
  --color-teal: #b8860b;
  --color-teal-light: #d4a533;
  --color-teal-dark: #8b6914;

  /* Secondary */
  --color-slate-blue: #57534e;
  --color-cloud: #f5f3ef;
  --color-steel: #d6d3cd;

  /* Accent */
  --color-amber: #b8860b;
  --color-amber-light: #d4a533;
  --color-amber-dark: #8b6914;
  --color-coral: #e11d48;

  /* Semantic */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-warning: #b8860b;
  --color-warning-bg: #fef9eb;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-info: #2563eb;
  --color-info-bg: #eff6ff;

  /* Neutral (Warm Stone) */
  --color-slate-50: #fafaf8;
  --color-slate-100: #f5f3ef;
  --color-slate-200: #e7e5e0;
  --color-slate-300: #d6d3cd;
  --color-slate-400: #a8a29e;
  --color-slate-500: #78716c;
  --color-slate-600: #57534e;
  --color-slate-700: #44403c;
  --color-slate-800: #292524;
  --color-slate-900: #1c1917;
  --color-slate-950: #0c0a09;

  /* Typography */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* Type Scale */
  --text-display: 2.25rem;
  --text-h1: 1.875rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.6875rem;
  --text-button: 0.875rem;

  /* Spacing */
  --space-unit: 4px;
  --space-0-5: 2px;
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

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

  /* Shadows — Warm stone tones */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg:
    0 10px 15px -3px rgba(28, 25, 23, 0.1),
    0 4px 6px -4px rgba(28, 25, 23, 0.04);
  --shadow-xl:
    0 20px 25px -5px rgba(28, 25, 23, 0.12),
    0 8px 10px -6px rgba(28, 25, 23, 0.06);
  --shadow-inner: inset 0 2px 4px rgba(28, 25, 23, 0.06);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Dark backgrounds */
  --color-dark-bg: #0c1f17;
  --color-dark-bg-alt: #142b20;

  /* Layout */
  --max-width: 1280px;
  --nav-height: 56px;
}