/* ==========================================================================
   HOME SCENT — DESIGN TOKENS
   Direction A · "Plinth & Light"
   The single source of truth for colour, type, space, radius, shadow, motion.
   Nothing in this theme hard-codes a value that exists here.
   ========================================================================== */

:root{
  /* ---------- Brand colour ---------- */
  --c-brand:            #553466;   /* primary — CTAs, focus, active */
  --c-brand-strong:     #3D2749;
  --c-brand-soft:       #6E4685;
  --c-brand-secondary:  #A98CBE;   /* lilac — DECORATIVE only: dots, borders, dark grounds */
  --c-brand-secondary-text: #7B5C95; /* the text-safe lilac: 5.30:1 on paper, 4.57:1 on the deepest tint */
  --c-accent:           #B7A48D;   /* travertine — the category differentiator */
  --c-accent-soft:      #D9CBB8;
  --c-accent-faint:     #F0E9DF;

  /* ---------- Surfaces ---------- */
  --c-bg:               #FBFAFB;   /* page */
  --c-surface:          #FFFFFF;   /* elevated */
  --c-surface-2:        #F7F3F9;   /* tinted section */
  --c-surface-3:        #EFE7F3;   /* lilac — UI states only, never product media */
  /* Product media and tinted bands sit on warm ivory, not lilac. The product
     photography already carries a mauve backdrop; doubling it turned every card
     into a purple block. Ivory makes the purple in the imagery read as the accent. */
  --c-media:            #F7F4EF;   /* product media ground */
  --c-tint:             #FAF7F2;   /* tinted section band */

  /* ---------- Text ---------- */
  --c-text:             #2A1B33;
  --c-text-2:           #5C5064;
  --c-text-muted:       #6E6377;   /* 5.43:1 on paper, 4.68:1 on the deepest tint — AA at any size */
  --c-text-on-brand:    #FFFFFF;

  /* ---------- Lines ---------- */
  --c-border:           #E7E0EB;
  --c-border-strong:    #D2C7DA;

  /* ---------- State ---------- */
  --c-sale:             #8C2F4A;   /* savings only — never urgency */
  --c-success:          #2F7A5B;
  --c-warning:          #9A6B1E;
  --c-error:            #A33341;
  --c-success-bg:       #E8F2ED;
  --c-warning-bg:       #FBF3E2;
  --c-error-bg:         #FBECEE;

  /* ---------- Typography: families ---------- */
  --font-ar: "Tajawal","Noto Sans Arabic","Noto Kufi Arabic","Segoe UI",system-ui,sans-serif;
  --font-en: "Jost","Noto Sans","DejaVu Sans","Segoe UI",system-ui,sans-serif;
  --font-body: var(--font-ar);

  /* ---------- Typography: scale ---------- */
  --fs-display: clamp(2.4rem,5.2vw,4.2rem);
  --fs-h1:      clamp(1.9rem,3.4vw,2.75rem);
  --fs-h2:      clamp(1.45rem,2.4vw,2rem);
  --fs-h3:      1.175rem;
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-caption: .775rem;
  --fs-price:   1.1rem;
  --fs-price-lg:1.85rem;
  --fs-button:  .875rem;
  --fs-nav:     .875rem;

  --lh-tight:   1.2;
  --lh-body:    1.65;
  --lh-heading: 1.12;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-display: -.02em;
  --tracking-heading: -.01em;
  --tracking-eyebrow: .22em;
  --tracking-button:  .02em;

  /* ---------- Layout ---------- */
  --w-content:  1280px;
  --w-prose:    68ch;
  --gutter:     clamp(1rem,4vw,2.5rem);
  --section-y:  clamp(3rem,7vw,6rem);

  /* ---------- Space scale (4px base) ---------- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  /* ---------- Radius ---------- */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---------- Elevation (plum-tinted, never grey) ---------- */
  --shadow-1:0 1px 2px rgba(42,27,51,.05);
  --shadow-2:0 4px 18px -6px rgba(42,27,51,.12);
  --shadow-3:0 18px 48px -18px rgba(42,27,51,.28);

  /* ---------- Control sizes ---------- */
  --control-h:       48px;
  --control-h-sm:    40px;
  --control-h-lg:    56px;
  --icon-btn:        42px;
  --icon-btn-sm:     38px;
  --tap-min:         44px;

  /* ---------- Motion ---------- */
  --ease:            cubic-bezier(.22,.61,.36,1);
  --dur-hover:       180ms;
  --dur-card:        250ms;
  --dur-menu:        220ms;
  --dur-drawer:      320ms;
  --dur-reveal:      700ms;
  --dur-image:       600ms;
  --lift-card:       -2px;
  --scale-image:     1.035;

  --z-header:100; --z-scrim:110; --z-drawer:120; --z-sticky:90; --z-toast:200;
}

/* --------------------------------------------------------------------------
   Arabic typography is tuned independently — it is not English metrics with
   an Arabic font dropped in. Arabic needs more leading, no letter-spacing,
   and a slightly larger optical size at the same nominal value.
   -------------------------------------------------------------------------- */
:root:lang(ar),
[dir="rtl"]{
  --font-body: var(--font-ar);
  --lh-body:    1.85;
  --lh-heading: 1.28;
  --lh-tight:   1.35;
  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-eyebrow: .12em;   /* Arabic letterforms connect — wide tracking breaks words */
  --tracking-button:  0;
  --fs-body:    1.0625rem;     /* +1px optical compensation */
  --fs-sm:      .9375rem;
  --fs-caption: .8125rem;
}

[dir="ltr"]{
  --font-body: var(--font-en);
}