/* =========================================================
   KICKSTART BEDRIFT — Design Tokens
   Colors + Type, mapped from Kickstart_farger_2026 and the
   Kickstart Designmanual 2026 visual reference.
   ========================================================= */

/* ---------- FONTS ---------- */
/* Brand primary: Aptos (Microsoft).
   Aptos isn't on Google Fonts but ships on modern Windows & Microsoft 365
   and is available as a webfont on fontesk / official Microsoft channels.
   We fall back to a tight system stack (Segoe UI Variable / system-ui)
   so the geometry stays close on any device.
   The italic cut is part of the brand voice — use it for emphasis,
   pull-quotes, and the "Kjør på!" callouts. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- HOVEDFARGER (Primary) ---------- */
  --ks-navy:        #182435; /* Pantone 303 C — primary dark */
  --ks-yellow:      #F7FE75; /* Pantone 379 C — primary accent */

  /* tints / off-states */
  --ks-navy-mid:    #4282a4; /* mid blue */
  --ks-navy-tint:   #c1e4ef; /* pale blue */
  --ks-yellow-mid:  #fffda9; /* pale yellow */
  --ks-yellow-tint: #fffee9; /* almost-white yellow — used as paper */

  /* ---------- STØTTEFARGER (Support) ---------- */
  --ks-bronze:      #9e783b;
  --ks-brown-dark:  #682a00;
  --ks-mint:        #97ffaf;
  --ks-green:       #39b54a;
  --ks-lilac:       #c1bbff;
  --ks-aubergine:   #3e1651;
  --ks-coral:       #ff855f;
  --ks-orange:      #ff5b1a;

  /* ---------- SEMANTIC ---------- */
  --bg:             var(--ks-yellow-tint);
  --bg-inverse:     var(--ks-navy);
  --bg-accent:      var(--ks-yellow);
  --surface:        #ffffff;
  --surface-tint:   var(--ks-yellow-tint);

  --fg:             var(--ks-navy);
  --fg-muted:       #5b6878;
  --fg-on-dark:     var(--ks-yellow-tint);
  --fg-on-accent:   var(--ks-navy);
  --fg-yellow:      var(--ks-yellow);

  --border:         rgba(24, 36, 53, 0.12);
  --border-strong:  var(--ks-navy);
  --divider:        rgba(24, 36, 53, 0.08);

  --success:        var(--ks-green);
  --warning:        var(--ks-orange);
  --info:           var(--ks-navy-mid);

  /* ---------- TYPE ---------- */
  /* Brand: Aptos (Microsoft). Onest is the open web fallback when
     Aptos isn't installed locally. */
  --font-sans:      'Aptos', 'Aptos Display', 'Segoe UI Variable Display', 'Segoe UI', 'Onest', system-ui, sans-serif;
  --font-display:   'Aptos Display', 'Aptos', 'Segoe UI Variable Display', 'Segoe UI', 'Onest', system-ui, sans-serif;
  /* Italic Aptos is part of the brand voice — used for emphasis,
     pull-quotes, and the slanted "Kjør på!" callouts. */
  --font-script:    'Aptos', 'Segoe UI Variable Display', 'Segoe UI', 'Onest', Georgia, serif;

  /* ---------- TYPE SCALE — desktop ---------- */
  /* Built for big-headline layouts. On mobile, h1/h2 should step down ~30%. */
  --fs-display:     clamp(64px, 9vw, 160px); /* @kind font */
  --fs-h1:          clamp(44px, 5.5vw, 88px); /* @kind font */
  --fs-h2:          clamp(32px, 3.6vw, 56px); /* @kind font */
  --fs-h3:          clamp(22px, 2.0vw, 32px); /* @kind font */
  --fs-h4:          18px; /* @kind font */
  --fs-body-lg:     20px; /* @kind font */
  --fs-body:        17px; /* @kind font */
  --fs-body-sm:     15px; /* @kind font */
  --fs-caption:     13px; /* @kind font */
  --fs-eyebrow:     12px; /* @kind font */

  --lh-display:     0.94; /* @kind font */
  --lh-heading:     1.04; /* @kind font */
  --lh-body:        1.5; /* @kind font */

  --tracking-display: -0.025em; /* @kind font */
  --tracking-heading: -0.018em; /* @kind font */
  --tracking-body:    0; /* @kind font */
  --tracking-eyebrow: 0.12em; /* @kind font */

  --fw-light:       300; /* @kind font */
  --fw-regular:     400; /* @kind font */
  --fw-medium:      500; /* @kind font */
  --fw-semibold:    600; /* @kind font */
  --fw-bold:        700; /* @kind font */
  --fw-black:       800; /* @kind font */

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --gutter:   var(--space-7);

  /* ---------- RADII ---------- */
  /* Kickstart layouts skew SQUARE. Photos rarely have rounding.
     Soft radii are reserved for chips, buttons, capsules. */
  --r-none: 0; /* @kind radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Shadows are restrained. The brand prefers flat blocks + diagonal
     angle-cuts to create depth, not drop-shadows. */
  --shadow-sm: 0 1px 2px rgba(24,36,53,0.06);
  --shadow-md: 0 8px 24px -8px rgba(24,36,53,0.18);
  --shadow-lg: 0 24px 64px -16px rgba(24,36,53,0.28);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.55, 0, 0.85, 0.4); /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.32, 0.4, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---------- ANGLES (signature visual motif) ---------- */
  /* Diagonal cuts are everywhere — on banners, content blocks,
     CTA tiles. Standardise the angle so it feels consistent. */
  --angle:        12deg; /* @kind other */
  --clip-up-r:    polygon(0 18%, 100% 0, 100% 100%, 0 100%); /* @kind other */
  --clip-up-l:    polygon(0 0, 100% 18%, 100% 100%, 0 100%); /* @kind other */
  --clip-down-r:  polygon(0 0, 100% 0, 100% 82%, 0 100%); /* @kind other */
  --clip-down-l:  polygon(0 0, 100% 0, 100% 100%, 0 82%); /* @kind other */
}

/* =========================================================
   BASE STYLES — drop into any HTML for instant brand voice
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Headings — generous, big, tight-tracked ---- */
.ks-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

h1, .ks-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .ks-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .ks-h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

h4, .ks-h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

p, .ks-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  max-width: 64ch;
  text-wrap: pretty;
}

.ks-lede {
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  max-width: 56ch;
}

.ks-caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.ks-eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}

.ks-script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: var(--fw-medium);
}

/* ---- Selection — own the highlight color ---- */
::selection {
  background: var(--ks-yellow);
  color: var(--ks-navy);
}