/* ============================================================================
   Wilhelmsson Labs. Design Tokens v1.1 (kopia för /nuvab/)
   ============================================================================
   Källa: https://wilhelmssonlabs.se/assets/tokens.css, hämtad 6 oktober 2026.
   Ändrat i kopian, inget annat:
     1. @import av fonts.css är ersatt av @font-face nedan (samma typsnitt,
        latin-delmängd, variabla woff2, självhostade under /nuvab/assets/fonts/).
        En import mindre betyder en seriell förfrågan mindre på svag 4G.
     2. Komponentlagret i originalet (reset, .btn, .card, .tag, .bg-glow,
        .site-footer, global :focus-visible) är inte med. NUVAB-ytorna har egna
        komponenter i nuvab.css som bygger på samma tokens, och .bg-glow är
        dekoration som varumärkesboken inte behöver.
   :root, utskriftsläget och prefers-reduced-motion är oförändrade.
   ============================================================================ */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* COLOR : Brand */
  --wl-color-crimson:        #dc2626;
  --wl-color-crimson-soft:   #ef4444;
  --wl-color-crimson-deep:   #b91c1c;
  --wl-color-crimson-glow:   rgba(220, 38, 38, 0.32);
  --wl-color-crimson-tint:   rgba(220, 38, 38, 0.08);

  /* COLOR : Foundation */
  --wl-color-bg:             #050508;
  --wl-color-bg-elevated:    #0c0c10;
  --wl-color-bg-raised:      #14141a;
  --wl-color-text:           #fafafa;
  --wl-color-text-muted:     #a1a1aa;
  --wl-color-text-dim:       #868692;

  /* COLOR : Inverted (light surfaces: print, PDF, signature) */
  --wl-color-bg-light:       #fafafa;
  --wl-color-text-on-light:  #18181b;
  --wl-color-text-muted-on-light: #52525b;

  /* COLOR : Neutrals (10 step scale, slate) */
  --wl-neutral-50:           #fafafa;
  --wl-neutral-100:          #f4f4f5;
  --wl-neutral-200:          #e4e4e7;
  --wl-neutral-300:          #d4d4d8;
  --wl-neutral-400:          #a1a1aa;
  --wl-neutral-500:          #71717a;
  --wl-neutral-600:          #52525b;
  --wl-neutral-700:          #3f3f46;
  --wl-neutral-800:          #27272a;
  --wl-neutral-900:          #18181b;
  --wl-neutral-950:          #09090b;

  /* COLOR : Functional */
  --wl-color-success:        #22c55e;
  --wl-color-danger:         #ef4444;
  --wl-color-warning:        #f59e0b;
  --wl-color-info:           #3b82f6;

  /* COLOR : Borders */
  --wl-border-subtle:        rgba(255, 255, 255, 0.06);
  --wl-border-default:       rgba(255, 255, 255, 0.10);
  --wl-border-strong:        rgba(255, 255, 255, 0.16);
  --wl-border-on-light:      rgba(0, 0, 0, 0.08);

  /* TYPOGRAPHY */
  --wl-font-display:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --wl-font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --wl-font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --wl-text-xs:    0.75rem;
  --wl-text-sm:    0.875rem;
  --wl-text-base:  1rem;
  --wl-text-lg:    1.125rem;
  --wl-text-xl:    1.25rem;
  --wl-text-2xl:   1.5rem;
  --wl-text-3xl:   1.875rem;
  --wl-text-4xl:   2.25rem;
  --wl-text-5xl:   3rem;
  --wl-text-6xl:   3.75rem;
  --wl-text-7xl:   4.5rem;
  --wl-text-8xl:   6rem;
  --wl-text-9xl:   8rem;
  --wl-text-display: clamp(3rem, 8vw, 6rem);

  --wl-leading-none:     1;
  --wl-leading-tight:    1.05;
  --wl-leading-snug:     1.2;
  --wl-leading-normal:   1.4;
  --wl-leading-relaxed:  1.6;
  --wl-leading-loose:    1.8;

  --wl-tracking-tightest: -0.05em;
  --wl-tracking-tighter:  -0.04em;
  --wl-tracking-tight:    -0.02em;
  --wl-tracking-snug:     -0.01em;
  --wl-tracking-normal:   0;
  --wl-tracking-wide:     0.05em;
  --wl-tracking-wider:    0.08em;
  --wl-tracking-widest:   0.12em;

  --wl-weight-light:     300;
  --wl-weight-regular:   400;
  --wl-weight-medium:    500;
  --wl-weight-semibold:  600;
  --wl-weight-bold:      700;

  /* SPACING (8pt grid) */
  --wl-space-0:    0;
  --wl-space-1:    4px;
  --wl-space-2:    8px;
  --wl-space-3:    12px;
  --wl-space-4:    16px;
  --wl-space-5:    20px;
  --wl-space-6:    24px;
  --wl-space-8:    32px;
  --wl-space-10:   40px;
  --wl-space-12:   48px;
  --wl-space-16:   64px;
  --wl-space-20:   80px;
  --wl-space-24:   96px;
  --wl-space-32:   128px;
  --wl-space-40:   160px;
  --wl-space-48:   192px;
  --wl-space-56:   224px;
  --wl-space-64:   256px;

  /* RADIUS */
  --wl-radius-none:  0;
  --wl-radius-xs:    4px;
  --wl-radius-sm:    8px;
  --wl-radius-md:    12px;
  --wl-radius-lg:    16px;
  --wl-radius-xl:    24px;
  --wl-radius-2xl:   32px;
  --wl-radius-pill:  9999px;
  --wl-radius-full:  9999px;

  /* SHADOW (3 layer stack) */
  --wl-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.18);
  --wl-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
  --wl-shadow-md:  0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.10);
  --wl-shadow-lg:  0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 16px rgba(0, 0, 0, 0.18), 0 24px 48px rgba(0, 0, 0, 0.16);
  --wl-shadow-xl:  0 2px 4px rgba(0, 0, 0, 0.24), 0 16px 32px rgba(0, 0, 0, 0.20), 0 48px 96px rgba(0, 0, 0, 0.18);
  --wl-shadow-light-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
  --wl-shadow-light-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.06);
  --wl-shadow-glow:     0 0 32px rgba(220, 38, 38, 0.28);
  --wl-shadow-glow-lg:  0 0 64px rgba(220, 38, 38, 0.20), 0 0 24px rgba(220, 38, 38, 0.32);

  /* MOTION */
  --wl-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --wl-ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --wl-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --wl-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --wl-ease-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
  --wl-duration-instant:  80ms;
  --wl-duration-fast:     150ms;
  --wl-duration-base:     200ms;
  --wl-duration-slow:     300ms;
  --wl-duration-slower:   500ms;
  --wl-duration-hero:     800ms;
  --wl-duration-epic:     1200ms;

  /* Z-INDEX */
  --wl-z-below:    -1;
  --wl-z-base:     0;
  --wl-z-raised:   10;
  --wl-z-dropdown: 100;
  --wl-z-sticky:   200;
  --wl-z-overlay:  300;
  --wl-z-modal:    400;
  --wl-z-toast:    500;
  --wl-z-tooltip:  600;
  --wl-z-max:      9999;

  /* LAYOUT */
  --wl-container-sm:   640px;
  --wl-container-md:   768px;
  --wl-container-lg:   1024px;
  --wl-container-xl:   1280px;
  --wl-container-2xl:  1440px;
  --wl-container-prose: 65ch;

  /* LEGACY ALIASES (used by services/, audit/, priser/, cookie-banner.css) */
  --bg-dark:         #050508;
  --bg-card:         #0c0c10;
  --bg-elevated:     #14141a;
  --bg-pre-footer:   #08080c;
  --crimson:         #dc2626;
  --crimson-light:   #ef4444;
  --crimson-text:    #ef4444;
  --crimson-dim:     rgba(220, 38, 38, 0.12);
  --crimson-border:  rgba(220, 38, 38, 0.32);
  --accent-orange:   #f97316;
  --accent-orange-dim: rgba(249, 115, 22, 0.12);
  --accent-1:        #6366f1;
  --text-white:      #ededf0;
  --text-light:      #cbd5e1;
  --text-gray:       #94a3b8;
  --text-dim:       #7b8898;
  --success:         #10b981;
  --success-dim:     rgba(16, 185, 129, 0.12);
  --warning:         #f59e0b;
  --danger:          #ef4444;
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.1);
  --border-strong:   rgba(255, 255, 255, 0.18);
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;
  --text-display: clamp(2.5rem, 6vw, 4.5rem);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 100px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms; --d-base: 200ms; --d-slow: 400ms;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow-crimson: 0 0 32px rgba(220, 38, 38, 0.28);
}

/* PRINT override */
@media print {
  :root {
    --wl-color-bg:             #ffffff;
    --wl-color-bg-elevated:    #ffffff;
    --wl-color-bg-raised:      #f9f9f7;
    --wl-color-text:           #18181b;
    --wl-color-text-muted:     #52525b;
    --wl-color-text-dim:       #71717a;
    --wl-border-subtle:        rgba(0, 0, 0, 0.06);
    --wl-border-default:       rgba(0, 0, 0, 0.10);
    --wl-border-strong:        rgba(0, 0, 0, 0.16);
    --wl-shadow-md:            var(--wl-shadow-light-md);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wl-duration-instant:  1ms;
    --wl-duration-fast:     1ms;
    --wl-duration-base:     1ms;
    --wl-duration-slow:     1ms;
    --wl-duration-slower:   1ms;
    --wl-duration-hero:     1ms;
    --wl-duration-epic:     1ms;
  }
}