/* ============================================================
   Emirates Developments — Marketing Material Hub
   Design tokens. Palette: white / off-white / grey, minimal gold.
   Colours are space-separated RGB channels: use rgb(var(--c-x) / a).
   No colour literals outside this file.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --c-paper:     255 255 255;  /* #FFFFFF  page ground              */
  --c-offwhite:  247 245 242;  /* #F7F5F2  warm off-white bands     */
  --c-grey-100:  236 234 230;  /* #ECEAE6  wells, folder bodies     */
  --c-grey-200:  224 221 215;  /* #E0DDD7  pressed / borders        */

  /* ---- Text ---- */
  --c-ink:       31 31 29;     /* #1F1F1D  headings, body           */
  --c-grey-600:  110 107 102;  /* #6E6B66  secondary, meta          */
  --c-grey-300:  201 198 192;  /* #C9C6C0  hairlines, rules         */

  /* ---- Gold: RESERVED FOR THE LOGO ONLY (per Ali, 2026-09-01).
          The logo SVGs carry their own #9B835D; do not colour UI with these. ---- */
  --c-gold:      155 131 93;   /* #9B835D — logo reference only, unused in UI */

  /* ---- Fixed ---- */
  --c-white:     255 255 255;
  --c-black:     10 10 9;

  /* ---- Derived surfaces ---- */
  --rule:        rgb(var(--c-ink) / 0.10);
  --rule-strong: rgb(var(--c-ink) / 0.16);
  --scrim:       rgb(var(--c-black) / 0.62);
  --glass:       rgb(var(--c-paper) / 0.72);
  --blur-glass:  blur(14px) saturate(1.15);
  --ground-wash: radial-gradient(120% 90% at 50% 0%, rgb(var(--c-offwhite)) 0%, rgb(var(--c-paper)) 70%);
  --shadow-card: 0 1px 2px rgb(var(--c-ink) / 0.04), 0 14px 34px -14px rgb(var(--c-ink) / 0.14);
  --shadow-lift: 0 2px 4px rgb(var(--c-ink) / 0.05), 0 28px 56px -18px rgb(var(--c-ink) / 0.24);

  /* ---- Type scale (fluid 375 → 1440) ---- */
  --t-display: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);     /* 34 → 56  */
  --t-numeral: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);    /* 24 → 36  */
  --t-hero:    clamp(2.5rem, 1.4rem + 4.7vw, 5.625rem);   /* 40 → 90  */
  --t-h1:      clamp(2rem, 1.37rem + 2.7vw, 3.75rem);     /* 32 → 60  */
  --t-h2:      clamp(1.5rem, 1.22rem + 1.2vw, 2.25rem);   /* 24 → 36  */
  --t-h3:      clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);/* 18 → 22  */
  --t-lede:    clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem);/* 17 → 20 */
  --t-body:    clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);  /* 15 → 16  */
  --t-small:   0.8125rem;                                  /* 13       */
  --t-micro:   0.6875rem;                                  /* 11       */
  --t-eyebrow: 0.625rem;                                   /* 10 fixed */

  /* ---- Letter-spacing ---- */
  --ls-eyebrow: 0.32em;
  --ls-button:  0.22em;
  --ls-wide:    0.18em;
  --ls-tight:  -0.015em;

  /* ---- Faces (one geometric family everywhere) ---- */
  --f-heading: "Poppins", system-ui, -apple-system, sans-serif;
  --f-body:    "Poppins", system-ui, -apple-system, sans-serif;
  --f-label:   "Poppins", system-ui, -apple-system, sans-serif;

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   180ms;
  --dur-med:    420ms;
  --dur-reveal: 900ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --gutter:    clamp(1.5rem, 4vw, 4rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --radius-tile: 14px;
  --radius-btn:  999px;
  --radius-pill: 999px;
  --radius-card: 20px;
}

/* ---- Dark scheme: same primitives the performance portal swaps
        (src/styles/tokens.css [data-theme='dark']), applied automatically
        from the phone's setting. Everything else derives. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-paper:     28 28 26;     /* #1C1C1A  card surface   */
    --c-offwhite:  20 20 19;     /* #141413  page ground    */
    --c-grey-100:  38 38 36;     /* #262624  wells          */
    --c-grey-200:  51 51 47;     /* #33332F  borders        */
    --c-ink:       240 238 234;  /* #F0EEEA  text           */
    --c-grey-600:  160 157 150;  /* #A09D96                 */
    --c-grey-300:  72 71 67;     /* #484743                 */
    --shadow-card: 0 0 0 1px rgb(var(--c-grey-200)), 0 14px 34px -14px rgb(var(--c-black) / 0.6);
    --shadow-lift: 0 0 0 1px rgb(var(--c-grey-200)), 0 28px 56px -18px rgb(var(--c-black) / 0.8);
    color-scheme: dark;
  }
}