/* @sterk/tokens — shared.css
 *
 * Felles tokens som BÅDE app og CRM kan importere uten brand-smitte:
 *   - Status-farger (suksess/feil/varsel)
 *   - Neutrals (gråtoner)
 *   - Typografi-skala (størrelser, vekter)
 *   - Spacing-skala
 *   - Radius, shadow
 *
 * BRAND-FARGER (--brand-*) ligger IKKE her. Se app.css og crm.css.
 */

:root {
  /* ─── Status-farger ─────────────────────────────────────────── */
  --status-success: #2d8a6e;
  --status-success-bg: #e8f5f0;
  --status-warning: #d4a843;
  --status-warning-bg: #fdf6e3;
  --status-danger: #c0392b;
  --status-danger-bg: #fceae8;
  --status-info: #0384a0;
  --status-info-bg: #e3f2f7;
  --status-neutral: #888888;
  --status-neutral-bg: #f5f5f5;

  /* ─── Neutrals ──────────────────────────────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e8e8e8;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* ─── Typografi-skala (Museo Sans / system fallback) ────────── */
  --font-family-base: 'Museo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  --font-size-xs:  10px;
  --font-size-sm:  12px;
  --font-size-base: 14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;

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

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.7;

  /* ─── Spacing-skala (4-px grid) ─────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Border radius ─────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ─── Shadows ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* ─── Z-index-skala ─────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;

  /* ─── Animation ─────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --easing-base:     cubic-bezier(0.4, 0, 0.2, 1);
}