/* ---------------------------------------------------------------------------
   Design tokens. Every colour, font, space and radius in the site comes from
   here. Nothing else in the project should contain a raw hex value.

   The palette is taken from the shop itself: cream marble walls, the bronze
   scissors on the brushed-steel sign, and a dark espresso for contrast bands.
   --------------------------------------------------------------------------- */

:root {
  /* --- Light surfaces (default) ----------------------------------------- */
  --c-bg:          #f7f2ea;  /* page — cream marble                          */
  --c-bg-alt:      #efe7da;  /* alternating section                          */
  --c-surface:     #fffdf9;  /* cards, form fields                           */
  --c-surface-hi:  #f4ede2;  /* hover on a card                              */
  --c-line:        #e0d4c2;  /* hairlines                                    */
  --c-line-strong: #cbbba4;  /* field borders                               */

  --c-text:        #1c1814;  /* espresso ink                                 */
  --c-text-muted:  #5c5246;  /* secondary copy                               */
  --c-text-faint:  #6b6053;  /* captions, fine print                        */

  --c-accent:      #7f592b;  /* bronze — text, prices, icons on light       */
  --c-accent-soft: rgba(154, 111, 60, 0.12);
  --c-accent-line: #c9a36b;  /* decorative rules and rings, never text      */

  /* --- Dark bands (facts strip, gallery, footer) ------------------------ */
  --c-ink:         #1c1814;
  --c-ink-alt:     #27211b;
  --c-ink-line:    #3a3229;
  --c-ink-text:    #f3ece1;
  --c-ink-muted:   #b9ac98;
  --c-ink-accent:  #d4ab6e;  /* bronze, lifted for dark backgrounds         */

  /* --- Buttons ---------------------------------------------------------- */
  --c-primary:     #1c1814;  /* espresso fill                                */
  --c-primary-hi:  #3a3129;
  --c-on-primary:  #f7f2ea;

  --c-whatsapp:    #25d366;
  --c-whatsapp-hi: #1fbe5b;
  --c-on-whatsapp: #06240f;

  --c-open:        #1f7a44;  /* "open now" on light                          */
  --c-error:       #a3361f;
  --c-focus:       #7f592b;

  /* --- Type ------------------------------------------------------------- */
  --font-body:       "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display-lt: "Cinzel", "Times New Roman", serif;   /* matches the sign */
  --font-display-ar: "El Messiri", "Cairo", serif;
  --font-display:    var(--font-display-lt);

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  2.75rem;

  --fw-normal: 400;
  --fw-semi:   600;
  --fw-bold:   700;

  --lh-tight: 1.2;
  --lh-body:  1.75;

  --tracking-wide:  0.2em;
  --tracking-brand: 0.14em;

  /* --- Space ------------------------------------------------------------ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* --- Shape ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  /* Hero photo frame: one sweeping corner. Physical, not logical, on purpose —
     the shop sign sits in the photo's top-right, so the curve must stay on
     the top-left in both languages. */
  --r-leaf: 180px var(--r-lg) var(--r-lg) var(--r-lg);
  --r-full: 999px;

  --border:        1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);
  --border-ink:    1px solid var(--c-ink-line);

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(28, 24, 20, 0.06);
  --shadow-md:  0 10px 30px rgba(28, 24, 20, 0.10);
  --shadow-bar: 0 -8px 24px rgba(28, 24, 20, 0.12);

  /* --- Layout ----------------------------------------------------------- */
  --page-max:      min(1120px, 100% - 2 * var(--s-5));
  --header-height: 64px;
  --bar-height:    62px;   /* sticky call/WhatsApp bar on phones */

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 140ms ease;
  --t-base: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Cinzel has no Arabic glyphs. */
html[lang="ar"] { --font-display: var(--font-display-ar); }

@media (min-width: 48rem) {
  :root {
    --fs-2xl: 2.75rem;
    --fs-3xl: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
  }
}