/* ============================================================
   Shop Web — design system
   The only place colours, type, spacing and radii are defined.
   No borders, no shadows, no gradients anywhere in the app.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --bg:          #FBF9F6;  /* page */
  --surface:     #FFFFFF;  /* cards, sheets, nav */
  --surface-2:   #EFEBE3;  /* chips, fields, buttons */
  --text:        #16150F;
  --muted:       #8A8578;
  --accent:      #14563D;  /* brand green */
  --accent-ink:  #FFFFFF;  /* text on accent */
  --whatsapp:    #25D366;
  --scrim:       rgba(22, 21, 15, 0.38);
  --veil:        rgba(255, 255, 255, 0.88); /* heart button over a photo */

  /* ---- type ---- */
  --font-head: "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body: "Vazirmatn", system-ui, sans-serif;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   22px;

  --lh-tight: 1.3;
  --lh-base:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- space ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* ---- radius ---- */
  --r-img:   14px;
  --r-card:  18px;
  --r-field: 14px;
  --r-sheet: 22px;
  --r-pill:  999px;

  /* ---- layout ---- */
  --page-max: 560px;   /* the app is a phone screen, centred on desktop */
  --nav-h:    64px;

  /* ---- motion ---- */
  --t-fast: 140ms ease;
  --t-slide: 320ms ease;
}

/* ============================================================
   reset
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

img { display: block; max-width: 100%; }

/* `img { display: block }` above outranks the UA rule for [hidden],
   so restore it explicitly or hidden images still paint. */
[hidden] { display: none !important; }

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  border-radius: 0;
}

button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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