/* =========================================================================
   Andrej Olsen — Design Tokens
   Teal-led, low-chroma, editorial. Light + dark. No gradients.
   ========================================================================= */

/* ---- Typefaces (self-hosted — no third-party requests) ------------------ */
@import url('fonts.css');

:root {
  /* Type families */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-grotesk: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (fluid-ish, fixed here for design frames) */
  --t-display: 64px;
  --t-h1: 44px;
  --t-h2: 30px;
  --t-h3: 21px;
  --t-body: 17px;
  --t-small: 14.5px;
  --t-label: 12px;   /* mono labels, uppercase */

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.62;

  --ls-label: 0.16em;
  --ls-tight: -0.02em;

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

  --maxw: 720px;
  --sidebar-w: 300px;

  --radius: 3px;
  --hair: 1px;

  /* ----- Light theme (default) ----- */
  --bg:        oklch(0.985 0.004 170);  /* warm-cool off white */
  --surface:   oklch(0.965 0.005 175);
  --surface-2: oklch(0.945 0.006 180);
  --ink:       oklch(0.24 0.012 220);   /* deep cool charcoal */
  --ink-2:     oklch(0.44 0.012 215);   /* secondary text */
  --ink-3:     oklch(0.60 0.010 210);   /* muted / captions */
  --line:      oklch(0.90 0.006 200);   /* hairlines */
  --line-2:    oklch(0.84 0.008 200);

  --teal:      oklch(0.52 0.072 195);   /* muted teal accent */
  --teal-deep: oklch(0.42 0.062 198);
  --teal-soft: oklch(0.93 0.022 190);   /* tint surfaces */
  --teal-ghost:oklch(0.96 0.012 190);
}

[data-theme='dark'] {
  --bg:        oklch(0.205 0.012 215);
  --surface:   oklch(0.245 0.013 215);
  --surface-2: oklch(0.285 0.014 213);
  --ink:       oklch(0.93 0.006 185);
  --ink-2:     oklch(0.76 0.008 190);
  --ink-3:     oklch(0.60 0.010 195);
  --line:      oklch(0.32 0.012 210);
  --line-2:    oklch(0.40 0.014 208);

  --teal:      oklch(0.74 0.085 190);
  --teal-deep: oklch(0.82 0.075 188);
  --teal-soft: oklch(0.32 0.030 200);
  --teal-ghost:oklch(0.27 0.020 205);
}

/* ---- Resets / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

.olsen {
  font-family: var(--font-grotesk);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.olsen h1, .olsen h2, .olsen h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--ink);
}

/* mono label */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.serif-italic { font-family: var(--font-serif); font-style: italic; }

a { color: inherit; }