/**
 * Design Tokens – SkoleABC
 * Skole/tryghed/pædagogisk. Mobile first. CRO-optimeret.
 */
:root {
  /* Brand – SkoleABC grøn + navy */
  --sk-primary: #1e7a4a;
  --sk-primary-hover: #16703f;
  --sk-primary-soft: rgba(30, 122, 74, 0.08);
  --sk-brand-900: #0a1e33;
  --sk-brand-700: #123456;
  --sk-brand-500: #1e4a7a;
  --sk-brand-300: #4a7ba7;

  /* Text */
  --sk-ink: #0a1e33;
  --sk-muted: #546372;
  --sk-muted-light: #7a8a99;

  /* Backgrounds */
  --sk-bg: #f6f8fb;
  --sk-card: #ffffff;
  --sk-card-soft: #f9fbfd;
  --sk-line: rgba(10, 30, 51, 0.1);
  --sk-line-strong: rgba(10, 30, 51, 0.15);

  /* Semantic */
  --sk-ok: #1e7a4a;
  --sk-ok-bg: rgba(30, 122, 74, 0.08);
  --sk-warn: #b35c00;
  --sk-warn-bg: rgba(179, 92, 0, 0.08);

  /* Radius */
  --sk-r-sm: 8px;
  --sk-r-md: 12px;
  --sk-r-lg: 16px;
  --sk-r-xl: 20px;

  /* Shadows */
  --sk-shadow: 0 10px 30px rgba(10, 30, 51, 0.08);
  --sk-shadow-sm: 0 4px 12px rgba(10, 30, 51, 0.06);
  --sk-shadow-card: 0 2px 8px rgba(10, 30, 51, 0.05);
  --sk-shadow-dock: 0 -4px 24px rgba(10, 30, 51, 0.1);

  /* Typography */
  --sk-fs-xs: 12px;
  --sk-fs-0: 14px;
  --sk-fs-1: 16px;
  --sk-fs-2: 18px;
  --sk-fs-3: 22px;
  --sk-fs-4: 26px;
  --sk-fs-5: 30px;
  --sk-lh: 1.5;
  --sk-lh-tight: 1.25;

  /* Spacing – 8/16/24/32px system */
  --sk-s0: 0;
  --sk-s1: 8px;
  --sk-s2: 16px;
  --sk-s3: 24px;
  --sk-s4: 32px;
  --sk-s5: 40px;

  /* Legacy aliases for product.css */
  --brand-900: var(--sk-brand-900);
  --brand-700: var(--sk-brand-700);
  --space-xs: var(--sk-s1);
  --space-sm: var(--sk-s2);
  --space-md: var(--sk-s3);
  --space-lg: var(--sk-s4);
  --space-xl: var(--sk-s5);
  --r-sm: var(--sk-r-sm);
  --r-md: var(--sk-r-md);
  --r-lg: var(--sk-r-lg);
  --shadow: var(--sk-shadow);
  --shadow-sm: var(--sk-shadow-sm);
  --fs-0: var(--sk-fs-0);
  --fs-1: var(--sk-fs-1);
  --fs-2: var(--sk-fs-2);
  --fs-3: var(--sk-fs-3);
  --fs-4: var(--sk-fs-4);
  --ink: var(--sk-ink);
  --muted: var(--sk-muted);
  --muted-light: var(--sk-muted-light);
  --line: var(--sk-line);
  --card: var(--sk-card);
  --card-soft: var(--sk-card-soft);
  --bg: var(--sk-bg);
  --lh: var(--sk-lh);
  --lh-tight: var(--sk-lh-tight);
}