/* HACOTONE — Design tokens
 * White ground, warm-gray neutrals for type, monochrome accent (charcoal/ink
 * instead of a color) per the client's "make it match the reference site,
 * monochrome" decision. The original clay/sage accent values are left as a
 * comment at the bottom if a future iteration wants color back. */

:root {
  /* ---- Base: warm neutrals ---- */
  --paper:        #FFFFFF;
  --paper-warm:   #FAF8F4;
  --paper-sand:   #F3EEE6;

  --ink-900:      #2B2A28;
  --ink-800:      #3C3A37;
  --ink-700:      #555249;
  --ink-600:      #6E6A62;
  --ink-500:      #8A857C;
  --ink-400:      #A8A399;
  --ink-300:      #C9C4BA;
  --ink-200:      #E4DFD6;
  --ink-100:      #F0ECE4;

  /* ---- Accent: monochrome (charcoal/ink) — default per client request ---- */
  --clay-700:     #1C1B19;
  --clay-600:     #1C1B19;
  --clay-500:     #33312E;
  --clay-400:     #BEB9B0;
  --clay-300:     #D7D2C9;
  --clay-100:     #F1EEE9;

  /* ---- Support: muted sage (kept for tag variety, used sparingly) ---- */
  --sage-500:     #7E8A72;
  --sage-100:     #ECEFE6;

  /* ---- Functional ---- */
  --positive:     #5E7D63;
  --negative:     #B25346;
  --focus-ring:   #33312E;

  /* ============ Semantic aliases ============ */
  --bg-base:        var(--paper);
  --bg-subtle:      var(--paper-warm);
  --bg-panel:       var(--paper-sand);
  --bg-inverse:     var(--ink-900);

  --text-strong:    var(--ink-900);
  --text-heading:   var(--ink-800);
  --text-body:      var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-clay:   #FFFFFF;
  --text-on-ink:    #F5F2EC;
  --text-accent:    var(--clay-600);

  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-hairline: var(--ink-100);

  --surface-card:   var(--paper);
  --surface-accent: var(--clay-100);

  /* ---- Type ---- */
  --font-latin:    'Jost', sans-serif;
  --font-jp:       'Zen Kaku Gothic New', sans-serif;
  --font-jp-serif: 'Zen Old Mincho', serif;
  --font-display:  'Jost', 'Zen Kaku Gothic New', sans-serif;
  --font-body:     'Zen Kaku Gothic New', 'Jost', sans-serif;
  --font-serif:    'Zen Old Mincho', serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;
  --text-5xl:   5.5rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.9;

  --ls-tightest: -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.18em;
  --ls-widest:   0.32em;
  --ls-jp:       0.04em;

  /* ---- Spacing (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --border-width: 1px;

  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(43, 42, 40, 0.04);
  --shadow-sm:    0 2px 8px rgba(43, 42, 40, 0.05);
  --shadow-md:    0 8px 28px rgba(43, 42, 40, 0.07);
  --shadow-lg:    0 18px 50px rgba(43, 42, 40, 0.09);

  --container:      1200px;
  --container-text: 720px;
  --gutter:         clamp(1.25rem, 5vw, 4rem);

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
}

/* Original color-accent variants, for reference if color is wanted later:
:root {
  --clay-700: #9A5638; --clay-600: #B26545; --clay-500: #C0764F;
  --clay-400: #D2926F; --clay-300: #E3B89B; --clay-100: #F5E7DC;
  --focus-ring: #C0764F;
} */