/* ================================================================
   MELAGENCE CI — DESIGN TOKENS
   ================================================================ */

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("fonts/NeueHaasDisplayMedium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde";
  src: url("fonts/ITCAvantGardePro-Md.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ── CORE NEUTRALS ─────────────────────────────── */
  --ink:        #0A0A0A;   /* near-black; warmer than pure #000 on paper */
  --ink-soft:   #1F1F1F;
  --graphite:   #585858;   /* body de-emphasis */
  --slate:      #8C8C8C;   /* secondary text, captions */
  --mist:       #C9C9C9;   /* rules, disabled borders */
  --fog:        #E6E1D6;   /* paper-tinted hairlines on cream */
  --bone:       #EEEAE0;   /* subtle paper shade */
  --paper:      #F4EFE6;   /* WARM ACCENT — editorial surface */
  --chalk:      #F7F5F0;   /* lightest paper */
  --snow:       #FFFFFF;

  /* ── SEMANTIC (editorial-tuned, not web-candy) ── */
  --positive:      #2F7D4F;   /* moss green, was #02B95D */
  --positive-tint: #E8EFE8;
  --negative:      #B23A35;   /* terracotta red, was #D74843 */
  --negative-tint: #F3E4E2;
  --caution:       #5B4BA3;   /* muted indigo, was #6941C6 */
  --caution-tint:  #E9E6F1;
  --accent:        #A8395F;   /* oxblood rose, was #D12A75 */
  --accent-tint:   #F3E2EA;

  /* ── TYPOGRAPHY ────────────────────────────────── */
  --font-display: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mark:    "ITC Avant Garde", "Neue Haas Grotesk Display", sans-serif;

  /* Type scale — modular, based on 1.25 ratio but hand-tuned */
  --t-micro:   10px;   /* eyebrow, legal, tags */
  --t-xs:      11px;   /* caption fine */
  --t-sm:      13px;   /* UI, meta, table cells */
  --t-body:    15px;   /* default body */
  --t-md:      18px;   /* lead paragraph */
  --t-lg:      22px;   /* subhead */
  --t-xl:      30px;   /* H2 */
  --t-2xl:     42px;   /* H1 */
  --t-3xl:     64px;   /* display */
  --t-4xl:     104px;  /* hero display */

  /* Line heights */
  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.02em;
  --ls-normal:  -0.01em;
  --ls-base:    0;
  --ls-label:   0.08em;   /* caps labels — widened from 0.06 for clarity */

  /* ── SPACING (4px base) ────────────────────────── */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* ── RADII ─────────────────────────────────────── */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ── BORDERS ───────────────────────────────────── */
  --bw-hair:   0.5px;
  --bw-thin:   1px;
  --bw-med:    1.5px;
  --bw-thick:  2px;

  /* ── MOTION ────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.68, 0.15);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:    120ms;
  --d-base:    200ms;
  --d-slow:    400ms;

  /* ── ELEVATION — extremely restrained ──────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 2px 8px rgba(10,10,10,0.04);
  --shadow-2: 0 2px 4px rgba(10,10,10,0.06), 0 12px 32px rgba(10,10,10,0.08);

  /* ── LAYOUT ────────────────────────────────────── */
  --col-gutter: 24px;
  --col-count:  12;
  --page-max:   1280px;
  --read-max:   640px;   /* comfortable reading column */
}