/* ==========================================================================
   Xtreme Nano — Design tokens (Phase 03-A)

   Two layers:
   1. Primitives  (--xn-p-*)  raw values. Change the palette HERE only.
   2. Semantic    (--xn-*)    what components use. Never a raw hex below
                              this block, and never a raw hex in components.

   Direction: matte automotive luxury — purple-tinted white surfaces,
   dark purple for weight, one restrained yellow highlight, soft frosted
   glass for floating chrome only. Buttons never cast shadows.

   Contrast (WCAG 2.1): every text/background pair used by components is
   ≥ 4.5:1 (verified in Phase 03-A).
   ========================================================================== */

:root {
	/* ---- 1. Primitives ---------------------------------------------------- */
	--xn-p-white:        #FFFFFF;
	--xn-p-lilac-25:     #FCFAFF;
	--xn-p-lilac-50:     #F7F2FC;
	--xn-p-lilac-100:    #F1E9FA;
	--xn-p-lilac-200:    #E4D7F2;
	--xn-p-purple-400:   #8B63BD;
	--xn-p-purple-500:   #6F3FA3;
	--xn-p-purple-600:   #54227D;
	--xn-p-purple-800:   #35145F;
	--xn-p-purple-850:   #2D1052;
	--xn-p-purple-900:   #26103F;
	--xn-p-ink-900:      #22123A;
	--xn-p-ink-600:      #5E5470;
	--xn-p-ink-500:      #6E6482;
	--xn-p-ink-300:      #A898C2;
	--xn-p-mist-200:     #B9ABCE;
	--xn-p-mist-50:      #F4EEFB;
	--xn-p-yellow-400:   #F2C94C;
	--xn-p-yellow-500:   #E3B530;
	--xn-p-green-700:    #1F7A4F;
	--xn-p-green-50:     #E6F4EC;
	--xn-p-amber-700:    #9A6100;
	--xn-p-amber-50:     #FBF1DC;
	--xn-p-red-700:      #B3362B;
	--xn-p-red-50:       #FBE9E7;
	--xn-p-blue-700:     #2D5BBF;
	--xn-p-blue-50:      #E8EEFA;
	--xn-p-whatsapp:     #1E7F4E; /* muted green (≥ 4.5:1 with white) */

	/* ---- 2. Semantic: colour ---------------------------------------------- */
	--xn-bg:                  var(--xn-p-lilac-25);   /* page */
	--xn-bg-alt:              var(--xn-p-lilac-50);   /* alternate band */
	--xn-surface:             var(--xn-p-white);
	--xn-surface-muted:       var(--xn-p-lilac-50);
	--xn-surface-tint:        var(--xn-p-lilac-100);
	--xn-surface-inverse:     var(--xn-p-purple-900); /* footer, dark sections */
	--xn-surface-inverse-2:   var(--xn-p-purple-850);

	--xn-text:                var(--xn-p-ink-900);
	--xn-text-muted:          var(--xn-p-ink-600);
	--xn-text-subtle:         var(--xn-p-ink-500);
	--xn-text-inverse:        var(--xn-p-mist-50);
	--xn-text-inverse-muted:  var(--xn-p-mist-200);
	--xn-text-inverse-subtle: var(--xn-p-ink-300);

	--xn-primary:             var(--xn-p-purple-800);  /* dark purple */
	--xn-primary-hover:       var(--xn-p-purple-850);
	--xn-on-primary:          var(--xn-p-white);
	--xn-secondary:           var(--xn-p-purple-600);
	--xn-secondary-hover:     var(--xn-p-purple-800);
	--xn-on-secondary:        var(--xn-p-white);
	--xn-accent:              var(--xn-p-purple-500);  /* links, icons, focus */
	--xn-accent-soft:         var(--xn-p-lilac-100);
	--xn-accent-muted:        var(--xn-p-purple-400);
	--xn-highlight:           var(--xn-p-yellow-400);  /* sparingly */
	--xn-highlight-hover:     var(--xn-p-yellow-500);
	--xn-on-highlight:        var(--xn-p-purple-800);
	--xn-whatsapp:            var(--xn-p-whatsapp);
	--xn-on-whatsapp:         var(--xn-p-white);

	--xn-success:             var(--xn-p-green-700);
	--xn-success-soft:        var(--xn-p-green-50);
	--xn-warning:             var(--xn-p-amber-700);
	--xn-warning-soft:        var(--xn-p-amber-50);
	--xn-danger:              var(--xn-p-red-700);
	--xn-danger-soft:         var(--xn-p-red-50);
	--xn-info:                var(--xn-p-blue-700);
	--xn-info-soft:           var(--xn-p-blue-50);
	--xn-neutral:             var(--xn-p-ink-600);
	--xn-neutral-soft:        var(--xn-p-lilac-50);

	--xn-border:              rgba(53, 20, 95, 0.09);
	--xn-border-strong:       rgba(53, 20, 95, 0.18);
	--xn-border-inverse:      rgba(244, 238, 251, 0.12);
	--xn-focus-ring:          var(--xn-p-purple-500);
	--xn-focus-ring-inverse:  var(--xn-p-yellow-400);
	--xn-scrim:               rgba(34, 18, 58, 0.30);
	--xn-hover-overlay:       rgba(111, 63, 163, 0.08);
	--xn-press-overlay:       rgba(111, 63, 163, 0.14);

	/* ---- Glass (matte, low contrast, no reflections) --------------------- */
	--xn-glass-bg:            rgba(252, 250, 255, 0.72);
	--xn-glass-bg-strong:     rgba(252, 250, 255, 0.88);
	--xn-glass-bg-inverse:    rgba(38, 16, 63, 0.72);
	--xn-glass-border:        rgba(53, 20, 95, 0.08);
	--xn-glass-border-inverse: rgba(244, 238, 251, 0.10);
	--xn-glass-blur:          saturate(140%) blur(18px);
	--xn-glass-blur-soft:     saturate(120%) blur(10px);

	/* ---- Shadows (surfaces only — never buttons) -------------------------- */
	--xn-shadow-none:   none;
	--xn-shadow-xs:     0 1px 2px rgba(34, 18, 58, 0.04);
	--xn-shadow-sm:     0 8px 24px -16px rgba(34, 18, 58, 0.16);
	--xn-shadow-md:     0 18px 48px -28px rgba(34, 18, 58, 0.22);
	--xn-shadow-lg:     0 32px 80px -40px rgba(34, 18, 58, 0.28);
	--xn-shadow-float:  0 16px 40px -20px rgba(34, 18, 58, 0.24);

	/* ---- Radius ------------------------------------------------------------ */
	--xn-radius-sm:   8px;    /* badges, small controls */
	--xn-radius-md:   14px;   /* inputs, list rows */
	--xn-radius-lg:   20px;   /* cards */
	--xn-radius-xl:   32px;   /* sections, panels, sheets */
	--xn-radius-pill: 999px;  /* buttons, bars, chips */

	/* ---- Spacing (4px base) ----------------------------------------------- */
	--xn-space-0:  0;
	--xn-space-1:  0.25rem;
	--xn-space-2:  0.5rem;
	--xn-space-3:  0.75rem;
	--xn-space-4:  1rem;
	--xn-space-5:  1.25rem;
	--xn-space-6:  1.5rem;
	--xn-space-8:  2rem;
	--xn-space-10: 2.5rem;
	--xn-space-12: 3rem;
	--xn-space-16: 4rem;
	--xn-space-20: 5rem;
	--xn-space-24: 6rem;

	/* Fluid layout rhythm (320 → 1920) */
	--xn-gutter:        clamp(1rem, 0.6rem + 2vw, 2.5rem);
	--xn-section-y:     clamp(3.5rem, 2.25rem + 6vw, 8rem);
	--xn-section-y-sm:  clamp(2.5rem, 1.75rem + 3.5vw, 5rem);
	--xn-stack-gap:     clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--xn-grid-gap:      clamp(1rem, 0.7rem + 1.4vw, 2rem);
	--xn-card-pad:      clamp(1.25rem, 1rem + 0.8vw, 1.75rem);

	/* ---- Layout ------------------------------------------------------------ */
	--xn-container:        1280px;
	--xn-container-wide:   1520px;
	--xn-container-narrow: 760px;
	--xn-container-app:    1180px;
	--xn-header-h:         64px;
	--xn-bar-h:            64px;
	--xn-safe-bottom:      env(safe-area-inset-bottom, 0px);
	--xn-bar-offset:       max(12px, var(--xn-safe-bottom));
	--xn-bar-space:        calc(var(--xn-bar-h) + var(--xn-bar-offset) + 24px);
	--xn-touch:            44px;

	/* ---- Typography --------------------------------------------------------- */
	--xn-font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--xn-font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--xn-font:    var(--xn-font-ar);
	/* Latin digits use the page font: Plex's Latin subset on Arabic pages
	   (already loaded), Inter on English pages — no extra font request. */
	--xn-font-numeric: var(--xn-font);

	/* Scale — fluid between 320px and 1440px */
	--xn-fs-display:  clamp(2.375rem, 1.6rem + 3.9vw, 4.5rem);
	--xn-fs-h1:       clamp(2rem, 1.5rem + 2.5vw, 3.375rem);
	--xn-fs-h2:       clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
	--xn-fs-h3:       clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem);
	--xn-fs-h4:       clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--xn-fs-body-lg:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--xn-fs-body:     1rem;
	--xn-fs-body-sm:  0.875rem;
	--xn-fs-caption:  0.8125rem;
	--xn-fs-label:    0.875rem;
	--xn-fs-button:   0.9375rem;
	--xn-fs-nav:      1.0625rem;
	--xn-fs-nav-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--xn-fs-micro:    0.75rem;

	--xn-fw-regular: 400;
	--xn-fw-medium:  500;
	--xn-fw-semi:    600;
	--xn-fw-bold:    700;
	--xn-fw-display: 700;
	--xn-fw-heading: 600;

	/* Arabic needs generous leading; never letter-spaced */
	--xn-lh-display: 1.2;
	--xn-lh-heading: 1.35;
	--xn-lh-body:    1.8;
	--xn-lh-tight:   1.4;
	--xn-ls-display: 0;
	--xn-ls-heading: 0;
	--xn-ls-body:    0;
	--xn-ls-label:   0;

	/* ---- Motion ------------------------------------------------------------ */
	--xn-ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
	--xn-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
	--xn-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
	--xn-dur-1:        120ms;  /* press, colour */
	--xn-dur-2:        200ms;  /* hover */
	--xn-dur-3:        320ms;  /* menus, dialogs */
	--xn-dur-4:        560ms;  /* reveals */
	--xn-dur-5:        800ms;  /* image reveal */
	--xn-stagger:      60ms;
	--xn-lift:         -2px;   /* card hover translate */
	--xn-nudge:        3px;    /* icon hover movement */

	/* ---- Layers ------------------------------------------------------------ */
	--xn-z-base:   1;
	--xn-z-header: 40;
	--xn-z-bar:    45;
	--xn-z-drawer: 60;
	--xn-z-modal:  70;
	--xn-z-toast:  80;

	color-scheme: light;
}

/* English / LTR typography — document level only, so a short Latin label
   (e.g. "EN") inside an Arabic page never triggers the Inter download. */
:root:lang(en) {
	--xn-font:       var(--xn-font-en);
	--xn-lh-display: 1.05;
	--xn-lh-heading: 1.2;
	--xn-lh-body:    1.6;
	--xn-ls-display: -0.03em;
	--xn-ls-heading: -0.018em;
	--xn-ls-body:    -0.003em;
	--xn-ls-label:   0.002em;
	--xn-fw-display: 650;
}

/* Breakpoint reference (CSS custom properties cannot be used in media
   queries; these values are used literally across the theme):
   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */
@media (min-width: 1024px) {
	:root {
		--xn-header-h: 76px;
		--xn-bar-h: 60px;
	}
}