/* ==========================================================================
   ComplyChip — Refreshed Design Tokens
   Calm, minimal, dependable. One signal color, oklch palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Surfaces ---- */
  --cc-bg:           oklch(99% 0.003 250);
  --cc-bg-sunk:      oklch(97% 0.005 250);
  --cc-surface:      #ffffff;
  --cc-surface-2:    oklch(98.5% 0.004 250);
  --cc-overlay:      oklch(20% 0.015 250 / 0.5);

  /* ---- Ink ---- */
  --cc-ink:          oklch(22% 0.018 255);
  --cc-ink-2:        oklch(38% 0.015 255);
  --cc-mute:         oklch(56% 0.012 255);
  --cc-faint:        oklch(72% 0.008 255);

  /* ---- Lines ---- */
  --cc-line:         oklch(93% 0.006 250);
  --cc-line-strong:  oklch(88% 0.008 250);
  --cc-hairline:     oklch(96% 0.004 250);

  /* ---- Signal (the one accent) ---- */
  --cc-signal:       oklch(54% 0.13 248);
  --cc-signal-ink:   oklch(40% 0.14 248);
  --cc-signal-soft:  oklch(54% 0.13 248 / 0.08);
  --cc-signal-edge:  oklch(54% 0.13 248 / 0.20);

  /* ---- Status (unified L/C, varied H) ---- */
  --cc-danger:       oklch(58% 0.16 27);
  --cc-danger-soft:  oklch(58% 0.16 27 / 0.10);
  --cc-warning:      oklch(70% 0.13 75);
  --cc-warning-soft: oklch(70% 0.13 75 / 0.12);
  --cc-success:      oklch(60% 0.12 155);
  --cc-success-soft: oklch(60% 0.12 155 / 0.10);

  /* ---- Radii ---- */
  --cc-r-sm: 6px;
  --cc-r-md: 10px;
  --cc-r-lg: 14px;
  --cc-r-xl: 20px;
  --cc-r-pill: 999px;

  /* ---- Shadow (very soft, no fake depth) ---- */
  --cc-shadow-1: 0 1px 0 oklch(20% 0.015 250 / 0.04);
  --cc-shadow-2: 0 1px 2px oklch(20% 0.015 250 / 0.04), 0 1px 0 oklch(20% 0.015 250 / 0.03);
  --cc-shadow-3: 0 6px 24px -8px oklch(20% 0.015 250 / 0.10), 0 2px 4px -2px oklch(20% 0.015 250 / 0.06);

  /* ---- Type ---- */
  --cc-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Spacing ---- */
  --cc-1: 4px;  --cc-2: 8px;  --cc-3: 12px; --cc-4: 16px;
  --cc-5: 20px; --cc-6: 24px; --cc-7: 32px; --cc-8: 40px;
  --cc-9: 56px; --cc-10: 72px;

  /* ---- Layout ---- */
  --cc-sidebar-w: 232px;
  --cc-topbar-h:  56px;
}

[data-cc-theme="dark"] {
  --cc-bg:           oklch(17% 0.012 255);
  --cc-bg-sunk:      oklch(14% 0.012 255);
  --cc-surface:      oklch(20% 0.014 255);
  --cc-surface-2:    oklch(22% 0.015 255);
  --cc-overlay:      oklch(8% 0.01 255 / 0.6);

  --cc-ink:          oklch(96% 0.008 250);
  --cc-ink-2:        oklch(82% 0.010 250);
  --cc-mute:         oklch(62% 0.012 250);
  --cc-faint:        oklch(45% 0.012 250);

  --cc-line:         oklch(28% 0.014 255);
  --cc-line-strong:  oklch(34% 0.015 255);
  --cc-hairline:     oklch(24% 0.012 255);

  --cc-signal:       oklch(72% 0.13 248);
  --cc-signal-ink:   oklch(80% 0.13 248);
  --cc-signal-soft:  oklch(72% 0.13 248 / 0.14);
  --cc-signal-edge:  oklch(72% 0.13 248 / 0.30);

  --cc-danger:       oklch(70% 0.16 27);
  --cc-danger-soft:  oklch(70% 0.16 27 / 0.16);
  --cc-warning:      oklch(78% 0.13 75);
  --cc-warning-soft: oklch(78% 0.13 75 / 0.16);
  --cc-success:      oklch(72% 0.12 155);
  --cc-success-soft: oklch(72% 0.12 155 / 0.14);

  --cc-shadow-1: 0 1px 0 oklch(0% 0 0 / 0.30);
  --cc-shadow-2: 0 1px 2px oklch(0% 0 0 / 0.35), 0 1px 0 oklch(0% 0 0 / 0.20);
  --cc-shadow-3: 0 6px 24px -8px oklch(0% 0 0 / 0.45), 0 2px 4px -2px oklch(0% 0 0 / 0.30);
}

/* ==========================================================================
   Scoped frame primitives — all CC components use the .cc class scope.
   ========================================================================== */

.cc, .cc * { box-sizing: border-box; }
.cc {
  font-family: var(--cc-sans);
  color: var(--cc-ink);
  background: var(--cc-bg);
  font-feature-settings: "ss01", "cv11";
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.cc .num { font-variant-numeric: tabular-nums; }
.cc .mono { font-family: var(--cc-mono); }

/* Headlines use slightly tighter tracking */
.cc h1, .cc h2, .cc h3, .cc h4 {
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--cc-ink);
  line-height: 1.2;
}

.cc h1 { font-size: 28px; }
.cc h2 { font-size: 20px; }
.cc h3 { font-size: 16px; }
.cc h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-mute); }

.cc .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-mute);
}

.cc a { color: var(--cc-signal-ink); text-decoration: none; }
.cc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Buttons ---- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--cc-r-md);
  font-family: var(--cc-sans); font-size: 13.5px; font-weight: 550;
  border: 1px solid transparent; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  letter-spacing: -0.005em;
}
.cc-btn-primary { background: var(--cc-ink); color: var(--cc-bg); }
.cc-btn-primary:hover { background: oklch(from var(--cc-ink) calc(l + 0.06) c h); }
.cc-btn-secondary { background: var(--cc-surface); color: var(--cc-ink); border-color: var(--cc-line-strong); }
.cc-btn-secondary:hover { border-color: var(--cc-ink-2); }
.cc-btn-ghost { background: transparent; color: var(--cc-ink-2); }
.cc-btn-ghost:hover { background: var(--cc-bg-sunk); color: var(--cc-ink); }
.cc-btn-signal { background: var(--cc-signal); color: white; }
.cc-btn-signal:hover { background: oklch(from var(--cc-signal) calc(l - 0.04) c h); }
.cc-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }

/* ---- Pills / Chips ---- */
.cc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--cc-r-pill);
  font-size: 11.5px; font-weight: 550; letter-spacing: -0.005em;
  border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-ink-2);
}
.cc-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.cc-pill-danger  { color: var(--cc-danger);  background: var(--cc-danger-soft);  border-color: transparent; }
.cc-pill-warning { color: var(--cc-warning); background: var(--cc-warning-soft); border-color: transparent; }
.cc-pill-success { color: var(--cc-success); background: var(--cc-success-soft); border-color: transparent; }
.cc-pill-signal  { color: var(--cc-signal-ink); background: var(--cc-signal-soft); border-color: transparent; }

/* ---- Card ---- */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-lg);
  box-shadow: var(--cc-shadow-1);
}
.cc-card-pad { padding: 24px; }
.cc-card-head {
  padding: 18px 24px; border-bottom: 1px solid var(--cc-hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.cc-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

/* ---- Inputs ---- */
.cc-input {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--cc-surface); border: 1px solid var(--cc-line-strong);
  border-radius: var(--cc-r-md); color: var(--cc-ink);
  font-family: var(--cc-sans); font-size: 13.5px;
  outline: none; transition: border-color 120ms, box-shadow 120ms;
}
.cc-input:focus { border-color: var(--cc-signal); box-shadow: 0 0 0 3px var(--cc-signal-soft); }
.cc-input::placeholder { color: var(--cc-faint); }

/* ---- Table ---- */
.cc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cc-table th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cc-mute);
  padding: 10px 16px; border-bottom: 1px solid var(--cc-line);
  background: var(--cc-surface-2);
}
.cc-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--cc-hairline);
  color: var(--cc-ink-2); vertical-align: middle;
}
.cc-table tr:last-child td { border-bottom: none; }
.cc-table tbody tr:hover td { background: var(--cc-bg-sunk); }

/* ---- Sidebar ---- */
.cc-app { display: grid; grid-template-columns: var(--cc-sidebar-w) 1fr; min-height: 100%; background: var(--cc-bg); }
.cc-side {
  background: var(--cc-bg-sunk); border-right: 1px solid var(--cc-line);
  display: flex; flex-direction: column; padding: 16px 12px;
}
.cc-side-brand {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px;
}
.cc-side-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--cc-ink); color: var(--cc-bg);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
  position: relative;
}
.cc-side-mark::after {
  content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--cc-signal);
  border: 2px solid var(--cc-bg-sunk);
}
.cc-side-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }

.cc-side-group { padding: 14px 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--cc-ink-2); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background 120ms;
}
.cc-side-item:hover { background: var(--cc-surface); color: var(--cc-ink); }
.cc-side-item.active {
  background: var(--cc-surface); color: var(--cc-ink);
  box-shadow: var(--cc-shadow-1);
}
.cc-side-item.active svg { color: var(--cc-signal); }
.cc-side-item svg { width: 16px; height: 16px; opacity: 0.85; flex-shrink: 0; }
.cc-side-foot {
  margin-top: auto; padding: 12px 8px;
  border-top: 1px solid var(--cc-line);
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.cc-side-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--cc-signal-soft); color: var(--cc-signal-ink);
  display: grid; place-items: center; font-weight: 600; font-size: 12px;
}

/* ---- Topbar ---- */
.cc-top {
  height: var(--cc-topbar-h); border-bottom: 1px solid var(--cc-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; background: var(--cc-bg);
}
.cc-top-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cc-top-sub { font-size: 12px; color: var(--cc-mute); margin-left: 12px; }
.cc-top-search {
  width: 320px; height: 32px; padding: 0 10px 0 32px; border-radius: 8px;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  font-size: 12.5px; color: var(--cc-ink); outline: none;
}

/* ---- Stat tile ---- */
.cc-stat {
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-lg); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-stat-label { font-size: 12px; color: var(--cc-mute); font-weight: 500; }
.cc-stat-value { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.cc-stat-foot { font-size: 11.5px; color: var(--cc-mute); display: flex; align-items: center; gap: 6px; }

/* ---- Score ring ---- */
.cc-ring { position: relative; display: inline-grid; place-items: center; }
.cc-ring-bg { stroke: var(--cc-line); }
.cc-ring-fg { stroke: var(--cc-signal); transition: stroke-dashoffset 600ms ease; }
.cc-ring-num { position: absolute; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }

/* ---- Section heading ---- */
.cc-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 14px;
}
.cc-section-h h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cc-section-h .meta { font-size: 12px; color: var(--cc-mute); }

/* Page grid utilities */
.cc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

/* Spark / mini chart */
.cc-spark { width: 100%; height: 36px; display: block; }

/* Subtle hairline divider */
.cc-hr { height: 1px; background: var(--cc-hairline); border: 0; margin: 16px 0; }