/* =========================================================================
   Design tokens — colors_and_type.css
   ========================================================================= */

/* ---------- Font faces ----------
   Pruned to only the 7 weights/styles the site actually consumes. The full
   Helvetica Now MT package (Display + Text + Micro across hundreds of
   weight × style × W01/W02/W04/W05 combinations) lives in _archive/fonts/
   if anything else needs to be brought back later.
   All faces are WOFF2 — Brotli-compressed, ~50% smaller than the OTF
   originals, native web format with ~96% browser support. */

/* Helvetica Now Display — headlines 14pt+ */
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-LtIt.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Rg.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Md.woff2')   format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowMTDispW05-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Helvetica Now Text — default body text 7–14pt */
@font-face { font-family: 'Helvetica Now Text'; src: url('./fonts/HelveticaNowMTTextW01-Rg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Now Text'; src: url('./fonts/HelveticaNowMTTextW01-Md.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* Helvetica Now Micro — captions, legal, labels 4–7pt */
@font-face { font-family: 'Helvetica Now Micro'; src: url('./fonts/HelveticaNowMTMicroW05-Md.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---------- Font families ---------- */
  --font-display: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-micro:   'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Core palette ---------- */
  /* Foundations */
  --london-black:    #000000;      /* London Black — primary ink */
  --london-grey:     #E6E6E6;      /* London Grey — dividers, surfaces */
  --shanghai-white:  #FFFFFF;      /* Shanghai White — paper */

  /* Convenience aliases */
  --ink:   var(--london-black);
  --paper: var(--shanghai-white);

  /* City accent palette — full, light, extra-light */
  --woburn-indigo:        #388FF7;
  --woburn-indigo-light:  #9CC7FA;
  --woburn-indigo-xlight: #CDE3FD;

  --noida-pink:        #E83B94;
  --noida-pink-light:  #F59CC9;
  --noida-pink-xlight: #F9CEE4;

  --saopaulo-green:        #00AD0A;
  --saopaulo-green-light:  #80D685;
  --saopaulo-green-xlight: #BFEBC2;

  --berlin-yellow:        #FF9900;
  --berlin-yellow-light:  #FFCC80;
  --berlin-yellow-xlight: #FFE6BF;

  --tokyo-red:        #FF1C5E;
  --tokyo-red-light:  #FF8FAD;
  --tokyo-red-xlight: #FFC6D7;

  --paris-blue:        #0038FF;
  --paris-blue-light:  #809CFF;
  --paris-blue-xlight: #BFCDFF;

  /* Neutral ramp — for UI chrome, secondary copy, surfaces */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F2;
  --neutral-200: #E8E7E3;
  --neutral-300: #D4D3CE;
  --neutral-400: #A9A7A0;
  --neutral-500: #7D7B75;
  --neutral-600: #575651;
  --neutral-700: #3A3935;
  --neutral-800: #1F1E1C;
  --neutral-900: #0A0A09;

  /* Semantic color tokens */
  --fg-1:            var(--ink);            /* primary text */
  --fg-2:            var(--neutral-600);    /* secondary text */
  --fg-3:            var(--neutral-500);    /* tertiary / metadata */
  --fg-inverse:      var(--paper);
  --fg-link:         var(--ink);
  --fg-link-hover:   var(--tokyo-red);

  --bg-1:            var(--paper);          /* primary surface */
  --bg-2:            var(--neutral-100);    /* alt section */
  --bg-3:            var(--neutral-200);
  --bg-inverse:      var(--ink);

  --border-1:        var(--neutral-200);    /* default hairline */
  --border-2:        var(--neutral-300);
  --border-strong:   var(--ink);

  --state-hover:     rgba(0,0,0,0.04);
  --state-press:     rgba(0,0,0,0.08);
  --focus-ring:      var(--tokyo-red);

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

  /* ---------- Radii — keep corners nearly square. ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;        /* reserved for photographic cards */
  --radius-pill: 999px;      /* buttons, tags */

  /* ---------- Shadows — used sparingly ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.10);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-xslow: 800ms;

  /* ---------- Type scale — display-forward, tight leading ---------- */
  /* Display / headline scale uses Helvetica Now Display with tight tracking */
  --fs-display-xl: clamp(64px, 9vw, 160px);   /* hero */
  --fs-display-l:  clamp(48px, 6vw, 96px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-display-s:  clamp(28px, 3.2vw, 40px);

  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-h6: 16px;

  --fs-body-l: 20px;
  --fs-body:   16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight:   1.02;     /* display */
  --lh-snug:    1.12;     /* headlines */
  --lh-normal:  1.35;
  --lh-relaxed: 1.5;

  /* Tight negative tracking — display hallmark. */
  --tr-display: -0.025em;
  --tr-headline: -0.015em;
  --tr-body: -0.005em;
  --tr-micro: 0.01em;
  --tr-eyebrow: 0.08em;   /* uppercase tags */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --grid-gutter: 24px;
  --page-padding-x: clamp(16px, 4vw, 64px);
}

/* ========================= Semantic type primitives ========================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-text);
  font-size:   var(--fs-body);
  line-height: var(--lh-relaxed);
  color:       var(--fg-1);
  background:  var(--bg-1);
  letter-spacing: var(--tr-body);
}

.mt-display-xl, .mt-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.mt-display-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.mt-display-m {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
}

h1, .mt-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-headline); margin: 0; }
h2, .mt-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-headline); margin: 0; }
h3, .mt-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-headline); margin: 0; }
h4, .mt-h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-normal); letter-spacing: var(--tr-headline); margin: 0; }
h5, .mt-h5 { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h5); line-height: var(--lh-normal); margin: 0; }
h6, .mt-h6 { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h6); line-height: var(--lh-normal); margin: 0; }

p, .mt-body { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); margin: 0 0 var(--sp-4); }
.mt-body-l   { font-size: var(--fs-body-l); line-height: 1.45; }
.mt-body-s   { font-size: var(--fs-body-s); line-height: 1.55; }
.mt-caption  { font-family: var(--font-micro); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-2); letter-spacing: var(--tr-micro); }
.mt-micro    { font-family: var(--font-micro); font-size: var(--fs-micro); line-height: 1.3; }

.mt-eyebrow {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-2);
}

code, pre, .mt-code { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--sp-6) 0; }

::selection { background: var(--ink); color: var(--paper); }