/* WebbPlattformen — tokens.css (riktning B, Svensk redaktionell). Genererad ur designsystemets tokens.json 2026-10-25. Prefix --wp- för att inte krocka med snippetens --ink/--blue. */

:root, [data-theme="light"] {
  --wp-surface: #f4f4f1;
  --wp-surface-raised: #ffffff;
  --wp-surface-tint: #efebe2;
  --wp-surface-ink: #0f1b2d;
  --wp-line: #0f1b2d;
  --wp-line-soft: #e6e5e0;
  --wp-line-strong: #5b6474;
  --wp-ink: #0f1b2d;
  --wp-ink-muted: #5b6474;
  --wp-ink-on-dark: #ffffff;
  --wp-ink-on-dark-muted: #b9c3d6;
  --wp-blue: #1e4fd8;
  --wp-blue-deep: #163fb0;
  --wp-blue-soft: #e8eefb;
  --wp-on-blue: #ffffff;
  --wp-yellow: #ffd23f;
  --wp-yellow-soft: #fff8d9;
  --wp-on-yellow: #0f1b2d;
  --wp-success: #1e7a4c;
  --wp-success-soft: #e3f3ea;
  --wp-warning: #9a5b00;
  --wp-warning-soft: #fdf0d5;
  --wp-danger: #7a271e;
  --wp-danger-soft: #fdf3f2;
  --wp-focus: #1e4fd8;
  --wp-shadow-card: none;
  --wp-shadow-pop: 0 24px 56px -20px rgba(15, 27, 45, 0.28);
}

[data-theme="dark"] {
  --wp-surface: #0f1b2d;
  --wp-surface-raised: #17253a;
  --wp-surface-tint: #1d2c42;
  --wp-surface-ink: #070e18;
  --wp-line: #eef2f7;
  --wp-line-soft: #2a3a52;
  --wp-line-strong: #8a97a8;
  --wp-ink: #eef2f7;
  --wp-ink-muted: #a9b4c4;
  --wp-ink-on-dark: #ffffff;
  --wp-ink-on-dark-muted: #b9c3d6;
  --wp-blue: #7ea0ff;
  --wp-blue-deep: #a9c0ff;
  --wp-blue-soft: #1a2a4d;
  --wp-on-blue: #0f1b2d;
  --wp-yellow: #ffd23f;
  --wp-yellow-soft: #4a3d0a;
  --wp-on-yellow: #0f1b2d;
  --wp-success: #5ed39a;
  --wp-success-soft: #0f3a26;
  --wp-warning: #f5b84a;
  --wp-warning-soft: #4a2f00;
  --wp-danger: #f1a39a;
  --wp-danger-soft: #4a1512;
  --wp-focus: #7ea0ff;
  --wp-shadow-card: none;
  --wp-shadow-pop: 0 24px 56px -20px rgba(0, 0, 0, 0.8);
}

:root {
  --wp-space-1: 4px;
  --wp-space-2: 8px;
  --wp-space-3: 12px;
  --wp-space-4: 16px;
  --wp-space-6: 24px;
  --wp-space-8: 32px;
  --wp-space-12: 48px;
  --wp-space-16: 64px;
  --wp-space-24: 96px;
  --wp-measure: 68ch;
  --wp-container: 1380px;
  --wp-radius-sm: 4px;
  --wp-radius-md: 10px;
  --wp-radius-lg: 16px;
  --wp-radius-xl: 24px;
  --wp-radius-pill: 999px;
  --wp-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --wp-font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wp-t-display-xl { font-family: var(--wp-font-display); font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 0.98; font-weight: 400; letter-spacing: -0.015em; }
.wp-t-display-lg { font-family: var(--wp-font-display); font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.02; font-weight: 400; letter-spacing: -0.012em; }
.wp-t-heading-lg { font-family: var(--wp-font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.01em; }
.wp-t-heading-md { font-family: var(--wp-font-display); font-size: 28px; line-height: 1.12; font-weight: 400; }
.wp-t-heading-sm { font-family: var(--wp-font-display); font-size: 22px; line-height: 1.2; font-weight: 400; }
.wp-t-price { font-family: var(--wp-font-display); font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; }
.wp-t-caption-serif { font-family: var(--wp-font-display); font-size: 17px; line-height: 1.3; font-weight: 400; font-style: italic; color: var(--wp-ink-muted); }
.wp-t-lead { font-family: var(--wp-font-sans); font-size: 20px; line-height: 1.5; font-weight: 400; }
.wp-t-body { font-family: var(--wp-font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.wp-t-body-sm { font-family: var(--wp-font-sans); font-size: 15px; line-height: 1.55; font-weight: 400; }
.wp-t-label { font-family: var(--wp-font-sans); font-size: 16px; line-height: 1; font-weight: 500; }
.wp-t-nav { font-family: var(--wp-font-sans); font-size: 15px; line-height: 1.3; font-weight: 500; }
.wp-t-eyebrow { font-family: var(--wp-font-sans); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-ink-muted); }
.wp-t-caption { font-family: var(--wp-font-sans); font-size: 14px; line-height: 1.4; font-weight: 400; }
.wp-t-code { font-family: var(--wp-font-mono); font-size: 14px; line-height: 1.6; font-weight: 400; }