/* Kantega designsystem — CSS custom properties
   Kilde: Grafisk profil manual (UREDD designkontor).
   Tokens markert [utvidelse] finnes ikke i manualen. Se 02-tokens.md. */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* --- Farge: primitiver --- */
  --kantega-color-purple: #27003D;
  --kantega-color-purple-dark: #150023;
  --kantega-color-purple-light: #36015B;
  --kantega-color-red: #EE3A64;
  --kantega-color-red-dark: #D3335E;
  --kantega-color-red-light: #FF507E;
  --kantega-color-blue: #19254F;
  --kantega-color-blue-dark: #111B38;
  --kantega-color-blue-light: #2B4172;
  --kantega-color-teal: #028EA7;
  --kantega-color-teal-dark: #027C92;
  --kantega-color-teal-light: #06B3C6;
  --kantega-color-yellow: #F49727;
  --kantega-color-yellow-dark: #DA7D0B;
  --kantega-color-yellow-light: #F6A94C;
  --kantega-color-white: #FFF8FC;
  --kantega-color-white-dark: #F5E3ED;
  --kantega-color-white-light: #FFFBFD;
  --kantega-color-black: #000000;
  --kantega-color-grey-mid: #4E575B;
  --kantega-color-grey-light: #F2F2F2;

  /* --- Farge: semantisk [utvidelse] --- */
  --kantega-color-surface: var(--kantega-color-white);
  --kantega-color-surface-subtle: var(--kantega-color-white-dark);
  --kantega-color-surface-inverse: var(--kantega-color-purple);
  --kantega-color-surface-inverse-alt: var(--kantega-color-blue);
  --kantega-color-text: var(--kantega-color-purple);
  --kantega-color-text-muted: var(--kantega-color-grey-mid);
  --kantega-color-text-inverse: var(--kantega-color-white);
  --kantega-color-text-accent: var(--kantega-color-red-dark);
  --kantega-color-text-accent-inverse: var(--kantega-color-red-light);
  --kantega-color-action-primary: var(--kantega-color-red-dark);
  --kantega-color-action-primary-hover: var(--kantega-color-red);
  --kantega-color-action-secondary: var(--kantega-color-teal-dark);
  --kantega-color-border: rgba(39, 0, 61, 0.2);
  --kantega-color-border-strong: var(--kantega-color-purple);
  --kantega-color-focus: var(--kantega-color-teal-light);
  --kantega-color-focus-inverse: var(--kantega-color-teal-dark);
  --kantega-color-watermark: rgba(0, 0, 0, 0.1);

  /* --- Gradienter --- */
  --kantega-gradient-warm-red-yellow: linear-gradient(135deg, #EE3A64 0%, #F49727 100%);
  --kantega-gradient-warm-red-teal: linear-gradient(135deg, #EE3A64 0%, #028EA7 100%);
  --kantega-gradient-warm-red-purple: linear-gradient(135deg, #EE3A64 0%, #150023 100%);
  --kantega-gradient-cool-purple-teal: linear-gradient(135deg, #27003D 0%, #028EA7 100%);
  --kantega-gradient-photo-scrim: linear-gradient(180deg, rgba(39,0,61,0.9) 0%, rgba(39,0,61,0) 100%);

  /* --- Typografi --- */
  --kantega-font-family-base: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --kantega-font-family-mono: "Source Code Pro", ui-monospace, monospace;
  --kantega-font-family-fallback: Arial, sans-serif;
  --kantega-font-weight-regular: 400;
  --kantega-font-weight-semibold: 600;
  --kantega-font-weight-bold: 700;

  --kantega-font-size-xs: 0.75rem;
  --kantega-font-size-sm: 0.875rem;
  --kantega-font-size-md: 1rem;
  --kantega-font-size-lg: 1.125rem;
  --kantega-font-size-xl: 1.25rem;
  --kantega-font-size-2xl: 1.5rem;
  --kantega-font-size-3xl: 1.875rem;
  --kantega-font-size-4xl: 2.25rem;
  --kantega-font-size-5xl: 3rem;
  --kantega-font-size-6xl: 3.75rem;

  --kantega-line-height-tight: 1.15;
  --kantega-line-height-snug: 1.3;
  --kantega-line-height-normal: 1.6;
  --kantega-line-height-relaxed: 1.75;
  --kantega-letter-spacing-tight: -0.01em;
  --kantega-letter-spacing-normal: 0;
  --kantega-letter-spacing-wide: 0.08em;
  --kantega-measure: 68ch;

  /* --- Spacing [utvidelse] --- */
  --kantega-space-0: 0;
  --kantega-space-1: 4px;
  --kantega-space-2: 8px;
  --kantega-space-3: 12px;
  --kantega-space-4: 16px;
  --kantega-space-5: 24px;
  --kantega-space-6: 32px;
  --kantega-space-7: 48px;
  --kantega-space-8: 64px;
  --kantega-space-9: 96px;
  --kantega-space-10: 128px;

  /* --- Form [utvidelse] --- */
  --kantega-radius-none: 0;
  --kantega-radius-sm: 2px;
  --kantega-radius-md: 4px;
  --kantega-radius-pill: 999px;
  --kantega-border-width-thin: 1px;
  --kantega-border-width-medium: 2px;
  --kantega-border-width-thick: 4px;
  --kantega-shadow-sm: 0 1px 2px rgba(39, 0, 61, 0.08);
  --kantega-shadow-md: 0 4px 12px rgba(39, 0, 61, 0.12);
  --kantega-shadow-lg: 0 12px 32px rgba(39, 0, 61, 0.16);

  /* --- Ikoner [utvidelse] · Font Awesome 6 Free --- */
  --kantega-icon-size-sm: 16px;
  --kantega-icon-size-md: 20px;
  --kantega-icon-size-lg: 24px;
  --kantega-icon-size-xl: 32px;

  /* --- Motion [utvidelse] --- */
  --kantega-duration-fast: 120ms;
  --kantega-duration-base: 200ms;
  --kantega-duration-slow: 320ms;
  --kantega-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --kantega-easing-enter: cubic-bezier(0, 0, 0, 1);
  --kantega-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* --- Layout [utvidelse] --- */
  --kantega-container-max: 1200px;
  --kantega-container-wide: 1440px;
  --kantega-grid-columns: 12;
  --kantega-grid-gutter: 24px;

  /* --- Merkevare --- */
  --kantega-logo-min-width-screen: 80px;
  --kantega-logo-clearspace-ratio: 0.3;
  --kantega-watermark-opacity: 0.1;
}

/* Breakpoints kan ikke være CSS-variabler i media queries.
   Verdier: sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1536px */

body {
  background: var(--kantega-color-surface);
  color: var(--kantega-color-text);
  font-family: var(--kantega-font-family-base);
  font-size: var(--kantega-font-size-md);
  line-height: var(--kantega-line-height-normal);
}

a { color: var(--kantega-color-text-accent); }
a:hover { color: var(--kantega-color-red); }

:focus-visible {
  outline: var(--kantega-border-width-medium) solid var(--kantega-color-focus-inverse);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}