/* ============================================================
   DESIGNGAGE_HOMES - design tokens
   Everything else references these. The photographs carry the
   colour; the interface stays out of their way.
   ============================================================ */

:root {
  /* Warm neutrals. Nothing here is pure black or pure white -
     the whole palette sits on the cream side of neutral. */
  --ink:        #2b2724;
  --ink-80:     #4b453f;
  --ink-60:     #6f675f;
  --ink-40:     #9c948a;
  --ink-20:     #d9d0c4;
  --paper:      #fdfbf7;
  --sand-100:   #faf6ef;
  --sand-200:   #f4ede3;
  --sand-300:   #e9dfd1;
  /* The dark band is warm charcoal, not neutral grey. */
  --coal:       #2e2a26;
  --coal-soft:  #3a352f;

  /* Terracotta. --accent is a *background* and rule colour;
     --accent-text is the darker twin that clears AA on cream. */
  --accent:      #b4704a;
  --accent-text: #9a5733;
  /* On the coal band the mid terracotta only reaches 3.6:1, so dark
     sections get a lifted tint instead. */
  --accent-dark: #d99a74;

  --bg:         var(--paper);
  --fg:         var(--ink);
  --rule:       var(--ink-20);

  /* Type families. A serif stack without Noto Serif KR drops Korean
     to a system font mid-headline, so the CJK fallback is explicit. */
  --font-display: "Instrument Serif", "Noto Serif KR", "Nanum Myeongjo",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Pretendard", "Pretendard Variable",
                  -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Fluid display sizes. The min stays legible at 375px; the max
     stops growing past ~1600px so 2560px screens avoid billboards. */
  --fs-display:  clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --fs-h1:       clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3:       clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-lead:     clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --fs-body:     0.9375rem;
  --fs-small:    0.8125rem;
  --fs-label:    0.6875rem;

  /* Instrument Serif ships a single weight; the Korean serif needs to
     be pushed heavier to carry the same optical weight next to it. */
  --display-weight: 400;

  --lh-display:  1.14;
  --lh-heading:  1.2;
  --lh-body:     1.75;

  --ls-display:  -0.015em;
  --ls-heading:  -0.01em;
  --ls-label:    0.18em;

  /* Spacing. The editorial feel lives almost entirely in the top end. */
  --space-2xs:   0.25rem;
  --space-xs:    0.5rem;
  --space-sm:    0.75rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   clamp(3rem, 1.8rem + 5vw, 6rem);
  --space-4xl:   clamp(4.5rem, 2rem + 8vw, 9rem);
  --space-5xl:   clamp(6rem, 2rem + 12vw, 13rem);

  --gutter:      clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
  --maxw:        90rem;
  --maxw-prose:  62ch;
  --header-h:    4.75rem;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-med:     420ms;
  --dur-slow:    900ms;

  --z-header:    100;
  --z-float:     200;
  --z-overlay:   300;
}

/* Hangul blocks read dense at Latin line-heights, and the serif
   display needs a little more room to breathe. */
:root:lang(ko) {
  --lh-display: 1.3;
  --lh-heading: 1.38;
  --lh-body:    1.85;
  --ls-display: -0.005em;
  /* Noto Serif KR 400 reads thin at display size against the Latin
     serif, so Korean headlines run one step heavier. */
  --display-weight: 500;
}

/* Vietnamese stacks diacritics above AND below the x-height, so
   tight display leading clips them. */
:root:lang(vi) {
  --lh-display: 1.24;
  --lh-heading: 1.3;
}