/* ESSY design tokens — single source of truth.
   Hard rules: three grays only, three weights only, two section tints. */

@import 'fonts.css';

:root {
  /* ---- Color ---- */
  --c-white:     #FFFFFF;
  --c-ink:       #1D1D1F;   /* display: H1 / H2 / H3 / eyebrow */
  --c-ink-soft:  #515154;   /* lead / subhead */
  --c-ink-mute:  #6E6E73;   /* body — darkened to clear 4.61:1 on white (WCAG 2.2 AA) */
  --c-line:      #E7E9EE;   /* hairlines, dividers, input borders */
  --c-pink:      #FBE9EE;   /* section tint: home / gentle / consumer */
  --c-pink-deep: #C98A9C;   /* accent only, sparing */
  --c-blue:      #E6F1F8;   /* section tint: commercial / contact */
  --c-blue-deep: #7FA7C4;   /* accent only, sparing */

  /* Aliases */
  --color-bg:         var(--c-white);
  --color-ink:        var(--c-ink);
  --color-ink-soft:   var(--c-ink-soft);
  --color-ink-mute:   var(--c-ink-mute);
  --color-line:       var(--c-line);
  --color-tint-pink:  var(--c-pink);
  --color-tint-blue:  var(--c-blue);
  --color-tint-white: var(--c-white);

  /* ---- Typography ---- */
  --f-base: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-h1:      clamp(2.5rem, 5vw, 4.5rem);
  --t-h2:      clamp(1.875rem, 3.5vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --t-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.875rem;    /* 14px */
  --t-eyebrow: 0.8125rem;   /* 13px */

  /* ---- Spacing (8pt grid) ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* ---- Layout & UI ---- */
  --container:   1200px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  --radius:      4px;
  --radius-lg:   8px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Chinese typography tokens using Noto Sans SC */
html[lang="zh-CN"],
html[lang^="zh"],
:lang(zh) {
  --f-base: 'Noto Sans SC', 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}