/* Dubai Islands — design tokens
   Totality Real Estate · master template for Dubai Islands / Al Marjan / Yas

   Cloning to another area: change ONLY the four --accent-* values, the hero imagery
   and the lockup word. Nothing else in this file moves.

   Typography reconciled to the design canvas, 2 Aug 2026: Instrument Sans, and the
   scale from design-system frame 1D (60/44/38/30/21), not the smaller draft in the
   original handoff tokens. */

:root {
  /* ---- accent · PER-AREA, the only swappable group ---- */
  --accent:            #0F6C78;   /* Dubai Islands ocean teal */
  --accent-hover:      #0B565F;
  --accent-soft:       #EAF2F2;
  --accent-border:     #CFE0E0;
  /* Al Marjan:  #B4543F / #96422F / #FBEDE9 / #F0D6CE  */
  /* Yas:        #6B4E8F / #563E73 / #F0EBF6 / #DCD2E8  */

  /* ---- brand constant across all three sites ---- */
  --gold:              #C8A44D;
  --gold-light:        #E0BE6E;   /* gold on dark only */
  --whatsapp:          #1E7A4F;

  /* ---- neutrals ---- */
  --ink:               #101413;
  --paper:             #FBFBFA;
  --surface:           #FFFFFF;
  --surface-muted:     #F4F6F5;
  --surface-sunken:    #FAFBFA;
  --border:            #E6E8E7;
  --border-strong:     #DCE0DE;
  --hairline:          #EEF0EF;

  /* ---- text ---- */
  --text-primary:      #101413;
  --text-body:         #2E3A37;
  --text-secondary:    #5F6B68;
  --text-muted:        #6B7671;
  --text-faint:        #9AA4A0;
  --text-on-dark:      #FBFBFA;

  /* ---- semantic · verdicts and build status ---- */
  --positive:          #1E7A4F;   --positive-soft: #E9F5EE;  --positive-border: #C8E5D5;
  --caution:           #8A6B1E;   --caution-soft:  #FAF3E2;  --caution-border:  #EBDCB6;
  --negative:          #A2412C;   --negative-soft: #FBEDEA;  --negative-border: #F0D3CC;
  --neutral-tag:       #4A5551;   --neutral-soft:  #F1F3F1;  --neutral-border:  #DCE0DE;

  /* ---- type families ---- */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- type scale · from design-system frame 1D ---- */
  --fs-display-xl: 60px;   --lh-display-xl: 1.035;  --ls-display-xl: -.035em;
  --fs-display-lg: 44px;   --lh-display-lg: 1.045;  --ls-display-lg: -.035em;
  --fs-heading-lg: 38px;   --lh-heading-lg: 1.105;  --ls-heading-lg: -.035em;
  --fs-heading-md: 30px;   --lh-heading-md: 1.135;  --ls-heading-md: -.03em;
  --fs-heading-sm: 21px;   --lh-heading-sm: 1.19;   --ls-heading-sm: -.02em;
  --fs-body-lg:    18.5px; --lh-body-lg:    1.62;
  --fs-body:       16px;   --lh-body:       1.69;
  --fs-label:      14px;   --lh-label:      1.43;
  --fs-sm:         14.5px; --lh-sm:         1.55;
  --fs-xs:         13.5px; --lh-xs:         1.50;
  --fs-micro:      12.5px; --lh-micro:      1.45;
  --fs-eyebrow:    10.5px; --ls-eyebrow:    .16em;   /* mono, uppercase */
  --fs-data:       15px;                             /* mono, tabular, 13–17 in use */

  /* mobile overrides */
  --fs-display-xl-m: 31px;
  --fs-display-lg-m: 28px;
  --fs-heading-lg-m: 26px;
  --fs-heading-md-m: 22px;
  --fs-heading-sm-m: 17px;
  --fs-body-m:       15px;

  /* weights */
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ---- spacing · 4pt base ---- */
  --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-14: 56px; --sp-18: 72px;

  --pad-section-x:   48px;   --pad-section-y:   56px;
  --pad-section-x-m: 16px;   --pad-section-y-m: 18px;
  --container-max:   1440px;

  /* ---- radii ---- */
  --r-badge: 6px;  --r-btn: 10px;  --r-sm: 12px;  --r-md: 14px;
  --r-card: 16px;  --r-frame: 20px; --r-pill: 999px;

  /* ---- elevation · one shadow only ---- */
  --shadow-card: 0 1px 2px rgba(16,20,19,.04);
  --shadow-pop:  0 16px 40px rgba(16,20,19,.14);  /* dropdown, modal only */

  /* ---- motion ---- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;  --dur: 200ms;  --dur-slow: 320ms;

  /* ---- breakpoints (reference; use the px values in media queries) ---- */
  --bp-sm: 390px;  --bp-md: 768px;  --bp-lg: 1024px;
  --bp-xl: 1280px; --bp-max: 1440px;

  /* ---- targets ---- */
  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}