/* ==========================================================================
   Zahrat Al Shitaa Cosmetics, design tokens

   Green and gold are sampled straight out of the logo: #364d30 for the wreath
   and lettering, #ba9141 for the monogram. Product photography is shot on
   white seamless, so the shop is white wherever product sits and a warm
   neutral everywhere else, and the photographs dissolve into the page instead
   of sitting in boxes.

   Contrast note: the green is 9.5:1 on white and carries text and button fills
   happily. The gold is 3.0:1, so it is for rules, marks and fills, and for
   text only on the dark green. Body text is always --ink or --green.
   ========================================================================== */

:root {
  --ink: #22301f;           /* near-black with the logo's green in it */
  --ink-soft: #55604f;
  --ink-faint: #6f7a6a;     /* 4.6:1 on --paper */

  --green: #364d30;         /* the logo's green, primary */
  --green-deep: #24351f;    /* footer, control room bar */
  --green-bright: #4a6b42;  /* hover */
  --green-wash: #eef1ea;

  --gold: #ba9141;          /* the monogram; rules, marks, never body text */
  --gold-deep: #8a6a2a;     /* 4.8:1 on white, so it can carry small text */
  --gold-wash: #f7f2e6;
  --gold-line: #e7dcc4;

  --paper: #f6f5f1;         /* page ground */
  --seamless: #ffffff;      /* product panels, matches the photography */
  --line: #e3e0d8;
  --line-soft: #edeae3;

  --danger: #a32b1c;
  --danger-wash: #fbecea;
  --ok: #2f6b4f;

  /* Category chromatics. Used as identifying marks only, never as fills
     behind text. */
  --c-shampoo: #3d7581;
  --c-conditioner: #5f8545;
  --c-masks: #9c5271;
  --c-keratin: #ac7b26;
  --c-hair-oils: #8a6a2a;
  --c-massage: #7f6ea8;
  --c-styling: #4a5885;
  --c-skin: #a66246;
  --c-hair-colour: #7c4a2f;
  --c-salon-essentials: #4d7a6b;

  --font: "Archivo", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.05rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --text-3xl: clamp(2.4rem, 1.7rem + 3vw, 4.25rem);

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.62;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;  --s5: 1.5rem;
  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;  --s9: 6.5rem;

  --r-control: 4px;
  --r-card: 2px;
  --r-panel: 10px;
  --r-pill: 999px;

  --shell: 1220px;
  --shell-narrow: 680px;

  --ring: 0 0 0 3px rgba(186, 145, 65, 0.42);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

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

body {
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  /* dvh tracks the retracting browser bars on a phone; vh does not, and the
     page ends up taller than the screen with a strip cut off the bottom. */
  min-height: 100vh;
  min-height: 100dvh;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Arabic sets small beside Latin at one point size and needs more leading. */
html[lang="ar"] body { font-size: 1.0125rem; line-height: 1.85; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Safari zooms the whole page whenever a field smaller than 16px takes focus,
   and then leaves it zoomed. Only on touch, so the desktop scale is untouched. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  /* Text links that sit on their own line get a real target height without
     changing how they look. Anything already tall enough is untouched. */
  .line__name, .footer__link, .footer__base a, .back { padding-block: var(--s2); }
  .line__name { display: inline-block; }
}
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--gold-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: none) {
  /* A tap leaves :hover stuck on until you touch something else, so a chip
     you pressed keeps looking pressed. */
  a:hover, button:hover { color: inherit; }
}
@media (hover: hover) { a:hover { color: var(--ink); } }

h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.35; }

p { text-wrap: pretty; max-width: 66ch; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-wash); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The page is viewport-fit=cover, so on a notched phone held sideways the
   rounded corner eats the gutter unless the inset is added to it. */
.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: calc(var(--s5) + env(safe-area-inset-left, 0px))
                  calc(var(--s5) + env(safe-area-inset-right, 0px));
}
@media (max-width: 640px) {
  .shell {
    padding-inline: calc(var(--s4) + env(safe-area-inset-left, 0px))
                    calc(var(--s4) + env(safe-area-inset-right, 0px));
  }
}

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

.skip-link {
  position: absolute; inset-inline-start: var(--s4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r-control); transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s4); color: #fff; }