/* =========================================================
   Kollat Design System — colors & type
   =========================================================
   Source of truth for visual foundations.
   Import via <link rel="stylesheet" href="colors_and_type.css">
   ========================================================= */

/* --- Fonts (substitutions — see README "Font substitutions") --- */
@import url("fonts.css"); /* self-hostade — inga anrop till Google */

:root {
  /* ---------- Color: surfaces & ink ---------- */
  --cream-bg:        #FAF8F3;   /* page background — primary warm off-white */
  --cream-surface:   #FFFDF8;   /* card background — warm white, slightly lifted */
  --cream-surface-2: #EFEAE1;   /* secondary surface · pressed · selected chip */
  --cream-surface-3: #E9E4DA;   /* greige tint · scan overlay base */

  --ink:             #2F3530;   /* primary text · icons (charcoal w/ green undertone) */
  --ink-2:           #6F706A;   /* secondary text */
  --ink-3:           #9B9A93;   /* tertiary / meta / placeholders */
  --ink-on-green:    #FBFBF7;

  --line:            #E3DED4;   /* hairlines, card borders @ 1px */
  --line-strong:     #C9C3B4;

  /* ---------- Color: brand green (sage) ---------- */
  --green:           #6F8B68;   /* primary action · brand */
  --green-press:     #5C7758;   /* darker for press/hover */
  --green-dark:      #314235;   /* deep grey-green for selected text */
  --green-tint:      #DDE6D7;   /* light sage · subtle badges */
  --green-tint-2:    #C7D2BD;   /* light sage pressed */

  /* ---------- Color: NOVA / verdict semantic ramp ---------- */
  --nova-1:          #5F8A5E;   /* "Bra val" — positive */
  --nova-2:          #8FA786;   /* lightly processed (still bra val) */
  --nova-3:          #D6A84F;   /* "Okej val" — neutral ochre */
  --nova-4:          #C9795A;   /* "Se närmare" — muted terracotta, never red */

  --nova-1-tint:     #DDE6D7;
  --nova-2-tint:     #E4EBDD;
  --nova-3-tint:     #F1E3BD;
  --nova-4-tint:     #ECCFBE;

  /* ---------- Type families ---------- */
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale (mobile base) ---------- */
  --size-display: 32px;  --lh-display: 1.15;  /* @kind font */
  --size-h1:      28px;  --lh-h1:      1.2;   /* @kind font */
  --size-h2:      22px;  --lh-h2:      1.25;  /* @kind font */
  --size-h3:      17px;  --lh-h3:      1.3;   /* @kind font */
  --size-body:    15px;  --lh-body:    1.5;   /* @kind font */
  --size-body-sm: 13px;  --lh-body-sm: 1.45;  /* @kind font */
  --size-meta:    12px;  --lh-meta:    1.3;   /* @kind font */
  --size-eyebrow: 11px;  --lh-eyebrow: 1;     /* @kind font */
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;

  /* ---------- Radii ---------- */
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 1px 2px rgba(47, 53, 48, .04), 0 1px 1px rgba(47, 53, 48, .03);
  --shadow-fab:  0 4px 12px rgba(85, 110, 80, .22);

  /* ---------- Motion ---------- */
  --ease-calm: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --dur-short: 160ms; /* @kind other */
  --dur-base:  220ms; /* @kind other */
  --dur-long:  320ms; /* @kind other */
}

/* =========================================================
   Semantic type styles
   ========================================================= */

.k-display, h1.k-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size:   var(--size-display);
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.k-h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size:   var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.k-h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size:   var(--size-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
}

.k-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--size-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
}

.k-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--size-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.k-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:   var(--size-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-2);
}

.k-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size:   var(--size-meta);
  line-height: var(--lh-meta);
  color: var(--ink-3);
}

.k-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:   var(--size-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green);
}

.k-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* =========================================================
   Resets & defaults
   ========================================================= */

html, body {
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}