/* Click Inspection design tokens for the website.
 *
 * Every value here is the app's or the portal's own, not a new palette:
 *   src/components/inspector/theme.ts  (ink DARK / ink LIGHT / BRAND / radii / spacing / text)
 *   backend/portal/app.css             (the portal's --flow, --copper, glass)
 * docs/brand-and-style-findings.md §2 maps each one. Change the app first, then
 * this file; never the other way round.
 */

:root {
  /* ---- graphite: the chrome, the phone, the app's dark theme ---- */
  --ci-graphite-canvas: #0c0e11; /* ink.canvas (dark) */
  --ci-graphite: #131519; /* ink.bg (dark) */
  --ci-graphite-surface: #1c1f24; /* ink.surface */
  --ci-graphite-raised: #22262c; /* ink.surfaceRaised */
  --ci-graphite-segment: #33383f; /* ink.segmentOn */
  --ci-graphite-hair: #24282e; /* ink.hair */
  --ci-graphite-edge: #3a3f49; /* ink.edge */
  --ci-graphite-header: #16181c; /* ink.headerBg */
  --ci-on-graphite: #ffffff; /* ink.t1 */
  --ci-on-graphite-2: #a0a3a8; /* ink.t2 */
  --ci-on-graphite-3: #8a8d93; /* ink.t3 */
  --ci-on-graphite-4: #7a7d82; /* ink.t4Text */

  /* ---- the world: the app's light theme ---- */
  --ci-canvas: #f7f9fb; /* ink.canvas (light) */
  --ci-page: #f2f4f7; /* ink.bg (light) */
  --ci-surface: #ffffff; /* ink.surface */
  --ci-raised: #edf1f5; /* ink.surfaceRaised */
  --ci-hair: #dde2e8; /* ink.hair */
  --ci-edge: #b9c1ca; /* ink.edge */
  --ci-ink: #14171c; /* ink.t1 */
  --ci-ink-2: #4e545c; /* ink.t2 */
  --ci-ink-3: #5f666e; /* ink.t3 */

  /* ---- brand green: automation, success, "answered by the app" ---- */
  --ci-green: #35c77a; /* BRAND.green, portal --flow */
  --ci-green-hi: #52dd96; /* BRAND.greenHi */
  --ci-green-lo: #2cb36c; /* BRAND.greenLo */
  --ci-on-green: #0a0b0d; /* BRAND.onGreen */
  --ci-on-green-soft: rgba(10, 11, 13, 0.76); /* BRAND.onGreenSoft */
  --ci-green-ink: #067940; /* ink.ok (light): green as TEXT on a light ground */
  --ci-green-tint: #e2f3e9; /* portal --flow-light (light) */
  --ci-green-glow: 0 8px 20px -8px rgba(53, 199, 122, 0.55); /* BRAND.greenGlow */

  /* ---- copper: the inspector's own hand ---- */
  --ci-copper: #e0a03a; /* ink.warn (dark), portal --copper */
  --ci-copper-ink: #a25407; /* ink.warn (light): copper as TEXT on light */
  --ci-copper-tint: #faecdc; /* portal --copper-light (light) */

  --ci-alert: #ff6b70; /* ink.alert (dark) */
  --ci-alert-ink: #cd2127; /* ink.alert (light) */
  --ci-pending: #6e737c; /* ink.pending (dark) */

  /* ---- type: the system stack, exactly as the portal sets it ---- */
  --ci-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ci-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

  /* the app's type scale (text.* in theme.ts), px */
  --ci-t-title: 28px;
  --ci-t-title-md: 24px;
  --ci-t-nav: 20px;
  --ci-t-card: 17px;
  --ci-t-row: 16px;
  --ci-t-button: 14.5px;
  --ci-t-sub: 12.5px;
  --ci-t-pill: 11px;
  --ci-t-eyebrow: 10.5px;

  /* ---- shape and space (radii / spacing in theme.ts) ---- */
  --ci-r-card: 12px;
  --ci-r-segment: 9px;
  --ci-r-button: 10px;
  --ci-r-chip: 8px;
  --ci-r-pill: 999px;
  --ci-r-panel: 14px; /* portal --radius */
  --ci-s-xs: 4px;
  --ci-s-sm: 8px;
  --ci-s-md: 12px;
  --ci-s-lg: 16px;
  --ci-s-xl: 22px;
  --ci-s-xxl: 28px;

  /* ---- motion (readyRing.tsx; the portal's hover transitions) ---- */
  --ci-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ci-flash-ms: 900ms;
  --ci-ring-ms: 2600ms;
  --ci-hover-ms: 140ms;
}