/* ============================================================================
   ARABIA RESIDENCE — DESIGN TOKENS  (single source of truth)
   Loaded on every page AFTER Tailwind + the page's inline <style>.
   Implements the website standards in design-system/README.md.
   Brand palette + Alexandria type from brand_assets/Brand Guidelines.
   ========================================================================== */

:root {
  /* ---- Brand colour palette (Brand Guidelines p.10) ---- */
  --c-green:        #00AF6C;   /* PRIMARY  */
  --c-navy:         #101C32;   /* PRIMARY  */
  --c-blue:         #005B96;   /* secondary */
  --c-slate:        #477F8F;   /* secondary */
  --c-mint:         #D1FBE0;   /* secondary */

  /* derived greens (hover / depth / tints) */
  --c-green-600:    #009A5F;
  --c-green-700:    #00794A;
  --c-green-tint:   #E8F8F0;   /* faint green wash */
  --c-green-line:   rgba(0,175,108,0.35);

  /* ink / text */
  --c-ink:          #101C32;   /* primary text  */
  --c-muted:        #586173;   /* secondary text (AA on white) */
  --c-faint:        #8A93A3;   /* tertiary / meta */

  /* lines & surfaces */
  --c-line:         rgba(16,28,50,0.12);
  --c-line-soft:    rgba(16,28,50,0.07);
  --c-bg:           #FAFBFC;   /* page background */
  --c-surface:      #FFFFFF;   /* cards / elevated */
  --c-sunken:       #F3F5F7;   /* subtle fill */

  /* ---- Spacing scale (8pt grid) ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* ---- Layout container ---- */
  --container-max: 1680px;
  --container-pad: clamp(20px, 8.33vw, 120px);   /* = 120px on a ≥1440 viewport */

  /* ---- Type scale (18px base) ---- */
  --fs-base: 1.125rem;   /* 18px */
  --lh-body: 1.65;

  /* ---- Radii / elevation ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;
  --shadow-card: 0 1px 3px rgba(16,28,50,0.06), 0 1px 2px rgba(16,28,50,0.04);
  --shadow-card-hover: 0 18px 48px rgba(16,28,50,0.10), 0 6px 16px rgba(16,28,50,0.06);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================================================
   1. BASE  —  18px body, consistent ink colour
   ========================================================================= */
body {
  font-family: 'Alexandria', sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

/* ===========================================================================
   2. LAYOUT  —  standard 120px container + section rhythm + grid
   ========================================================================= */
.ds-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ds-section        { padding-block: clamp(56px, 7vw, 96px); }
.ds-section--tight { padding-block: clamp(36px, 5vw, 64px); }

/* generic responsive grids */
.ds-grid       { display: grid; gap: clamp(16px, 2vw, 24px); }
.ds-card-grid  { display: grid; gap: clamp(16px, 2vw, 24px);
                 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ===========================================================================
   3. TYPOGRAPHY  —  one hierarchy, used site-wide.
      Legacy classes (.h1-hero/.h1/.h2/.h3/.section-label/.body-text) are
      redefined here so existing markup inherits the standard automatically.
   ========================================================================= */
.ds-display, .h1-hero {
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
}
.ds-h1, .h1 {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
}
.ds-h2, .h2 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.015em;
}
.ds-h3, .h3 {
  font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}
.ds-h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.ds-lead    { font-size: 1.25rem;  line-height: 1.6;  color: var(--c-muted); font-weight: 400; }
.ds-body    { font-size: 1.125rem; line-height: 1.65; }
.ds-body-sm { font-size: 1rem;     line-height: 1.6; }
.ds-caption { font-size: 0.875rem; line-height: 1.5; color: var(--c-muted); }
.ds-overline, .section-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-green);
}
.body-text { font-size: 1.125rem; line-height: 1.7; max-width: 68ch; }

/* ===========================================================================
   4. SELECTABLE BOX  —  white fill, brand-green border when chosen
      (payment add-ons, pay methods, any choosable card).  Comment #6.
   ========================================================================= */
.ds-selectable {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ds-selectable:hover { border-color: var(--c-slate); }
.ds-selectable.is-selected,
.ds-selectable[aria-checked="true"],
.ds-selectable[data-selected="true"] {
  background: var(--c-surface);                    /* stays WHITE */
  border-color: var(--c-green);                    /* only border turns green */
  box-shadow: 0 0 0 1px var(--c-green) inset;
}

/* A larger box that groups a set of options/fields. Comment #6. */
.ds-group-box {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: var(--shadow-card);
}

/* ===========================================================================
   5. ACCORDION CHEVRON  —  arrow-down (closed) → arrow-up (open). Comment #3.
      Markup: <button class="ds-acc-trigger" aria-expanded="false">
                 …question… <span class="ds-acc-chevron" aria-hidden="true"></span>
              </button>
   ========================================================================= */
.ds-acc-chevron {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-navy);
  transition: transform 0.28s var(--ease), color 0.2s var(--ease);
}
.ds-acc-chevron::before {
  content: "";
  width: 11px; height: 11px;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);              /* points DOWN when collapsed */
  margin-top: -3px;
  transition: transform 0.28s var(--ease);
}
.ds-acc-trigger[aria-expanded="true"] .ds-acc-chevron,
.ds-acc-trigger.is-open .ds-acc-chevron { color: var(--c-green); }
.ds-acc-trigger[aria-expanded="true"] .ds-acc-chevron::before,
.ds-acc-trigger.is-open .ds-acc-chevron::before {
  transform: rotate(-135deg);            /* points UP when expanded */
  margin-top: 3px;
}

/* ===========================================================================
   6. SAUDI RIYAL SYMBOL  —  new official glyph. Comments #4, #6.
      Usage: <span class="riyal" role="img" aria-label="SAR"></span>
      Inherits text colour (mask + currentColor) and scales with font-size.
   ========================================================================= */
.riyal {
  display: inline-block;
  width: 0.92em; height: 0.92em;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("/website/design-system/assets/riyal.svg") no-repeat center / contain;
          mask: url("/website/design-system/assets/riyal.svg") no-repeat center / contain;
}
.riyal--price { width: 0.86em; height: 0.86em; vertical-align: -0.06em; }

/* ===========================================================================
   6b. STANDARD PROPERTY CARD  —  one card design site-wide. Comment #2.
       Canonical markup is documented in design-system/property-card.md
       (price badge on photo, discount top-left, visible heart top-right).
   ========================================================================= */
.property-card { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.property-card .card-img { transition: transform 0.5s var(--ease); }
.property-card:hover .card-img { transform: scale(1.05); }

/* Heart / wishlist — always legible on a photo (frosted dark disc, white heart) */
.heart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  color: #fff; background: rgba(16,28,50,0.32);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  cursor: pointer;
}
.heart-btn:hover { transform: scale(1.08); background: rgba(16,28,50,0.45); }
.heart-btn svg { width: 20px; height: 20px; }
.heart-btn.saved { color: #ef4444; }
.heart-btn.saved svg { fill: #ef4444; }

/* ===========================================================================
   7. BUTTONS  —  brand-consistent primary / secondary
   ========================================================================= */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; border-radius: var(--r-md); padding: 14px 24px; line-height: 1;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.16s var(--ease); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn-primary   { background: var(--c-green); color: #fff; }
.ds-btn-primary:hover   { background: var(--c-green-600); }
.ds-btn-secondary { background: #fff; color: var(--c-navy); border: 1.5px solid var(--c-line); }
.ds-btn-secondary:hover { border-color: var(--c-green); color: var(--c-green-700); }

/* ===========================================================================
   8. RTL niceties
   ========================================================================= */
[dir="rtl"] .ds-acc-chevron::before { /* chevron stays a vertical arrow in RTL */ }