@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@500;700;800&display=swap");

html:has(body:not(.admin-body)) {
  background: #070b14;
  min-height: 100%;
}

body:not(.admin-body) {
  color-scheme: dark;

  --ink-900: #e8edf4;
  --ink-700: #cbd5e1;
  --ink-600: #94a3b8;
  --ink-500: #7b8a9f;
  --ink-400: #64748b;

  --surface-50: #131b2e;
  --surface-100: #0f172a;
  --surface-200: #0c1220;
  --sand-50: #131b2e;
  --sand-100: #0c1220;

  --sage-700: #52525b;
  --sage-600: #d4d4d4;
  --sage-500: #fafafa;
  --sage-400: #e4e4e7;

  --sun-400: #38bdf8;

  --sky-200: #164e63;

  --white: #070b14;
  --bg-base: #070b14;
  --bg-elevated: #131b2e;

  --bg-gradient: linear-gradient(160deg, #070b14 0%, #0f172a 48%, #18181b 100%);

  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-focus: rgba(255, 255, 255, 0.38);

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 32px rgba(255, 255, 255, 0.08);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --transition: 200ms ease;
  --transition-fast: 140ms ease;

  --success-bg: rgba(255, 255, 255, 0.1);
  --success-text: #e4e4e7;
  --error-bg: rgba(239, 68, 68, 0.14);
  --error-text: #fca5a5;
  --warn-bg: rgba(14, 165, 233, 0.16);
  --warn-text: #7dd3fc;

  --surface-card: rgba(19, 27, 46, 0.88);
  --surface-card-hover: rgba(19, 27, 46, 0.95);
  --border-card: rgba(255, 255, 255, 0.07);
  --border-input: rgba(255, 255, 255, 0.11);
  --border-input-focus: rgba(255, 255, 255, 0.38);
}

body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3 {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}