/*
 * Design tokens ported from the Claude Design handoff
 * ("Checklist Spike.dc.html" / "Checklist Mobile.dc.html").
 *
 * Scoped to the marketing (.mk-*) and onboarding (.ob-*) surfaces. The older
 * app chrome keeps the --line/--muted/--accent vars in application.css.
 */

:root {
  --ck-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* brand */
  --ck-green: #1fb886;
  --ck-green-lo: #12b57e;
  --ck-green-hi: #1fc98f;
  --ck-blue: #3358d4;
  --ck-blue-dark: #2140a8;
  --ck-navy: #0f2a5c;
  --ck-amber: #f5a524;
  --ck-amber-ink: #c97a12;

  /* ink */
  --ck-ink: #1f2a44;
  --ck-body: #4a5468;
  --ck-muted: #5a6478;
  --ck-soft: #8a94a8;
  --ck-faint: #9aa4b6;
  --ck-ghost: #b3bccb;

  /* surfaces + lines */
  --ck-surface: #f7f9fc;
  --ck-surface-blue: #f4f7fc;
  --ck-line: #eef2f7;
  --ck-line-strong: #e2e7f0;
  --ck-field-line: #dbe3f0;

  /* accents */
  --ck-mint-bg: #f7fdfa;
  --ck-mint-line: #cdeede;
  --ck-mint-chip: #dcf5ec;
  --ck-tint-blue: #e9edf7;
  --ck-tint-green: #eaf7f1;
  --ck-tint-orange: #fdece2;
  --ck-warn-bg: #fff7ec;
  --ck-warn-line: #fbe4c0;

  /* gradients */
  --ck-page-grad: linear-gradient(160deg, #dde7f6 0%, #c6d6ec 100%);
  --ck-wizard-grad: linear-gradient(158deg, #d9e4f5 0%, #c4d5ec 100%);
  --ck-green-grad: linear-gradient(180deg, #1fc98f, #12b57e);

  /* shadows */
  --ck-shadow-green: 0 12px 24px -8px rgba(18, 181, 126, .6);
  --ck-shadow-card: 0 30px 60px -24px rgba(40, 60, 110, .55);
  --ck-shadow-wizard: 0 26px 50px -30px rgba(40, 60, 110, .45);
}

/* The handoff's reset (*{box-sizing:border-box}), scoped to the surfaces that
   were designed against it -- width:100% fields and buttons must include their
   own padding and border or they overflow by different amounts. */
body.marketing, body.marketing *, body.marketing *::before, body.marketing *::after,
body.onboarding, body.onboarding *, body.onboarding *::before, body.onboarding *::after {
  box-sizing: border-box;
}