/* ================================================================
   Kippi Design System — tokens
   Hentet fra Claude Design-prosjektet «Kippi Design System»
   (colors.css, typography.css, spacing.css, effects.css).
   Lastes ETTER shared/kippi.css slik at de nye verdiene vinner.
   ================================================================ */

/* ─── Farger ──────────────────────────────────────────────── */
:root {
  /* Navy-fundament (dypest → lysest) */
  --navy-950: #070b16;
  --navy-900: #0a1120;   /* app-bakgrunn */
  --navy-850: #0e1628;
  --navy-800: #131d33;
  --navy-750: #16223b;
  --navy-700: #1b2942;
  --navy-600: #263654;
  --navy-500: #37496b;
  --navy-400: #54678c;
  --navy-300: #7b8cae;

  /* Lilla (merkevare) */
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;

  /* Rosa (sekundær) */
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --magenta-400: #cd7ed7;

  /* Tekst */
  --white: #ffffff;
  --ink-050: #f5f7fc;
  --ink-100: #eef1f8;
  --ink-200: #d7deee;
  --ink-300: #c3cadd;
  --ink-400: #9aa6c4;
  --ink-500: #8b96b3;
  --ink-600: #5f6d8f;

  /* Semantiske statusfarger */
  --success-400: #34d399;
  --success-500: #10b981;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --danger-400: #fb7185;
  --danger-500: #f43f5e;
  --info-400: #38bdf8;
  --info-500: #0ea5e9;

  /* Signaturgradienter */
  --grad-brand: linear-gradient(135deg, #a78bfa 0%, #cd7ed7 50%, #f472b6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(167,139,250,0.18) 0%, rgba(244,114,182,0.18) 100%);
  --grad-purple: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  --grad-surface: linear-gradient(180deg, #131d33 0%, #0e1628 100%);

  /* Semantiske alias — bruk disse i komponenter */
  --bg-app: var(--navy-900);
  --bg-sunken: var(--navy-950);
  --surface-card: var(--navy-800);
  --surface-raised: var(--navy-750);
  --surface-overlay: var(--navy-700);
  --surface-inset: var(--navy-850);

  --text-primary: var(--ink-050);
  --text-body: var(--ink-300);
  --text-muted: var(--ink-500);
  --text-inverse: var(--navy-900);
  --text-on-brand: var(--navy-950);

  --brand: var(--purple-400);
  --brand-strong: var(--purple-500);
  --brand-pink: var(--pink-400);

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-brand: rgba(167, 139, 250, 0.55);

  --focus-ring: rgba(167, 139, 250, 0.55);

  --success: var(--success-400);
  --warning: var(--warning-400);
  --danger: var(--danger-400);
  --info: var(--info-400);
}

/* ─── Typografi ───────────────────────────────────────────── */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-display-2xl: 72px;
  --fs-display-xl: 56px;
  --fs-display-lg: 44px;
  --fs-h1: 34px;
  --fs-h2: 27px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-normal: 0em;
  --ls-wide: 0.04em;
  --ls-caps: 0.12em;
}

/* ─── Rom og layout (4px-grid) ────────────────────────────── */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
}

/* ─── Effekter ────────────────────────────────────────────── */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(3, 6, 15, 0.4);
  --shadow-md: 0 6px 18px rgba(3, 6, 15, 0.45);
  --shadow-lg: 0 18px 40px rgba(3, 6, 15, 0.55);
  --shadow-xl: 0 30px 70px rgba(3, 6, 15, 0.6);

  --glow-purple: 0 8px 28px rgba(139, 92, 246, 0.45);
  --glow-pink: 0 8px 28px rgba(244, 114, 182, 0.40);
  --glow-brand-ring: 0 0 0 1px rgba(167,139,250,0.5), 0 10px 30px rgba(139,92,246,0.4);

  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
  --focus-shadow: 0 0 0 3px var(--focus-ring);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
}