@font-face {
  font-family: "ES Klarheit Plakat";
  src: url("fonts/ESKlarheitPlakat-Blk-TRIAL.5fa54e77e867.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Skogvis design tokens
   Source of truth extracted from the landing page.
   Import this file before component CSS. Do not invent new values
   when an existing token already covers the need. */

:root {
  /* —— Color · primitives —— */
  --skogvis-paper: #f3ebe0;
  --skogvis-paper-raised: #f7f2eb;
  --skogvis-paper-hint: #fcfaf7;
  --skogvis-mist: #f3f3f1;
  --skogvis-line-soft: #eee8df;
  --skogvis-paper-muted: #e6e0d6;
  --skogvis-paper-well: #d4cec4;

  --skogvis-ink: #1c2418;
  --skogvis-ink-warm: #2c2418;
  --skogvis-ink-deep: #1c1b18;
  --skogvis-ink-black: #121110;

  --skogvis-resin: #d4a24c;
  --skogvis-resin-soft: #d4b07a;
  --skogvis-resin-ink: #8a6424;

  --skogvis-moss: #2a4a42;
  --skogvis-moss-deep: #1e3731;
  --skogvis-pine: #2a3224;
  --skogvis-canopy: #2c3128;
  --skogvis-bark: #3d2a22;
  --skogvis-bark-deep: #2e1f19;

  --skogvis-aurora-green: #17c46a;
  --skogvis-aurora-mint: #6dffc8;
  --skogvis-night: #060910;

  --skogvis-white: #ffffff;
  --skogvis-muted: #5a5348;
  --skogvis-muted-soft: #6a6258;
  --skogvis-disabled: #b7ad9f;
  --skogvis-line: #ddd6cc;
  --skogvis-line-strong: #2c2418;

  --skogvis-white-94: rgba(255, 255, 255, 0.94);
  --skogvis-white-82: rgba(255, 255, 255, 0.82);
  --skogvis-white-72: rgba(255, 255, 255, 0.72);
  --skogvis-white-55: rgba(255, 255, 255, 0.55);
  --skogvis-white-42: rgba(255, 255, 255, 0.42);
  --skogvis-white-18: rgba(255, 255, 255, 0.18);
  --skogvis-white-08: rgba(255, 255, 255, 0.08);

  /* —— Color · semantic —— */
  --color-bg: var(--skogvis-paper);
  --color-bg-raised: var(--skogvis-paper-raised);
  --color-bg-inverse: var(--skogvis-ink-black);
  --color-bg-hero: var(--skogvis-pine);
  --color-bg-night: var(--skogvis-night);
  --color-sidebar: var(--skogvis-canopy);

  --color-text: var(--skogvis-ink-warm);
  --color-text-muted: var(--skogvis-muted);
  --color-text-inverse: var(--skogvis-white);
  --color-text-inverse-muted: var(--skogvis-white-72);

  --color-accent: var(--skogvis-resin);
  --color-accent-text: var(--skogvis-resin-ink);

  --color-border: var(--skogvis-line);
  --color-border-strong: var(--skogvis-line-strong);
  --color-disabled: var(--skogvis-disabled);

  --color-action: var(--skogvis-ink-deep);
  --color-action-on: var(--skogvis-white);

  /* —— Typography —— */
  --font-display: "ES Klarheit Plakat", system-ui, sans-serif;
  --font-ui: Geist, system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --lh-display: 1;
  --lh-tight: 1.05;
  --lh-body: 1.45;
  --lh-body-loose: 1.5;

  --track-display: -0.03em;
  --track-display-tight: -0.035em;
  --track-ui: -0.015em;

  --fs-display-xl: clamp(44px, 4.6vw, 68px);
  --fs-display-lg: clamp(36px, 4.2vw, 54px);
  --fs-display-md: clamp(32px, 3.6vw, 44px);
  --fs-display-sm: clamp(24px, 2vw, 32px);
  --fs-display-xs: 26px;

  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;

  /* —— Space (4px grid) —— */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-88: 88px;
  --space-120: 120px;

  /* —— Layout —— */
  --width-nav: 1600px;
  --width-content: 1180px;
  --width-content-tight: 1020px;
  --width-pricing: 1120px;

  --sidebar-rail: 72px;
  --sidebar-open: 252px;
  --sidebar-inset: 12px;

  --gutter-nav: 56px;
  --gutter-section: 72px;
  --gutter-mobile: 32px;

  --hero-copy-max: 560px;

  /* —— Radius —— */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-pill: 999px;

  /* —— Control sizes —— */
  --control-sm: 38px;
  --control-md: 42px;
  --control-lg: 48px;
  --control-xl: 52px;

  /* —— Motion —— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-med: 650ms;
  --duration-slow: 720ms;

  /* —— Breakpoints (documentation only — use in media queries) ——
     sm: 720px
     md: 800px
     lg: 900px
     xl: 980px
     2xl: 1180px
  */
}