/* ==========================================================================
   AJK Dream House Ltd. — Design Tokens
   Brand colours + logo geometry derive from the Figma file (node 93:2964).
   Scale, rhythm and the gold material system are redesigned for a
   full-width modern landing page rather than the 1280px Figma frame.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --gold:            #e6c364;
  --gold-light:      #f5e2ab;   /* highlight end of the gold gradient        */
  --gold-deep:       #c9a84c;   /* shadow end / pressed state                */
  --gold-ink:        #201705;   /* text on gold fills                        */

  /* The logo is a metallic gradient — mirror it everywhere gold is a fill.  */
  --gold-grad: linear-gradient(135deg,
                 var(--gold-light) 0%,
                 var(--gold)       42%,
                 var(--gold-deep)  100%);

  --gold-grad-soft: linear-gradient(135deg,
                 rgba(245, 226, 171, 0.16) 0%,
                 rgba(230, 195, 100, 0.06) 55%,
                 rgba(201, 168, 76, 0.00) 100%);

  /* ---- Surfaces --------------------------------------------------------- */
  --bg:              #100e09;   /* deeper than Figma — lets gold read hotter */
  --bg-raise:        #16130d;
  --bg-alt:          #1a1710;
  --bg-sunk:         #0b0906;

  /* ---- Type colours ----------------------------------------------------- */
  --text:            #f2ece3;
  --text-muted:      #c9bda8;
  --text-dim:        #8e8471;

  /* ---- Translucent layers ----------------------------------------------- */
  --layer-02:        rgba(255, 255, 255, 0.02);
  --layer-04:        rgba(255, 255, 255, 0.04);
  --layer-06:        rgba(255, 255, 255, 0.06);
  --layer-10:        rgba(255, 255, 255, 0.10);

  --line:            rgba(255, 255, 255, 0.09);
  --line-strong:     rgba(255, 255, 255, 0.16);

  --gold-06:         rgba(230, 195, 100, 0.06);
  --gold-12:         rgba(230, 195, 100, 0.12);
  --gold-20:         rgba(230, 195, 100, 0.20);
  --gold-35:         rgba(230, 195, 100, 0.35);
  --gold-60:         rgba(230, 195, 100, 0.60);

  --glass:           rgba(16, 14, 9, 0.62);
  --glass-light:     rgba(30, 27, 20, 0.55);

  /* ---- Elevation & glow -------------------------------------------------- */
  --edge:            inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
  --shadow-sm:       0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-md:       0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --shadow-lg:       0 48px 100px -40px rgba(0, 0, 0, 0.9);
  --glow-gold:       0 18px 50px -18px rgba(230, 195, 100, 0.45);
  --glow-gold-soft:  0 12px 40px -20px rgba(230, 195, 100, 0.28);

  /* ---- Blur -------------------------------------------------------------- */
  --blur-sm:         blur(10px);
  --blur-md:         blur(18px);
  --blur-lg:         blur(28px);

  /* ---- Typography -------------------------------------------------------- */
  --font-display:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:         'Geist', 'Inter', system-ui, sans-serif;

  /* A genuinely large scale — the Figma frame was drawn far too small. */
  --fs-hero:    clamp(2.75rem, 1.55rem + 5.2vw, 5rem);       /* 44 → 80 */
  --fs-display: clamp(2.25rem, 1.55rem + 3.0vw, 3.5rem);     /* 36 → 56 */
  --fs-h2:      clamp(1.875rem, 1.4rem + 2.1vw, 2.875rem);   /* 30 → 46 */
  --fs-h3:      clamp(1.3125rem, 1.16rem + 0.65vw, 1.625rem);/* 21 → 26 */
  --fs-h4:      clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 → 19 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17 → 20 */
  --fs-body:    clamp(0.9375rem, 0.91rem + 0.16vw, 1.0625rem);/* 15 → 17 */
  --fs-sm:      0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.04;
  --lh-head:    1.12;
  --lh-snug:    1.28;
  --lh-body:    1.65;

  --ls-hero:    -0.02em;   /* big display type wants negative tracking */
  --ls-h2:      -0.015em;
  --ls-eyebrow: 0.14em;

  /* ---- Geometry ---------------------------------------------------------- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 9999px;

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --grid-gap: clamp(1rem, 1.6vw, 1.75rem);

  --section-y:    clamp(4.5rem, 8vw, 8.75rem);
  --section-y-lg: clamp(5.5rem, 10vw, 11rem);

  --header-h: 84px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur:       340ms;
  --dur-slow:  680ms;
}

@media (max-width: 700px) {
  :root { --header-h: 72px; }
}