/*
 * Mustafa WP — design tokens & semantic theme variables.
 * Light palette on :root; dark mode via prefers-color-scheme and [data-theme].
 */

:root {
  /* ---- Brand ramp ---- */
  --mwp-blue: #2563EB;
  --mwp-blue-600: #1D4ED8;
  --mwp-blue-050: #EFF4FF;
  --mwp-cyan: #06B6D4;
  --mwp-ink: #0B1220;

  /* ---- Neutrals ---- */
  --mwp-white: #FFFFFF;
  --mwp-gray-50: #F7F9FC;
  --mwp-gray-100: #EEF2F7;
  --mwp-gray-200: #E2E8F0;
  --mwp-gray-300: #CBD5E1;
  --mwp-gray-500: #64748B;
  --mwp-gray-700: #334155;
  --mwp-gray-900: #0F172A;

  /* ---- Semantic (light) ---- */
  --background: var(--mwp-gray-50);
  --surface: var(--mwp-white);
  --surface-elevated: var(--mwp-white);
  --surface-sunken: var(--mwp-gray-100);
  --text-primary: var(--mwp-ink);
  --text-secondary: var(--mwp-gray-500);
  --border: var(--mwp-gray-200);
  --border-strong: var(--mwp-gray-300);
  --primary: var(--mwp-blue);
  --primary-hover: var(--mwp-blue-600);
  --primary-soft: var(--mwp-blue-050);
  --accent: var(--mwp-cyan);
  --on-primary: #FFFFFF;
  --focus-ring: var(--mwp-blue);
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .05);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, .08);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, .12);

  /* ---- Typography ---- */
  --font-sans: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --fs-h1: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-sm: .875rem;
  --lh-tight: 1.25;
  --lh-body: 1.85; /* comfortable Arabic reading */

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Radii & layout ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1280px;
  --container-wide: 1440px;
  --container-text: 760px;
  --header-h: 72px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Dark mode via system default (only when no explicit choice). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #070B14;
    --surface: #0E1524;
    --surface-elevated: #131C30;
    --surface-sunken: #0A1120;
    --text-primary: #E6EDF7;
    --text-secondary: #8A97AC;
    --border: #1E2A40;
    --border-strong: #2A3A55;
    --primary: #4F86FF;
    --primary-hover: #6E9CFF;
    --primary-soft: #10233F;
    --accent: #22D3EE;
    --on-primary: #05070D;
    --focus-ring: #6E9CFF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
  }
}

/* Explicit dark choice wins in both directions. */
:root[data-theme="dark"] {
  --background: #070B14;
  --surface: #0E1524;
  --surface-elevated: #131C30;
  --surface-sunken: #0A1120;
  --text-primary: #E6EDF7;
  --text-secondary: #8A97AC;
  --border: #1E2A40;
  --border-strong: #2A3A55;
  --primary: #4F86FF;
  --primary-hover: #6E9CFF;
  --primary-soft: #10233F;
  --accent: #22D3EE;
  --on-primary: #05070D;
  --focus-ring: #6E9CFF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
}