/* vaerk design tokens – web. Kilde: tokens.json */
:root {
  --color-ink: #1A1A1A;
  --color-sand: #F4F3EF;
  --color-white: #FFFFFF;
  --color-orange: #E84A0C;
  --color-orange-light: #FF9A6B;
  --color-orange-tint: #FDEAE0;
  --gray-700: #4A4A46;
  --gray-600: #6B6B66;
  --gray-500: #8C8C86;
  --gray-300: #DDDBD3;
  --gray-200: #EEEDE8;
  --color-success: #0E8C7F;
  --color-success-tint: #E3F4F1;
  --color-warning: #C9A227;
  --color-warning-tint: #FBF3D9;
  --color-error: #C8321A;
  --color-info: #2F5BFF;
  /* Tekst-nuancer til små tekster (WCAG AA 4,5:1) */
  --color-orange-ink: #B83A09;
  --color-success-ink: #0C796E;
  --color-warning-ink: #846A19;

  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tracking-display: -0.06em;
  --tracking-h1: -0.04em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-eyebrow: 0.10em;

  --text-display: 3rem;
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.25rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-20: 80px;

  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --radius-full: 999px;

  --shadow-card: 0 1px 0 rgba(26, 26, 26, 0.06);
  --shadow-modal: 0 8px 24px rgba(26, 26, 26, 0.12);

  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 300ms;

  --layout-max: 1200px;
  --layout-gutter: 24px;
  --layout-margin: 20px;

  /* logo */
  --logo-tracking: -0.07em;
  --logo-overlap: -0.18em;
}

@media (min-width: 1024px) {
  :root {
    --text-display: 5.5rem;
    --text-h1: 3.5rem;
    --text-h2: 2.25rem;
    --text-h3: 1.375rem;
    --text-lead: 1.25rem;
    --layout-margin: 48px;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --layout-margin: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #FFFFFF;
    --color-sand: #141414;
    --color-white: #1F1F1F;
    --color-orange-tint: #3A2419;
    --gray-700: #B9B9B3;
    --gray-600: #9A9A94;
    --gray-500: #7A7A74;
    --gray-300: #3A3A3A;
    --gray-200: #2A2A2A;
    --color-success: #3DD1B8;
    --color-success-tint: #143A34;
    --color-warning: #E8CF7A;
    --color-warning-tint: #3A3218;
    --color-error: #FF6B52;
    --color-info: #8FA8FF;
  }
}

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

/* Wordmark som HTML (brug SVG fra assets/logo/ hvor det er muligt) */
.vaerk-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: var(--logo-tracking);
  line-height: 1;
  color: var(--color-ink);
}
.vaerk-logo .a { color: #E84A0C; }
.vaerk-logo .e { color: #FF9A6B; margin-left: var(--logo-overlap); mix-blend-mode: multiply; }
.vaerk-logo--on-dark .e { mix-blend-mode: normal; opacity: 0.85; }
/* <span class="vaerk-logo">v<span class="a">a</span><span class="e">e</span>rk</span> */