/* ═══════════════════════════════════════════════════════════════════
   mV — Merijn Verhaak Design System · v2 "Liner Notes"
   Calm daylight editorial — paper white, cool grey ground,
   pastel tape accents, square corners, print rules.
   (Variable names kept from v1 so components resolve automatically.)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* ── GROUND & SURFACE (cool daylight) ── */
  --c-void:        #F5F7F9;   /* app background */
  --c-ink:         #FFFFFF;   /* surface / paper */
  --c-panel:       #FFFFFF;   /* elevated card (same paper, hairline border) */
  --c-border:      #DEE3E8;   /* hairline dividers */
  --c-muted:       #9AA3AC;   /* disabled / tertiary text */

  /* ── TEXT HIERARCHY ── */
  --c-smoke:       #1F242A;   /* primary text — near-black ink */
  --c-cream:       #43494F;   /* secondary text */
  --c-whisper:     #6C7681;   /* caption / label */

  /* ── TAPE ACCENTS — pastel chip + readable ink pair ── */
  --p-sage:        #93CE8F;   /* Side A · The Past */
  --p-coral:       #F2876B;   /* Side B · The Present */
  --p-sky:         #7FB5E8;   /* Side C · The Future */
  --p-lilac:       #B9A3E3;   /* Side D · Portfolio */
  --p-butter:      #F2D98A;   /* to-write slots */

  --ink-sage:      #3B7A3E;
  --ink-coral:     #C24E33;
  --ink-sky:       #2F6FAE;
  --ink-lilac:     #6E54A8;
  --ink-butter:    #A37E22;

  /* legacy accent names → remapped to the new pairs */
  --c-orange:      var(--ink-coral);   /* primary accent (text-safe) */
  --c-orange-dim:  #F6CDB9;
  --c-orange-glow: rgba(242,135,107,0.16);

  --c-red:         var(--ink-coral);
  --c-red-dim:     #F6CDB9;
  --c-red-glow:    rgba(242,135,107,0.16);

  --c-blue:        var(--ink-sky);
  --c-blue-dim:    #CFE2F4;
  --c-blue-glow:   rgba(127,181,232,0.16);

  --c-amber:       var(--ink-butter);
  --c-amber-dim:   #F9F0D6;

  --c-slate:       #6C7681;

  /* ── SEMANTIC COLOR TOKENS ── */
  --bg-app:          var(--c-void);
  --bg-surface:      var(--c-ink);
  --bg-elevated:     var(--c-panel);
  --bg-overlay:      rgba(31,36,42,0.45);

  --fg-primary:      var(--c-smoke);
  --fg-secondary:    var(--c-cream);
  --fg-muted:        var(--c-whisper);
  --fg-faint:        var(--c-muted);
  --fg-accent:       var(--ink-coral);

  --border-subtle:   var(--c-border);
  --border-strong:   var(--c-smoke);   /* 2px ink rules, print style */

  /* ══════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════ */

  --font-display:  'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --font-body:     'Hanken Grotesk', ui-sans-serif, sans-serif;
  --font-prose:    'Hanken Grotesk', ui-sans-serif, sans-serif;
  --font-serif:    'Hanken Grotesk', ui-sans-serif, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --ts-2xs:  0.6875rem;  /* 11px */
  --ts-xs:   0.78125rem; /* 12.5px */
  --ts-sm:   0.9375rem;  /* 15px */
  --ts-base: 1.03125rem; /* 16.5px */
  --ts-md:   1.1875rem;  /* 19px */
  --ts-lg:   1.375rem;   /* 22px */
  --ts-xl:   1.75rem;    /* 28px */
  --ts-2xl:  2.25rem;    /* 36px */
  --ts-3xl:  3rem;       /* 48px */
  --ts-4xl:  4rem;       /* 64px */
  --ts-5xl:  5.5rem;     /* 88px */

  /* Line heights */
  --lh-tight:    1.1;
  --lh-normal:   1.5;
  --lh-loose:    1.65;
  --lh-reading:  1.75;

  /* Tracking */
  --tr-tightest: -0.04em;
  --tr-tighter:  -0.035em;
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.06em;
  --tr-wider:    0.12em;
  --tr-widest:   0.18em;

  /* ── SPACING (4px base grid) ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── RADII — square corners, by design ── */
  --r-sm:   0;
  --r-md:   0;
  --r-lg:   0;
  --r-xl:   0;
  --r-cassette: 0;

  /* ── SHADOWS — barely there ── */
  --shadow-sm:     0 1px 2px rgba(31,36,42,0.05);
  --shadow-md:     0 2px 8px rgba(31,36,42,0.07);
  --shadow-lg:     0 16px 48px rgba(31,36,42,0.14);
  --shadow-orange: none;
  --shadow-red:    none;
  --shadow-blue:   none;

  /* ── MOTION ── */
  --ease-snap:    cubic-bezier(0.25, 0, 0, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);

  --dur-fast:     120ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;
  --dur-xslow:    800ms;

  /* ── LAYOUT ── */
  --max-prose:  68ch;
  --max-wide:   1200px;
  --col-gap:    var(--sp-8);
}

/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES
   ═══════════════════════════════════════════════════════════════════ */

.t-display,
h1.display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, var(--ts-5xl));
  font-weight: 700;
  line-height: 0.97;
  letter-spacing: var(--tr-tighter);
  color: var(--fg-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--ts-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--ts-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--ts-xl);
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-tight);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--ts-md);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.t-editorial {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--ts-xl);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--ts-base);
  font-weight: 400;
  line-height: var(--lh-reading);
  color: var(--fg-secondary);
}

.t-ui {
  font-family: var(--font-body);
  font-size: var(--ts-xs);
  font-weight: 500;
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--ts-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--ts-xs);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.t-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--c-void);
  color: var(--ink-coral);
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
}

/* ── Utility ── */
.u-orange { color: var(--ink-coral); }
.u-red    { color: var(--ink-coral); }
.u-blue   { color: var(--ink-sky); }
.u-amber  { color: var(--ink-butter); }
.u-muted  { color: var(--fg-muted); }
.u-faint  { color: var(--fg-faint); }

.u-mono    { font-family: var(--font-mono); }
.u-serif   { font-family: var(--font-body); font-style: italic; }
.u-display { font-family: var(--font-display); }