/* ============================================================
   DOMECO — Design & Fit Out, Dubai
   base.css — tokens, reset, typography, utilities
   Design language distilled from the DOMECO Figma + domeco.ae
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette (from Figma fills) */
  --ink:        #1B1B18;   /* primary dark surface / text */
  --ink-2:      #2B2B29;   /* elevated dark / ghost headings */
  --ink-3:      #201F1C;   /* deep panel */
  --sand:       #E8E1DA;   /* warm light surface */
  --sand-2:     #E3DFD9;
  --paper:      #F0F0F0;   /* neutral light surface */
  --white:      #FFFFFF;
  --gold:       #F37021;   /* brand accent — Hermès orange */
  --gold-ink:   #1B1B18;   /* text on accent */
  --wa:         #25D366;   /* WhatsApp green */
  --grey:       #B7B7B7;
  --grey-2:     #8A8A86;
  --line:       rgba(27,27,24,.14);
  --line-dark:  rgba(255,255,255,.14);

  /* Semantic */
  --bg:            var(--white);
  --text:          var(--ink);
  --text-muted:    #5B5B57;
  --text-on-dark:  #F4F1ED;
  --text-on-dark-muted: #A7A29B;

  /* Type */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(3.25rem, 1.6rem + 6.6vw, 8.125rem);   /* 52 → 130 */
  --fs-h1:      clamp(2.75rem, 1.6rem + 4.6vw, 5rem);       /* 44 → 80 */
  --fs-h2:      clamp(2.25rem, 1.4rem + 3.4vw, 4rem);       /* 36 → 64 */
  --fs-h3:      clamp(1.75rem, 1.2rem + 2.2vw, 3rem);       /* 28 → 48 */
  --fs-sub:     clamp(1.125rem, 1rem + 0.5vw, 1.5rem);      /* 18 → 24 */
  --fs-lg:      clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17 → 18 */
  --fs-base:    1rem;                                        /* 16 */
  --fs-sm:      0.875rem;                                    /* 14 */
  --fs-xs:      0.75rem;                                     /* 12 */

  --lh-tight: 0.98;
  --lh-snug:  1.12;
  --lh-body:  1.6;

  /* Space & layout */
  --container: 1520px;
  --pad:  clamp(1.25rem, 4vw, 6rem);
  --gap:  clamp(1rem, 2vw, 2rem);
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Radius */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(27,27,24,.06);
  --shadow:    0 18px 50px -20px rgba(27,27,24,.28);
  --shadow-gold: 0 18px 44px -18px rgba(243,112,33,.55);

  /* Motion */
  --dur: .5s;
  --dur-fast: .25s;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.display { font-size: var(--fs-display); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: var(--fs-sm);
  color: var(--text-muted);
}
.lead { font-size: var(--fs-sub); line-height: 1.35; color: var(--text-muted); }
p { text-wrap: pretty; }
.balance { text-wrap: balance; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.section--flush { padding-block: 0; }
.stack > * + * { margin-top: 1rem; }

/* Surfaces */
.bg-ink   { background: var(--ink);  color: var(--text-on-dark); }
.bg-ink-2 { background: var(--ink-2); color: var(--text-on-dark); }
.bg-sand  { background: var(--sand); }
.bg-paper { background: var(--paper); }
.bg-gold  { background: var(--gold); color: var(--gold-ink); }

/* Ghost oversized heading (Figma tone-on-tone motif), kept decorative + accessible */
.ghost { color: transparent; -webkit-text-stroke: 1px var(--line); }
.bg-ink .ghost, .bg-ink-2 .ghost { -webkit-text-stroke: 1px rgba(255,255,255,.10); }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
/* above-fold hero виден сразу — не ждём JS-reveal (иначе FCP/LCP тормозят на мобиле) */
.hero [data-reveal], .hero-figure[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.on-dark .muted { color: var(--text-on-dark-muted); }
.nowrap { white-space: nowrap; }
.hide-mobile { display: revert; }
.only-mobile { display: none; }
@media (max-width: 860px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: revert; }
}