/* ============================================================
   nician portfolio — tokens
   cyberdecks in a redwood forest
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-vf.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-vf-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-vf.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-vf-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-vf.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — forest base + one bioluminescent + amber telemetry */
  --bg-deep:    #0b1410;
  --bg-panel:   #13201a;
  --bg-panel-2: #182a23;
  --bark:       #2a221b;
  --moss:       #3a5a40;
  --moss-dim:   #28402d;
  --lichen:     #b6c9b1;
  --lichen-dim: #8aa68a;
  --biolum:     #7fffd4;
  --biolum-soft:#5fe0b8;
  --amber:      #f5b14b;
  --amber-dim:  #a87a31;
  --paper:      #e9e3d3;
  --ink:        #14110d;
  --rust:       #c46a4a;

  /* type stacks */
  --ff-display: 'Fraunces', 'Iowan Old Style', 'Palatino', 'Georgia', serif;
  --ff-body:    'Source Serif 4', 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --ff-mono:    'JetBrains Mono', 'JetBrainsMono Nerd Font', 'Berkeley Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  /* scale (modular, slightly tight on body for that dotfile density) */
  --fs-hud:     11px;
  --fs-mono:    13px;
  --fs-body:    17px;
  --fs-h3:      22px;
  --fs-h2:      32px;
  --fs-h1:      clamp(48px, 9vw, 132px);
  --fs-display: clamp(64px, 14vw, 220px);

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-body:    1.55;

  --tracking-mono: 0.08em;
  --tracking-display: -0.015em;

  /* geometry */
  --gutter:     clamp(20px, 4vw, 56px);
  --rule:       1px solid var(--moss-dim);
  --rule-dim:   1px solid color-mix(in oklab, var(--moss-dim) 50%, transparent);
  --bevel: polygon(
    12px 0, 100% 0,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    0 100%, 0 12px
  );

  /* glow */
  --glow-biolum: 0 0 6px var(--biolum), 0 0 14px color-mix(in oklab, var(--biolum) 40%, transparent);
  --glow-amber:  0 0 4px color-mix(in oklab, var(--amber) 60%, transparent);

  /* motion */
  --t-fast: 140ms cubic-bezier(.2,.7,.2,1);
  --t-med:  260ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 600ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med:  0ms;
    --t-slow: 0ms;
  }
}