/* DRE Design System · Typography */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --dre-font-display: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --dre-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --dre-w-light:   300; /* @kind font */
  --dre-w-regular: 400; /* @kind font */
  --dre-w-medium:  500; /* @kind font */
  --dre-w-semi:    600; /* @kind font */
  --dre-w-bold:    700; /* @kind font */
  --dre-w-xbold:   800; /* @kind font */
  --dre-w-black:   900; /* @kind font */

  /* Scale (web px) */
  --dre-fs-hero:    72px;
  --dre-fs-hero-sm: 56px;
  --dre-fs-h1:      48px;
  --dre-fs-h2:      36px;
  --dre-fs-h3:      20px;
  --dre-fs-lead:    18px;
  --dre-fs-body:    16px;
  --dre-fs-small:   14px;
  --dre-fs-mono:    12px;
  --dre-fs-mono-sm: 11px;

  /* Tracking */
  --dre-ls-display:   -0.025em; /* @kind font */
  --dre-ls-tight:     -0.01em;  /* @kind font */
  --dre-ls-mono:       0.15em;  /* @kind font */
  --dre-ls-mono-wide:  0.18em;  /* @kind font */
  --dre-ls-wordmark:   0.12em;  /* @kind font */

  /* Line heights */
  --dre-lh-display: 1.05; /* @kind font */
  --dre-lh-heading: 1.15; /* @kind font */
  --dre-lh-body:    1.60; /* @kind font */
  --dre-lh-mono:    1.40; /* @kind font */
}

html, body {
  background: var(--dre-white);
  color: var(--dre-ink);
  font-family: var(--dre-font-display);
  font-size: var(--dre-fs-body);
  line-height: var(--dre-lh-body);
  font-weight: var(--dre-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {font-family:var(--dre-font-display);font-weight:var(--dre-w-xbold);font-size:clamp(var(--dre-fs-hero-sm),5vw,var(--dre-fs-hero));letter-spacing:var(--dre-ls-display);line-height:var(--dre-lh-display);color:var(--dre-ink);margin:0;text-wrap:balance;}
h2 {font-family:var(--dre-font-display);font-weight:var(--dre-w-xbold);font-size:clamp(28px,3.4vw,var(--dre-fs-h2));letter-spacing:var(--dre-ls-display);line-height:var(--dre-lh-heading);color:var(--dre-ink);margin:0;text-wrap:balance;}
h3 {font-family:var(--dre-font-display);font-weight:var(--dre-w-bold);font-size:var(--dre-fs-h3);line-height:1.3;letter-spacing:var(--dre-ls-tight);color:var(--dre-ink);margin:0;}
h4 {font-family:var(--dre-font-display);font-weight:var(--dre-w-semi);font-size:var(--dre-fs-body);line-height:1.4;color:var(--dre-ink);margin:0;}
p {font-family:var(--dre-font-display);font-size:var(--dre-fs-body);line-height:var(--dre-lh-body);color:var(--dre-ink-soft);margin:0;text-wrap:pretty;}

a {color:var(--dre-ink);text-decoration:none;border-bottom:1px solid var(--dre-line-strong);transition:color 220ms cubic-bezier(.2,.6,.2,1),border-color 220ms cubic-bezier(.2,.6,.2,1);}
a:hover {color:var(--dre-accent);border-bottom-color:var(--dre-accent);}
::selection {background:var(--dre-accent);color:#fff;}

/* Utility classes */
.dre-lead  {font-size:var(--dre-fs-lead);line-height:1.5;color:var(--dre-ink);font-weight:var(--dre-w-regular);}
.dre-small {font-size:var(--dre-fs-small);color:var(--dre-ink-muted);}
.dre-muted {color:var(--dre-ink-muted);}
.dre-marker,.dre-mono {font-family:var(--dre-font-mono);font-weight:var(--dre-w-medium);font-size:var(--dre-fs-mono);text-transform:uppercase;letter-spacing:var(--dre-ls-mono-wide);line-height:var(--dre-lh-mono);color:var(--dre-ink-muted);}
.dre-marker--accent {color:var(--dre-accent);}
.dre-marker--ink    {color:var(--dre-ink);}
.dre-marker--dark   {color:var(--dre-on-dark);}
.dre-on-dark  {background:var(--dre-black);color:var(--dre-on-dark);}
.dre-on-dark h1,.dre-on-dark h2 {text-transform:uppercase;color:var(--dre-on-dark);}