/**
 * Superkeys design tokens — Sprint 1 (Fase 8 av UI/UX-spec)
 *
 * Tillegg til eksisterende :root i style.css (accent / ink / border / shadows / platforms).
 * Kun nye token-tiers her: spacing, typografi, semantic-colors.
 *
 * Cascader globalt — kan brukes overalt. Migrering av hardkodede verdier i
 * butikk.css / produktside.css / wc-pages.css gjøres i Sprint 2+ (gradvis).
 */

:root {
  /* ── Spacing — 4/8 px-rytme (UI/UX-spec §8.3) ──────────────────────── */
  --sk-space-1: 4px;
  --sk-space-2: 8px;
  --sk-space-3: 12px;
  --sk-space-4: 16px;
  --sk-space-5: 24px;
  --sk-space-6: 32px;
  --sk-space-7: 48px;
  --sk-space-8: 64px;
  --sk-space-9: 96px;

  /* ── Typografi-tiers (UI/UX-spec §8.1) ─────────────────────────────── */
  /* Body min 16 px desktop+mobil, line-height ≥1.5 for prosa. */
  --sk-fs-h1: clamp(32px, 4.5vw, 48px);
  --sk-fs-h2: clamp(24px, 3vw, 32px);
  --sk-fs-h3: clamp(18px, 2vw, 22px);
  --sk-fs-body: 16px;
  --sk-fs-small: 14px;
  --sk-fs-micro: 12px;

  --sk-lh-heading: 1.2;
  --sk-lh-body: 1.5;
  --sk-lh-tight: 1.3;

  --sk-measure-prose: 70ch; /* maks linjebredde for løpende tekst */

  /* ── Semantic colors (UI/UX-spec §8.2) ─────────────────────────────── */
  /* Eksisterende --accent er primary. Vipps har egen token. */
  --sk-color-success: #2E7D5B;
  --sk-color-success-l: #E6F4EC;
  --sk-color-danger:  #B53E3E;
  --sk-color-danger-l: #FBE9E9;
  --sk-color-warning: #C78A1A;
  --sk-color-warning-l: #FBF1DE;
  --sk-color-info:    #2563AC;
  --sk-color-info-l:  #E6EFFA;

  /* ── Fokus-ring-tokens (definert her for konsistens, brukt i Fase 9) ─ */
  --sk-focus-ring-width: 2px;
  --sk-focus-ring-offset: 2px;
  --sk-focus-ring-color: var(--accent, #0D7C6E);
}

/* ── UI/UX Sprint 4B §7.2: eliminer 300ms tap-delay på mobil ─────────
   Globalt på interaktive elementer. Side-effect: dobbel-tap-zoom på
   disse elementene deaktiveres (ønsket for knapper/lenker). */
button,
a,
summary,
label,
input[type="submit"],
input[type="button"],
[role="button"] {
  touch-action: manipulation;
}

