/* Design tokens. Light is the base; dark is applied via [data-theme="dark"]. */

/* Thmanyah fonts are free but cannot be redistributed: if you install them on this Mac
   (thmanyah.com → خط ثمانية) they are picked up automatically through local(). */
@font-face { font-family: 'SatrSans'; font-weight: 300 400; font-display: swap;
  src: local('thmanyahsans Regular'), local('Thmanyah Sans Regular'), local('thmanyahSans-Regular'), local('ThmanyahSans-Regular'); }
@font-face { font-family: 'SatrSans'; font-weight: 500 600; font-display: swap;
  src: local('thmanyahsans Medium'), local('Thmanyah Sans Medium'), local('thmanyahSans-Medium'), local('ThmanyahSans-Medium'); }
@font-face { font-family: 'SatrSans'; font-weight: 700 900; font-display: swap;
  src: local('thmanyahsans Bold'), local('Thmanyah Sans Bold'), local('thmanyahSans-Bold'), local('ThmanyahSans-Bold'); }
@font-face { font-family: 'SatrDisplay'; font-weight: 400 600; font-display: swap;
  src: local('thmanyahserifdisplay Medium'), local('Thmanyah Serif Display Medium'), local('ThmanyahSerifDisplay-Medium'); }
@font-face { font-family: 'SatrDisplay'; font-weight: 700 900; font-display: swap;
  src: local('thmanyahserifdisplay Bold'), local('Thmanyah Serif Display Bold'), local('ThmanyahSerifDisplay-Bold'); }

:root {
  --font-ar: 'SatrSans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'SatrDisplay', 'Noto Naskh Arabic', 'SatrSans', 'IBM Plex Sans Arabic', serif;
  --font-en: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --bg: #f6f7fc;
  --bg-elev: #ffffff;
  --surface: #eceef8;
  --surface-hover: #e2e5f3;
  --border: #dde0ef;
  --text: #10121c;
  --text-muted: #575c72;
  --text-faint: #8a8fa6;
  --untyped: #c1c4d6;
  --typed: #10121c;
  --translation: #4a4f66d9;
  --wrong: #c8433a;
  --accent: #4f5bf0;
  --accent-ink: #ffffff;
  --accent-soft: #4f5bf01c;
  --success: #2d8a5f;
  --error: #c8433a;
  --error-soft: #c8433a1a;
  --lvl-1: #2d8a5f;
  --lvl-2: #3574b0;
  --lvl-3: #7b5fc0;
  --lvl-4: #c8433a;
  --lvl-5: #1d7f8c;
  --logo-main: var(--accent);
  --accent-2: #8b5cf6;
  --grad: linear-gradient(120deg, #3b82f6 0%, #6366f1 45%, #8b5cf6 100%);
  --grad-text: linear-gradient(120deg, #2563eb, #7c3aed);
  --logo-shade: #8b7cf7;
  --logo-cream: #efe3bb;
  --shadow: 0 1px 2px #0000000d, 0 8px 24px #0000000f;
  --glow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 55%, transparent);

  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --container: 72rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --normal: 300ms;
}

:root[data-theme='dark'] {
  --bg: #0b0c15;
  --bg-elev: #12131f;
  --surface: #1a1c2b;
  --surface-hover: #232537;
  --border: #2a2d42;
  --text: #f3f4fa;
  --text-muted: #a5a9c0;
  --text-faint: #6d7189;
  --untyped: #474b63;
  --typed: #eceefa;
  --translation: #c3c6d9cc;
  --wrong: #d4776c;
  --accent: #8c95ff;
  --accent-ink: #0b0c15;
  --accent-soft: #8c95ff24;
  --success: #74c69d;
  --error: #e8685f;
  --error-soft: #e8685f26;
  --lvl-1: #74c69d;
  --lvl-2: #6fa8dc;
  --lvl-3: #b39ddb;
  --lvl-4: #e8685f;
  --lvl-5: #5cc4d1;
  --logo-shade: #6d5ef0;
  --accent-2: #b197ff;
  --grad: linear-gradient(120deg, #3b7bf6 0%, #5b5ff0 45%, #8a55f0 100%);
  --grad-text: linear-gradient(120deg, #7aa7ff, #c09bff);
  --shadow: 0 1px 2px #00000040, 0 10px 30px #00000059;
}