/* Cartfy design tokens */
:root {
  /* Brand */
  --navy: #0B2C5C;
  --navy-700: #143A6E;
  --royal: #1E66E0;
  --royal-50: #EAF1FE;
  --royal-100: #D7E4FC;
  --teal: #2DD4BF;
  --teal-50: #E2FBF6;
  --teal-100: #C5F6EB;
  --grad: linear-gradient(135deg, #0B2C5C 0%, #1E66E0 55%, #2DD4BF 100%);
  --grad-soft: linear-gradient(135deg, #EAF1FE 0%, #E2FBF6 100%);

  /* Surfaces */
  --bg: #F4F6FB;
  --bg-deep: #EEF1F8;
  --card: #FFFFFF;
  --card-hover: #FBFCFE;
  --inset: #F7F9FC;

  /* Ink */
  --ink: #0B1530;
  --ink-2: #1E2742;
  --muted: #5B6478;
  --faded: #9097A8;
  --line: #E6E9F0;
  --line-soft: #EFF1F6;

  /* Semantic */
  --ok: #16A34A;
  --ok-bg: #E8F7EE;
  --warn: #D97706;
  --warn-bg: #FBF1DD;
  --danger: #DC2626;
  --danger-bg: #FCE9E9;
  --info: var(--royal);
  --info-bg: var(--royal-50);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(11,21,48,.04), 0 1px 1px rgba(11,21,48,.02);
  --sh-2: 0 1px 2px rgba(11,21,48,.04), 0 6px 18px rgba(11,21,48,.05);
  --sh-3: 0 2px 4px rgba(11,21,48,.05), 0 18px 40px rgba(11,21,48,.08);

  /* Type */
  --font-ui: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "cv11", "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
.num { font-family: var(--font-num); font-feature-settings: "tnum"; letter-spacing: -0.01em; }

/* Generic primitives reused across views */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 550; line-height: 1;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: all .14s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--card-hover); border-color: #D8DDE8; }
.btn-primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn-brand {
  background: var(--grad); border-color: transparent; color: #fff;
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--inset); color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 550; line-height: 1;
  background: var(--inset); color: var(--muted);
  border: 1px solid var(--line-soft);
}
.chip-ok { background: var(--ok-bg); color: #126B33; border-color: transparent; }
.chip-warn { background: var(--warn-bg); color: #8A4B05; border-color: transparent; }
.chip-danger { background: var(--danger-bg); color: #8A1717; border-color: transparent; }
.chip-info { background: var(--info-bg); color: #0E3A8A; border-color: transparent; }
.chip-teal { background: var(--teal-50); color: #066D62; border-color: transparent; }

.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-ok { background: #16A34A; }
.dot-warn { background: #D97706; }
.dot-danger { background: #DC2626; }
.dot-info { background: #1E66E0; }

/* Icon helper — ensures inline .ic spans size their inner SVG correctly. */
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; width: 1em; height: 1em; }
.ic > svg { width: 100%; height: 100%; display: block; }

/* Scrollbar (where visible) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #DCE0EA; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #C5CAD8; background-clip: content-box; border: 2px solid transparent; }

/* Logo mark — recreates the f/teal-fold motif at small size, color-only */
.cartfy-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--grad);
  color: #fff;
  font-weight: 700; font-style: italic;
  font-size: 18px; line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 0 6px 14px -4px rgba(30,102,224,.55);
}
.cartfy-mark::before { content: "C"; }
.cartfy-wordmark {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em;
}
.cartfy-wordmark .dot-pro { color: var(--teal); font-weight: 600; }

/* Mini sparkline / chart helpers */
.spark { display: block; }
.axis-text { fill: var(--faded); font-size: 11px; font-family: var(--font-num); }
.grid-line { stroke: var(--line-soft); stroke-width: 1; }