/* Kvikr UI – Base
   - Typsnitt + variabler + grundtypografi + sidlayout
   - Alla textstorlekar styrs av --fs (grundstorlek)
*/
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Condensed";
  src: url("../fonts/ubuntu-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
:root {
  --shadow-line: 0 1px 0 rgba(0,0,0,.03);
  --shadow-pop: 0 10px 30px rgba(15,23,42,.07);

  --err: #dc2626;
  --code-border: var(--border);
  --shadow-fab: 0 8px 20px rgba(15,23,42,.10);
  --shadow-fab-strong: 0 10px 28px rgba(15,23,42,.18);
  --bg-alt: #eef1f4;

	/* Brand */
	--accent: #b60000;
	--accent-rgb: 182,0,0; /* #b60000 */
	--link: var(--accent);
	--accent-border: rgba(182, 0, 0, .25);
	--accent-border-strong: rgba(182, 0, 0, .35);
	--logo-size: 48px;
 
	/* Scale */
	--fs: 18px;
	/* ändra denna för att skala all text */
	--line: 1.55;
 
	/* Derived font sizes (multiplar av --fs) */
	--fs-xs: calc(var(--fs) * 0.75);
	/* 12px vid fs=16 */
	--fs-sm: calc(var(--fs) * 0.8125);
	/* 13px */
	--fs-md: var(--fs);
	/* 16px */
	--fs-lg: calc(var(--fs) * 1.125);
	/* 18px */
	--fs-xl: calc(var(--fs) * 1.375);
	/* 22px */
	--fs-h1: calc(var(--fs) * 2.125);
	/* 34px */
	--fs-h2: calc(var(--fs) * 1.625);
	/* 26px */
	--fs-h3: calc(var(--fs) * 1.25);
	/* 20px */
	--fs-h4: calc(var(--fs) * 1.0);
	/* 16px */
 
	--fs-code: calc(var(--fs) * 0.8125);
	/* 13px */
 
	/* Neutrals */
	--bg: #f6f7f9;
	--panel: #ffffff;
	--panel2: #fafafa;
	--text: #0f172a;
	--muted: #475569;
	--border: #e5e7eb;
	--shadow: 0 8px 24px rgba(15, 23, 42, .06);
 
	/* Sidlayout */
	--radius: 14px;
	--radius-sm: 10px;
	--gap: 16px;
	--container: 1100px;
	--sidebar: 280px;
 
	/* Breakpoints (plattform) */
	--bp-sm: 720px;   /* när formulär mm staplas */
	--bp-md: 900px;   /* "desktop start" */
	--bp-lg: 1200px;  /* breda layouter */

	/* Typografi */
	--font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: var(--font);
	--font-head: "Ubuntu Condensed", "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

		/* Font weights */
		--fw-regular: 400;
		--fw-medium: 500;
		--fw-semibold: 600;
		--fw-bold: 700;
		
		/* Semantic font weights */
		--fw-body: var(--fw-regular);
		--fw-ui: var(--fw-medium);
		--fw-strong: var(--fw-medium);
		--fw-label: var(--fw-bold);
		--fw-heading: var(--fw-regular);

		strong,
		b {
			font-weight: var(--fw-strong);
		}

	/* Fokus */
	--focus: 0 0 0 4px rgba(182, 0, 0, .15);
 
	/* Floating action button */
	--fab-size: 54px;
	--fab-gap: 14px;

	/* ===== Controls (light theme) ===== */

	--on-accent: #ffffff; /* text på accentbakgrund */
	--danger-rgb: 239,68,68;
	--ok-rgb: 34,197,94;
	--warn-rgb: 245,158,11;
	--info-rgb: 59,130,246;

	/* Status-färger (används av k-dot och meddelanden) */
	--info: rgb(var(--info-rgb));
	--ok: rgb(var(--ok-rgb));
	--warn: rgb(var(--warn-rgb));
	--err: rgb(var(--danger-rgb));

	/* Code */
	--code-bg: #f3f4f6;
	--code-text: var(--text);

	/* Dialog / overlay */
	--overlay-bg: rgba(15,23,42,.40);
	--dialog-bg: var(--panel);
	--dialog-border: var(--border);

	/* Controls (light) – ytor för knappar/etiketter/inputs */
	--ctrl-bg: #ffffff;
	--ctrl-bg-hover: #f3f4f6;
	--ctrl-bg-muted: var(--panel2);
	--ctrl-text: var(--text);
	--ctrl-border: rgba(0, 0, 0, .12);
	--ctrl-border-hover: rgba(0, 0, 0, .22);


	/* Derived component variabler (stable defaults) */
	/* Knappar ska skilja sig svagt från inputs (som ofta har helt vit yta) */
	--btn-bg: #f8fafc;
	--btn-bg-hover: #f1f5f9;
	--btn-border: var(--ctrl-border);
	--btn-border-hover: var(--ctrl-border-hover);
	--btn-text: var(--link);

	--chip-bg: var(--panel);
	--chip-border: var(--ctrl-border);
	--chip-text: var(--text);

	--input-placeholder: #666; 

		/* Validation tokens */
	  --validation-ok: #15803d;
	  --validation-ok-bg: rgba(21, 128, 61, .10);
	  --validation-ok-ring: rgba(21, 128, 61, .16);
	
	  --validation-err: #b91c1c;
	  --validation-err-bg: rgba(185, 28, 28, .10);
	  --validation-err-ring: rgba(185, 28, 28, .16);

	/* Alerts */
	--alert-bg: #f8f8f8;
	--alert-border: #d0d0d0;

	/* Tabs */
	--tab-hover-bg: rgba(255,255,255,.45);

	/* Statuschips */
	--chip-ok-bg: #e8f7ed;
	--chip-ok-text: #1a7f37;
	--chip-ok-border: #bfe6cc;
	--chip-bad-bg: #fde8e8;
	--chip-bad-text: #b60000;
	--chip-bad-border: #f5bcbc;
	
	  --validation-required: var(--validation-err);
	  --validation-help: var(--muted);
	  --validation-error-text: var(--validation-err);
}
 
* {
	box-sizing: border-box;
}
 
html,
body {
	height: 100%;
}
 
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: var(--fs-md)/var(--line) var(--font);
	font-weight: var(--fw-body);
}
 
/* Headings */
h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	letter-spacing: .2px;
	margin: 0 0 .6rem 0;
	line-height: 1.15;
	font-weight: var(--fw-heading);
}
 
h1 {
	font-size: var(--fs-h1);
}
 
h2 {
	font-size: var(--fs-h2);
}
 
h3 {
	font-size: var(--fs-h3);
}
 
h4 {
	font-size: var(--fs-h4);
}
 
p {
	margin: .6rem 0;
}
 
small,
.muted {
	color: var(--muted);
	font-size: var(--fs-sm);
}
 
a {
	color: var(--link);
	text-decoration: none;
}
 
a:hover {
	text-decoration: underline;
}
 
a:focus {
	outline: none;
	box-shadow: var(--focus);
	border-radius: 6px;
}
 
code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: var(--fs-code);
}
 
pre {
	background: var(--code-bg);
	color: var(--code-text);
	padding: 14px;
	border-radius: 12px;
	overflow: auto;
	margin: 12px 0 0 0;
	border: 1px solid var(--border);
}

 
/* Container */
.k-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 18px;
}
 
/* Topbar / Header */
.k-topbar {
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

 
/* Topnav */
.k-nav{
  border-top: 1px solid var(--border);

  /* Gör navets "luft" symmetrisk */
  padding: 10px 0;

  /* VIKTIGT: ingen margin i topbar */
  margin: 0;

  /* Ingen egen bottom-border här – topbar har redan en */
  border-bottom: 0;
  padding-bottom: 4px;
}
 
.k-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	column-column-gap: 18px;
	row-gap: 6px;
	row-gap: 6px;
align-items: center;
}
 
.k-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--link);
text-decoration: none;
	border: 1px solid transparent;
	font-size: var(--fs-sm);
}
 
.k-nav a:hover {
	background: var(--panel2);
	border-color: var(--border);
	text-decoration: none;
}
 
.k-nav a[aria-current="page"] { 
	border-color: var(--accent-border);
	background: var(--panel);
	color: var(--link);
}
 
/* Sidlayout */
.k-layout {
	display: grid;
	grid-template-columns: var(--sidebar) 1fr;
	gap: var(--gap);
	margin-top: 0;
	align-items: start;
}
 
.k-sidebar {
	position: sticky;
	top: 14px;
}
 
.k-main {
	min-width: 0;
}
 
@media (max-width: 980px) {
	.k-layout {
		grid-template-columns: 1fr;
	}
 
	.k-sidebar {
		position: static;
	}
 
	.k-brand {
		min-width: auto;
	}
}
 
/* Footer (ren, centrerad – ingen panel) */
.k-footer {
	margin-top: 18px;
	color: var(--muted);
	font-size: var(--fs-sm);
	padding: 18px 0 24px 0;
	text-align: center;
}
 
.k-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
 
.k-footer-links {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	font-size: var(--fs-sm);
}
 
.k-footer-copy {
	color: var(--muted);
	font-size: var(--fs-sm);
}

/* ==========================
   Dark theme (variabler only)
   Aktiveras med: <html data-theme="dark">
   Accent i dark: #ffd000
   ========================== */
html[data-theme="dark"] {
  --shadow-line: 0 1px 0 rgba(0,0,0,.35);
  --shadow-pop: 0 16px 40px rgba(0,0,0,.55);

  --danger-rgb: 239,68,68;
  --code-border: rgba(255,255,255,.14);
  --bg-alt: #0f172a;
  --shadow-fab: 0 10px 28px rgba(0,0,0,.45);
  --shadow-fab-strong: 0 16px 36px rgba(0,0,0,.55);

  color-scheme: dark;

  /* Brand */
  --accent: #ffd000;
  --accent-rgb: 255,208,0; /* #ffd000 */
  --link: var(--accent);
  --accent-border: rgba(255, 208, 0, .25);
  --accent-border-strong: rgba(255, 208, 0, .35);
  --on-accent: #111827; /* text på gul accent */
  --focus: 0 0 0 4px rgba(255, 208, 0, .22);

  /* Neutrals */
  --bg: #0b1220;
  --panel: #0f172a;
  --panel2: #111c33;
  --text: #e5e7eb;
  --muted: #a6b0c3;
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 10px 28px rgba(0, 0, 0, .45);

  /* Controls (dark) */
  --ctrl-bg: #0b162b;
  --ctrl-bg-hover: #0d1b36;
  --ctrl-bg-muted: #0e1a33;
  --ctrl-text: var(--text);
  --ctrl-border: rgba(255,255,255,.14);
  --ctrl-border-hover: rgba(255,255,255,.22);

  /* Code */
  --code-bg: #0b1428;
  --code-text: var(--text);

	/* Dialog / overlay */
	--overlay-bg: rgba(15,23,42,.40);
	--dialog-bg: var(--panel);
	--dialog-border: var(--border);

  /* Dialog / overlay */
  --overlay-bg: rgba(15,23,42,.55);
  --dialog-bg: var(--panel2);
  --dialog-border: rgba(255,255,255,.16);

  /* Derived component variabler */
  /* Knappar ska skilja sig svagt från inputs även i dark */
  --btn-bg: #0c1a30;
  --btn-bg-hover: #0e223d;

  /* Alerts */
  --alert-bg: #111b31;
  --alert-border: rgba(255,255,255,.14);

  /* Tabs */
  --tab-hover-bg: rgba(255,255,255,.08);

  /* Statuschips */
  --chip-ok-bg: rgba(34,197,94,.14);
  --chip-ok-text: #86efac;
  --chip-ok-border: rgba(34,197,94,.28);
  --chip-bad-bg: rgba(239,68,68,.14);
  --chip-bad-text: #fca5a5;
  --chip-bad-border: rgba(239,68,68,.28);
  --btn-border: var(--ctrl-border);
  --btn-border-hover: var(--ctrl-border-hover);
  --btn-text: var(--link);

  --chip-bg: var(--panel);
  --chip-border: var(--ctrl-border);
  --chip-text: var(--text);
}

/* Kodblock i dark (så de inte blir "ljusa fläckar") */
html[data-theme="dark"] pre{
  background: var(--code-bg);
  color: var(--code-text);
  border-color: var(--code-border);
}