/* CoreMind Vault — design tokens. Muted Nordic navy. Dark mode primary. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces — warm-tinted navy blacks, not pure slate */
  --bg-0: oklch(0.18 0.015 255);      /* page */
  --bg-1: oklch(0.215 0.018 255);     /* card */
  --bg-2: oklch(0.245 0.020 255);     /* raised */
  --bg-3: oklch(0.28 0.022 255);      /* hover */
  --bg-input: oklch(0.20 0.018 255);

  /* Borders / dividers */
  --line: oklch(0.32 0.018 255);
  --line-soft: oklch(0.26 0.018 255);
  --line-strong: oklch(0.42 0.022 255);

  /* Text */
  --fg-0: oklch(0.96 0.006 80);       /* warm off-white */
  --fg-1: oklch(0.82 0.008 80);
  --fg-2: oklch(0.66 0.010 80);
  --fg-3: oklch(0.52 0.012 255);
  --fg-4: oklch(0.40 0.014 255);

  /* Primary — muted navy, institutional */
  --primary: oklch(0.68 0.12 255);
  --primary-strong: oklch(0.76 0.13 255);
  --primary-soft: oklch(0.28 0.06 255);
  --primary-fg: oklch(0.12 0.02 255);

  /* Mode colors — WCAG AA on --bg-1, OKLCH-harmonized */
  --mode-green: oklch(0.74 0.14 160);
  --mode-green-soft: oklch(0.30 0.06 160);
  --mode-blue: oklch(0.72 0.14 235);
  --mode-blue-soft: oklch(0.30 0.06 235);
  --mode-amber: oklch(0.80 0.14 82);
  --mode-amber-soft: oklch(0.32 0.06 82);

  /* Status */
  --ok: oklch(0.74 0.14 160);
  --warn: oklch(0.80 0.14 82);
  --err: oklch(0.70 0.17 25);
  --info: oklch(0.72 0.14 235);

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.25);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

.vault {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.vault h1, .vault h2, .vault h3, .vault h4 { color: var(--fg-0); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.vault p { margin: 0; }
.vault button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.vault input, .vault textarea, .vault select { font-family: inherit; color: inherit; }
.vault .mono { font-family: var(--font-mono); font-feature-settings: "zero"; }

/* Shared primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-2);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--primary); color: var(--primary-fg); font-weight: 600; }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--line-strong); }
.btn-soft { background: var(--bg-2); color: var(--fg-0); border-color: var(--line); }
.btn-soft:hover { background: var(--bg-3); }
.btn-danger { background: transparent; color: var(--err); border-color: color-mix(in oklch, var(--err) 40%, var(--line)); }
.btn-danger:hover { background: color-mix(in oklch, var(--err) 12%, transparent); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 5px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }

.card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--line); color: var(--fg-1);
  background: var(--bg-2);
}
.chip.green { color: var(--mode-green); background: color-mix(in oklch, var(--mode-green) 12%, transparent); border-color: color-mix(in oklch, var(--mode-green) 30%, transparent); }
.chip.blue { color: var(--mode-blue); background: color-mix(in oklch, var(--mode-blue) 12%, transparent); border-color: color-mix(in oklch, var(--mode-blue) 30%, transparent); }
.chip.amber { color: var(--mode-amber); background: color-mix(in oklch, var(--mode-amber) 12%, transparent); border-color: color-mix(in oklch, var(--mode-amber) 30%, transparent); }
.chip.red { color: var(--err); background: color-mix(in oklch, var(--err) 12%, transparent); border-color: color-mix(in oklch, var(--err) 30%, transparent); }
.chip.neutral { color: var(--fg-2); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg-2); color: var(--fg-2);
}

.input {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--fg-0);
  font-size: 13px; width: 100%;
}
.input:focus-within, .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent); }
.input input { background: none; border: none; outline: none; width: 100%; color: inherit; font-size: inherit; }
.input input::placeholder { color: var(--fg-3); }

.label {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.divider { height: 1px; background: var(--line-soft); }

/* Shield mark used across views for Horsens Beredskab placeholder */
.shield {
  width: 24px; height: 24px; border-radius: 5px;
  background: linear-gradient(180deg, oklch(0.48 0.14 25), oklch(0.38 0.14 25));
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  flex-shrink: 0;
}

/* Coremind mark */
.cm-mark {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--primary); color: var(--primary-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}

/* Scrollbars — subtle */
.vault ::-webkit-scrollbar { width: 10px; height: 10px; }
.vault ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.vault ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; border: 2px solid transparent; }
.vault ::-webkit-scrollbar-track { background: transparent; }

/* Icons (inline svgs are .icon 16px default) */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; flex-shrink: 0; }
.icon-lg { width: 18px; height: 18px; flex-shrink: 0; }

/* Focus rings */
.vault :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Skeleton */
@keyframes shimmer { 0% { background-position: -200px 0 } 100% { background-position: 200px 0 } }
.skel { background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 400px 100%; animation: shimmer 1.4s infinite linear; border-radius: 4px; }