/* ==========================================================
   ZYARA.ID — base.css
   Design tokens + reset. Component styling lives in components.css,
   page-specific rules in pages.css, breakpoint overrides in
   responsive.css. See README.md "Design system" for the rationale.
   ========================================================== */
:root{
  /* ---- Color: light (default) ---- */
  --night:#0e1526; --dusk:#16223b; --dusk-2:#1c2c49;
  --sand:#f6f1e4; --bone:#ede6d2; --paper:#ffffff;
  --brass:#8e6623; --brass-2:#d9a648; --brass-rgb:142,102,35;
  --palm:#0b6b57; --palm-2:#158069;
  --ink:#12203a; --body:#4b5468; --muted:#666e7d;
  --line:rgba(18,32,58,.11); --line-strong:rgba(18,32,58,.18);
  color-scheme:light;

  /* ---- Type ---- */
  --fd:"Petrona",Georgia,serif;         /* display */
  --fb:"Plus Jakarta Sans",system-ui,sans-serif; /* body/UI */

  /* ---- Layout ---- */
  --container:1240px;
  --gutter:clamp(20px,4.4vw,34px);
  --header-h:76px;
  --sec-pad:clamp(64px,8vw,120px);

  /* ---- Radius / shadow / motion ---- */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:9px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,21,38,.06),0 12px 30px rgba(14,21,38,.08);
  --sh-2:0 4px 10px rgba(14,21,38,.10),0 34px 80px rgba(14,21,38,.20);
  --ease:cubic-bezier(.2,.6,.2,1);

  /* ---- Spacing scale (used by component gap/padding utilities) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- Z-index scale ---- */
  --z-header:120; --z-drawer:140; --z-concierge:130; --z-fab:110;
}
html[dir="rtl"]{ --fd:"Amiri",serif; --fb:"Cairo",system-ui,sans-serif; }

/* ---- Color: dark (opt-in via [data-theme="dark"]) ---- */
[data-theme="dark"]{
  color-scheme:dark;
  --sand:#0b1120; --bone:#121b30; --paper:#16223b;
  --ink:#f3efe4; --body:#b6bfd2; --muted:#7c88a0;
  --brass:#d9a648; --brass-2:#f0c785; --brass-rgb:217,166,72;
  --palm:#2a9880; --palm-2:#3fb096;
  --line:rgba(243,239,228,.10); --line-strong:rgba(243,239,228,.18);
  --sh-1:0 1px 2px rgba(0,0,0,.30),0 12px 30px rgba(0,0,0,.35);
  --sh-2:0 4px 10px rgba(0,0,0,.35),0 34px 80px rgba(0,0,0,.55);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--fb);font-size:16px;color:var(--body);background:var(--sand);line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--night);color:#fff;padding:10px 18px;border-radius:8px;z-index:999}
.skip:focus{inset-inline-start:8px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
[dir="rtl"] .icon-flip{transform:scaleX(-1)}

/* ---- Type scale ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
html[dir="rtl"] .eyebrow{letter-spacing:0}
.eyebrow::before{content:"";width:9px;height:9px;border:2px solid var(--brass);border-radius:50%;flex:none}

.h1{font-family:var(--fd);font-weight:500;font-size:clamp(34px,5.4vw,60px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.h2{font-family:var(--fd);font-weight:500;font-size:clamp(27px,3.6vw,42px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.h3{font-family:var(--fd);font-weight:500;font-size:clamp(18px,1.9vw,23px);line-height:1.3;color:var(--ink)}
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3{font-weight:700;letter-spacing:0}
.lede{font-size:clamp(15px,1.3vw,18px);line-height:1.75;color:var(--body);max-width:60ch;margin-top:14px}
.on-dark{color:rgba(243,239,228,.86)}
.on-dark .h1,.on-dark .h2,.on-dark .h3{color:var(--sand)}
.on-dark .lede{color:rgba(243,239,228,.72)}
.on-dark .eyebrow{color:var(--brass-2)}
.on-dark .eyebrow::before{border-color:var(--brass-2)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(32px,4.4vw,56px)}
.sec-head .lede{margin-top:14px}
.sec-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:4px;white-space:nowrap}

.page-stub{padding-block:var(--sec-pad)}
.legal-banner{display:inline-block;margin-top:var(--sp-4);padding:10px 16px;border:1px dashed var(--brass);border-radius:var(--r-sm);color:var(--brass);font-weight:600;font-size:14px}

/* ---- Reveal-on-scroll utility (progressive enhancement; see navigation.js) ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}