/* ==========================================================================
   Lit10 — Base Layer
   Design tokens, reset, typography primitives, and shared utilities.
   All directional rules use CSS Logical Properties so this single stylesheet
   serves both the English (LTR) and Arabic (RTL) builds without forking.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   Palette is hue-locked at 295deg. Every foreground/background pair used in
   the UI is verified at >= 4.5:1 (WCAG AA). See DESIGN-SYSTEM.md.
   -------------------------------------------------------------------------- */
:root {
  /* ---- Surfaces --------------------------------------------------------
     Light mode. Four distinct FLAT tints, alternated down the page so no two
     neighbouring sections share a ground. Deliberately no gradients: every
     surface is a solid colour. */
  --white: #ffffff;   /* base ground                       */
  --cream: #fbf7f9;   /* alternate ground                  */
  --blush: #f4e9f5;   /* accent ground                     */
  --mauve: #eadcec;   /* deepest tint, for emphasis blocks */

  /* Dark ground, reserved for the footer only. */
  --plum: #431847;

  /* ---- Brand purples --------------------------------------------------- */
  --brand: #8b4d91;        /* solid fills / buttons     5.89:1 w/ white */
  --accent-text: #7d2d85;  /* purple TEXT on any light ground  6.17:1+  */
  --brand-deep: #602166;   /* hover / headings          11.01:1        */
  --brand-050: #faecfb;
  --brand-100: #f2d7f5;
  --brand-200: #e1aee6;
  --lilac: #cd87d4;        /* decorative only, never text on light     */

  /* ---- Text ------------------------------------------------------------ */
  --text: #1f1626;         /* headings + body           17.49:1 on white */
  --muted: #655a6b;        /* secondary copy             6.51:1 on white */
  --text-on-dark: #f7f2f8; /* footer                    13.02:1 on plum  */
  --muted-on-dark: #c3b2c6;/* footer secondary           7.19:1 on plum  */

  /* ---- Support --------------------------------------------------------- */
  --success: #1f7a56;
  --danger: #b02f48;
  --line: #dfd2e1;         /* hairlines / borders */
  --line-strong: #cbb8ce;
  --hairline-dark: rgb(247 242 248 / 0.16);

  /* ---- Typography ------------------------------------------------------
     Tajawal carries both Latin and Arabic scripts. */
  --font-sans: "Tajawal", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* Fluid type scale. Clamped so headings never overwhelm or clip. */
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.6rem);
  --step-3: clamp(1.65rem, 1.45rem + 1vw, 2.15rem);
  --step-4: clamp(1.95rem, 1.6rem + 1.75vw, 2.9rem);
  --step-5: clamp(2.3rem, 1.75rem + 2.6vw, 3.6rem);

  --leading-tight: 1.22;
  --leading-snug: 1.4;
  --leading-body: 1.7;

  /* ---- Spacing — 4/8px rhythm ------------------------------------------ */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* Section rhythm. Deliberately tight on mobile (44px) so sections read as a
     continuous story rather than isolated screens; opens up on wider viewports. */
  --section-block: clamp(2.75rem, 1.5rem + 6vw, 8rem);

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation — soft and low-contrast, tuned for light grounds ------- */
  --shadow-sm: 0 1px 3px rgb(67 24 71 / 0.07), 0 1px 2px rgb(67 24 71 / 0.04);
  --shadow-md: 0 6px 16px -6px rgb(67 24 71 / 0.14),
    0 2px 6px -2px rgb(67 24 71 / 0.08);
  --shadow-lg: 0 18px 40px -18px rgb(67 24 71 / 0.24),
    0 6px 14px -6px rgb(67 24 71 / 0.1);
  --shadow-brand: 0 12px 26px -12px rgb(139 77 145 / 0.5);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;

  /* ---- Layering scale --------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis drives scrolling; disable native smooth scroll when it is active. */
html.lenis {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--text);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x here: it would silently disable every position:sticky pin. */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  /* Logical equivalent of max-width, so it holds in both LTR and RTL. */
  max-inline-size: 100%;
}

/*
  Belt-and-braces guard against horizontal scroll. overflow-x: hidden is
  deliberately NOT used on html/body/main: it silently disables every
  position: sticky pin on the page. Instead the root simply never allows a
  child to establish a wider scroll width than the viewport.
*/
html,
body {
  max-inline-size: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: var(--leading-tight);
  /* Prevent headings from ever clipping at narrow viewports. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:where(h1, h2, h3, h4, p, li) {
  text-align: start;
}

/* --------------------------------------------------------------------------
   3. Accessibility primitives
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: var(--z-modal);
  padding: 0.85rem 1.35rem;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: inset-block-start var(--dur-mid) var(--ease-out);
}

.skip-link:focus-visible {
  inset-block-start: 0;
}

/* --------------------------------------------------------------------------
   4. Layout utilities
   -------------------------------------------------------------------------- */
.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.container--narrow {
  inline-size: min(100% - (var(--gutter) * 2), var(--container-narrow));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-block);
  /* Must stay visible so descendant position:sticky stages keep working. */
  overflow: visible;
}

/* Decorative overlays are clipped in their own layer, never by the section. */
.section__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-base);
}

.section__inner {
  position: relative;
  z-index: var(--z-raised);
}

/* Surface variants — flat tints, alternated so no two neighbours match.
   No gradients anywhere: each ground is a single solid colour. */
.surface-white {
  background-color: var(--white);
  color: var(--text);
}

.surface-cream {
  background-color: var(--cream);
  color: var(--text);
}

.surface-blush {
  background-color: var(--blush);
  color: var(--text);
}

.surface-mauve {
  background-color: var(--mauve);
  color: var(--text);
}

/* Only the footer uses the dark ground. */
.surface-plum {
  background-color: var(--plum);
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */
.section-title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  max-inline-size: 22ch;
}

.section-lede {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  max-inline-size: 62ch;
  color: var(--muted);
}

.lede-lg {
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-inline-size: 66ch;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-block-size: 56px;
  padding-block: 1rem;
  padding-inline: 2.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
  touch-action: manipulation;
}

.btn__icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  transition: transform var(--dur-mid) var(--ease-out);
}

/* The arrow always points "forward" in the reading direction. */
[dir="rtl"] .btn__icon {
  transform: scaleX(-1);
}

/* Primary — solid brand fill, white label at 5.89:1. */
.btn--primary {
  background-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
  background-color: var(--brand-deep);
  transform: translateY(-2px);
}

.btn--primary:hover .btn__icon {
  transform: translateX(4px);
}

[dir="rtl"] .btn--primary:hover .btn__icon {
  transform: scaleX(-1) translateX(4px);
}

.btn--primary:active {
  transform: translateY(0) scale(0.985);
}

/* Secondary — outlined, for the lower-priority action beside a primary. */
.btn--ghost {
  background-color: transparent;
  color: var(--accent-text);
  border: 1.5px solid var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--brand);
  background-color: var(--brand-050);
  color: var(--brand-deep);
}

.btn--ghost:active {
  transform: scale(0.985);
}

/* On the dark footer ground the outline inverts. */
.surface-plum .btn--ghost {
  color: var(--text-on-dark);
  border-color: var(--hairline-dark);
}

.surface-plum .btn--ghost:hover {
  border-color: var(--lilac);
  background-color: transparent;
  color: var(--lilac);
}

.btn--block {
  inline-size: 100%;
}

/* Price chip sitting inside a CTA label */
.btn__price {
  padding-block: 0.15rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.22);
  font-variant-numeric: tabular-nums;
}

.btn--ghost .btn__price {
  background-color: rgb(139 77 145 / 0.12);
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   Motion is additive only: every animated element is readable at rest.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}