/* ============================================
   Legal Website — Design System
   Navy + Gold | RTL | Vazirmatn
   ============================================ */

:root,
[data-theme='light'] {
  /* Surfaces — warm ivory/cream */
  --color-bg: #f8f6f1;
  --color-surface: #fdfcf9;
  --color-surface-2: #f3f0ea;
  --color-surface-offset: #ede9e0;
  --color-surface-offset-2: #e6e1d5;
  --color-surface-dynamic: #ddd8cc;
  --color-divider: #d4cfc2;
  --color-border: #c8c2b3;

  /* Text — deep navy tones */
  --color-text: #1a2332;
  --color-text-muted: #5c6573;
  --color-text-faint: #9a9f8f;
  --color-text-inverse: #f8f6f1;

  /* Primary — Deep Navy */
  --color-primary: #1a2744;
  --color-primary-hover: #0f1a30;
  --color-primary-active: #0a1325;
  --color-primary-highlight: #d6dce4;

  /* Accent — Gold */
  --color-accent: #008fc9;
  --color-accent-hover: #0077a8;
  --color-accent-active: #005f87;
  --color-accent-highlight: #e1f5fb;

  /* Secondary accent — warm bronze */
  --color-bronze: #0073a5;
  --color-bronze-hover: #005f87;

  /* Status colors */
  --color-success: #437a22;
  --color-success-highlight: #d4dfcc;
  --color-error: #a12c2c;
  --color-error-highlight: #e8d4d4;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — warm-toned */
  --shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 35, 50, 0.08);
  --shadow-lg: 0 16px 48px rgba(26, 35, 50, 0.12);
  --shadow-gold: 0 4px 24px rgba(184, 134, 11, 0.15);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* Fonts */
  --font-display: 'Vazirmatn', 'Tahoma', sans-serif;
  --font-body: 'Vazirmatn', 'Tahoma', sans-serif;
}

[data-theme='dark'] {
  --color-bg: #0f1521;
  --color-surface: #161e2e;
  --color-surface-2: #1a2438;
  --color-surface-offset: #1e2940;
  --color-surface-offset-2: #243150;
  --color-surface-dynamic: #2d3a5a;
  --color-divider: #2a3550;
  --color-border: #3a4868;

  --color-text: #d6dce8;
  --color-text-muted: #8a93a8;
  --color-text-faint: #5a6478;
  --color-text-inverse: #0f1521;

  --color-primary: #4a6fa5;
  --color-primary-hover: #5a82bf;
  --color-primary-active: #6a95d0;
  --color-primary-highlight: #1e2940;

  --color-accent: #27b5e8;
  --color-accent-hover: #4bc4ee;
  --color-accent-active: #75d7f4;
  --color-accent-highlight: #102a36;

  --color-bronze: #27a9d7;
  --color-bronze-hover: #4bc4ee;

  --color-success: #6daa45;
  --color-success-highlight: #1e2d18;
  --color-error: #d16363;
  --color-error-highlight: #2d1818;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 24px rgba(212, 168, 67, 0.1);
}

/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1521;
    --color-surface: #161e2e;
    --color-surface-2: #1a2438;
    --color-surface-offset: #1e2940;
    --color-surface-offset-2: #243150;
    --color-surface-dynamic: #2d3a5a;
    --color-divider: #2a3550;
    --color-border: #3a4868;
    --color-text: #d6dce8;
    --color-text-muted: #8a93a8;
    --color-text-faint: #5a6478;
    --color-text-inverse: #0f1521;
    --color-primary: #4a6fa5;
    --color-primary-hover: #5a82bf;
    --color-primary-active: #6a95d0;
    --color-primary-highlight: #1e2940;
    --color-accent: #27b5e8;
    --color-accent-hover: #4bc4ee;
    --color-accent-active: #75d7f4;
    --color-accent-highlight: #102a36;
    --color-bronze: #27a9d7;
    --color-bronze-hover: #4bc4ee;
    --color-success: #6daa45;
    --color-success-highlight: #1e2d18;
    --color-error: #d16363;
    --color-error-highlight: #2d1818;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 4px 24px rgba(212, 168, 67, 0.1);
  }
}