/* ═══════════════════════════════════════════════════════════
   variables.css — Thmanyah Font + Design System Tokens
   خط ثمانية + متغيرات التصميم
   ═══════════════════════════════════════════════════════════ */

/* ── Thmanyah Sans Font (خط ثمانية) — Official CDN ── */
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('https://framerusercontent.com/assets/Lh8puxCFq405qBv7dKpg9NsHZNk.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('https://framerusercontent.com/assets/x6EBzvXf1Fi35XhsRoHxePDVo.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('https://framerusercontent.com/assets/oE98mOPE28KTzUeptOLRIaqW1I.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('https://framerusercontent.com/assets/LZvgFRUsP7pGWYj3tKxMUrKuhSY.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens ── */
:root {
  /* Typography */
  --font-family: 'Thmanyah Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Colors — Red & White on Dark */
  --color-primary: #DC2626;
  --color-primary-light: #EF4444;
  --color-primary-dark: #B91C1C;
  --color-primary-glow: rgba(220, 38, 38, 0.25);
  --color-primary-subtle: rgba(220, 38, 38, 0.08);

  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-card: #1A1A1A;
  --color-bg-hover: #222222;
  --color-bg-input: #1E1E1E;
  --color-bg-chat: #0F0F0F;

  --color-text-primary: #F5F5F5;
  --color-text-secondary: #A3A3A3;
  --color-text-muted: #6B6B6B;
  --color-text-inverse: #0A0A0A;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-focus: var(--color-primary);

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Glassmorphism */
  --glass-bg: rgba(26, 26, 26, 0.8);
  --glass-bg-strong: rgba(26, 26, 26, 0.95);
  --glass-blur: blur(20px);
  --glass-border: rgba(255, 255, 255, 0.06);

  /* Spacing */
  --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;

  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--color-primary-glow);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Sidebar */
  --sidebar-width: 300px;
  --sidebar-collapsed: 72px;
}

/* ── Light Theme Variable Overrides ── */
body.light-theme {
  --color-bg-primary: #F9F9F9;
  --color-bg-secondary: #F0F0F0;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #EAEAEA;
  --color-bg-input: #EFEFEF;
  --color-bg-chat: #F5F5F5;

  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #8A8A8A;
  --color-text-inverse: #F5F5F5;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.06);
  
  --color-primary-glow: rgba(220, 38, 38, 0.15);
  --color-primary-subtle: rgba(220, 38, 38, 0.05);
}