/* TRINES KLINIK — design tokens
   Direction: muted, elegant, calm. 180° opposite of Godballe Byg's
   warm-clay-editorial-bold. Cool-warm balance: sand + sage. */

:root {
  /* ---------- Palette ---------- */
  /* Paper neutrals — warm sand, slightly cooler than Godballe */
  --paper:        #F5F1E8;   /* primary background — warm beige paper */
  --paper-2:      #EDE6D6;   /* cards, second-level — warm sand */
  --paper-3:      #E3DAC5;   /* deeper sand for emphasis blocks */

  /* Ink — deep warm brown-grey, NEVER pure black */
  --ink:          #2E2A23;   /* primary text */
  --ink-2:        #5A5249;   /* secondary text */
  --ink-3:        #948A7D;   /* muted text, labels */

  /* Brand accent — dusty sage-blue (the "clay" equivalent for this site) */
  --sage:         #8AA4B0;   /* primary brand accent — calm, clinical-but-warm */
  --sage-deep:   #6D8A98;   /* hover state, deeper sage */
  --sage-soft:    rgba(138, 164, 176, 0.08);  /* surface tint */

  /* Secondary accent — warm taupe-brown for variety */
  --taupe:        #A0907B;   /* warm brown-beige */
  --taupe-deep:   #80715E;

  /* Hairlines */
  --hairline:     rgba(46, 42, 35, 0.10);
  --hairline-2:   rgba(46, 42, 35, 0.06);

  /* Scrim */
  --scrim:        rgba(46, 42, 35, 0.55);

  /* ---------- Typography ---------- */
  /* Display: Cormorant Garamond — elegant serif with high contrast. */
  --f-display:    "Cormorant Garamond", "Cormorant", Georgia, serif;
  /* Body: Plus Jakarta Sans — soft humanist sans, warm + friendly + very readable (v=49) */
  --f-body:       "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  /* Mono: small labels */
  --f-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (v=49: bumped for better 14"-screen readability) */
  --t-mono:       12.5px;
  --t-mono-l:     14.5px;
  --t-body:       17px;
  --t-lead:       clamp(18px, 1.45vw, 21px);
  --t-display-s:  clamp(30px, 3.6vw, 46px);
  --t-display-m:  clamp(42px, 5.4vw, 74px);
  --t-display-l:  clamp(58px, 8.2vw, 116px);

  /* ---------- Spacing ---------- */
  --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;

  /* Layout */
  --max:    1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --rhythm: clamp(96px, 12vw, 160px);

  /* ---------- Noise texture (same SVG as Godballe — neutral) ---------- */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.17  0 0 0 0 0.14  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 500; /* v=49: bumped from 400 for chunkier, friendlier feel */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Display heading base */
.h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.h1 { font-size: var(--t-display-l); }
.h2 { font-size: var(--t-display-m); }
.h3 { font-size: var(--t-display-s); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}