/* ==========================================================================
   H'line Dubai — base.css
   Design tokens, reset, typography. RTL/LTR handled via CSS logical properties
   so the same stylesheet serves both /ar (rtl) and /en (ltr).
   Reference design language: Ounass (luxury minimalist).
   ========================================================================== */

:root {
  /* ---- Color tokens — H'line Dubai: Emerald + Gold ---- */
  --color-bg:        #ffffff;
  --color-ink:       #16271f;   /* deep emerald-charcoal — text, dark bars */
  --color-ink-soft:  #51605a;   /* secondary text */
  --color-muted:     #8d958f;   /* tertiary / placeholders */
  --color-accent:    #1f5c4a;   /* emerald — CTA buttons, active links */
  --color-accent-dk: #174536;   /* hover state for accent */
  --color-gold:      #c2a24e;   /* gold — highlights, dividers, badges */
  --color-gold-dk:   #a8853a;   /* deeper gold (hover/borders) */
  --color-price:     #9c7b2e;   /* prices — deep readable gold */
  --color-cream:     #f4ecdd;   /* hero / banner backgrounds — warm oud cream */
  --color-cream-dk:  #e7dac2;
  --color-sale:      #8b2e3c;   /* "Sale" accent (burgundy) */
  --color-line:      #e8e1d2;   /* hairline borders (warm) */
  --color-line-dk:   #d2c9b4;
  --color-surface:   #f6f1e8;   /* product image background, cards */
  --color-footer:    #16271f;   /* footer / dark sections (deep emerald) */

  /* ---- Typography ---- */
  --font-serif:  "Playfair Display", "Aref Ruqaa", "Amiri", Georgia, serif;
  --font-sans:   "Jost", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-ar-serif: "Aref Ruqaa", "Amiri", "Playfair Display", serif;

  /* ---- Layout ---- */
  --maxw: 1440px;
  --gutter: 32px;
  --header-h: 132px;

  /* ---- Misc ---- */
  --radius: 2px;
  --transition: 0.25s ease;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,.12);
}

/* Arabic locale swaps the display serif for an Arabic one */
html[lang="ar"] {
  --font-serif: "Aref Ruqaa", "Amiri", "Playfair Display", serif;
  --font-sans:  "Tajawal", "Jost", "Segoe UI", system-ui, sans-serif;
}

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

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

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; }

/* ---- Typography helpers ---- */
.display    { font-family: var(--font-serif); }
.eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-gold-dk); font-weight: 600;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .01em;
}
.section-title::before {
  content: "\2756"; /* ✦ gold flourish — H'line signature */
  color: var(--color-gold);
  font-size: .5em; vertical-align: middle;
  margin-inline-end: .55em; font-family: Georgia, serif;
}
.price { color: var(--color-price); font-weight: 500; }
.muted { color: var(--color-muted); }

/* ---- Layout utilities ---- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 6vw, 72px); }
.flow > * + * { margin-block-start: 1rem; }
.text-center { text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-dk); color: #fff; }
.btn--gold { background: var(--color-gold); color: var(--color-ink); }
.btn--gold:hover { background: var(--color-gold-dk); color: var(--color-ink); }
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { background: #0e1a14; color: #fff; }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 40px; }

/* Underlined "Shop now" style link */
.link-underline {
  display: inline-block; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* ---- Forms ---- */
.field { display: block; margin-block-end: 18px; }
.field > label {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-ink-soft); margin-block-end: 7px;
}
.input, .select, .textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--color-line-dk); border-radius: var(--radius);
  background: #fff; font-size: 14px; transition: border-color var(--transition);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-accent); }
.textarea { resize: vertical; min-height: 120px; }

/* ---- Accessibility ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- Badges / chips ---- */
.badge {
  display: inline-block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; background: rgba(194,162,78,.10); color: var(--color-gold-dk);
  padding: 4px 9px; border: 1px solid var(--color-gold);
}
.badge--sale { color: var(--color-sale); border-color: var(--color-sale); background: rgba(139,46,60,.07); }