/* CashPlan brand tokens v1.0 (2026-10-21). Generated from cashplan-tokens.json — keep both in sync.
   Use: <link rel="stylesheet" href="https://brand.cashplan.link/tokens/cashplan-tokens.css">
   Theme: light by default; dark via [data-theme="dark"] or the system setting when no data-theme is set. */

:root {
  /* brand */
  --cp-green: #09cc7c;
  --cp-green-deep: #057a4b;
  --cp-green-tint: #e8f8f0;
  --cp-ink: #0c1a14;
  --cp-paper: #f1f6f3;
  --cp-gold: #ffc93c;

  /* gray (green-tinted, cool — never cream) */
  --cp-gray-0: #ffffff;
  --cp-gray-50: #f5f7f6;
  --cp-gray-100: #edf1ef;
  --cp-gray-200: #dde3e0;
  --cp-gray-300: #c3ccc8;
  --cp-gray-400: #98a39e;
  --cp-gray-500: #687470;
  --cp-gray-600: #5e6a65;
  --cp-gray-700: #37413d;
  --cp-gray-800: #222b27;
  --cp-gray-900: #0c1a14;

  /* status */
  --cp-success: #057a4b;
  --cp-success-bg: #e8f8f0;
  --cp-warning: #a15c00;
  --cp-warning-bg: #fff4d6;
  --cp-danger: #c4261b;
  --cp-danger-bg: #fdecea;
  --cp-info: #2563eb;
  --cp-info-bg: #eaf1fe;

  /* theme (light) */
  --cp-bg: #ffffff;
  --cp-surface: #f5f7f6;
  --cp-card: #ffffff;
  --cp-text: #0c1a14;
  --cp-text-sub: #5e6a65;
  --cp-text-faint: #687470;
  --cp-line: #dde3e0;
  --cp-line-strong: #c3ccc8;
  --cp-accent: #09cc7c;
  --cp-accent-text: #057a4b;
  --cp-on-accent: #0c1a14;
  --cp-accent-tint: #e8f8f0;
  --cp-focus: #057a4b;

  /* type */
  --cp-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --cp-fs-display: 56px;
  --cp-fs-h1: 40px;
  --cp-fs-h2: 28px;
  --cp-fs-h3: 20px;
  --cp-fs-body-lg: 18px;
  --cp-fs-body: 16px;
  --cp-fs-small: 14px;
  --cp-fs-caption: 12px;
  --cp-track-display: -0.035em;
  --cp-track-heading: -0.025em;
  --cp-track-body: -0.01em;

  /* space (4 px base) */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;
  --cp-space-10: 40px;
  --cp-space-14: 56px;
  --cp-space-18: 72px;
  --cp-space-24: 96px;
  --cp-space-32: 128px;

  /* radius */
  --cp-radius-xs: 6px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 16px;
  --cp-radius-xl: 24px;

  /* shadow */
  --cp-shadow-sm: 0 1px 2px rgba(12, 26, 20, 0.06), 0 1px 1px rgba(12, 26, 20, 0.04);
  --cp-shadow-md: 0 4px 12px -2px rgba(12, 26, 20, 0.08), 0 2px 4px rgba(12, 26, 20, 0.04);
  --cp-shadow-lg: 0 18px 40px -12px rgba(12, 26, 20, 0.18), 0 4px 10px rgba(12, 26, 20, 0.05);
  --cp-shadow-focus: 0 0 0 3px rgba(9, 204, 124, 0.35);

  /* motion */
  --cp-dur-micro: 120ms;
  --cp-dur-ui: 200ms;
  --cp-dur-enter: 320ms;
  --cp-dur-brand: 900ms;
  --cp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cp-ease-sprout: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cp-stagger: 60ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --cp-bg: #0a120e;
  --cp-surface: #111b16;
  --cp-card: #17231d;
  --cp-text: #eef4f1;
  --cp-text-sub: #a3b1aa;
  --cp-text-faint: #7c8883;
  --cp-line: #24302a;
  --cp-line-strong: #34423b;
  --cp-accent: #2bdb92;
  --cp-accent-text: #4be3a4;
  --cp-on-accent: #0c1a14;
  --cp-accent-tint: #12301f;
  --cp-focus: #4be3a4;
  --cp-success: #4be3a4;
  --cp-success-bg: #12301f;
  --cp-warning: #fbbf24;
  --cp-warning-bg: #2e2410;
  --cp-danger: #f87171;
  --cp-danger-bg: #331614;
  --cp-info: #60a5fa;
  --cp-info-bg: #142338;
  --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cp-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --cp-shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cp-bg: #0a120e;
    --cp-surface: #111b16;
    --cp-card: #17231d;
    --cp-text: #eef4f1;
    --cp-text-sub: #a3b1aa;
    --cp-text-faint: #7c8883;
    --cp-line: #24302a;
    --cp-line-strong: #34423b;
    --cp-accent: #2bdb92;
    --cp-accent-text: #4be3a4;
    --cp-on-accent: #0c1a14;
    --cp-accent-tint: #12301f;
    --cp-focus: #4be3a4;
    --cp-success: #4be3a4;
    --cp-success-bg: #12301f;
    --cp-warning: #fbbf24;
    --cp-warning-bg: #2e2410;
    --cp-danger: #f87171;
    --cp-danger-bg: #331614;
    --cp-info: #60a5fa;
    --cp-info-bg: #142338;
    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cp-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --cp-shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cp-dur-micro: 0ms;
    --cp-dur-ui: 0ms;
    --cp-dur-enter: 0ms;
    --cp-dur-brand: 0ms;
    --cp-stagger: 0ms;
  }
}

/* Components (reference implementation; copy into the app's component layer) */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: var(--cp-radius-md); border: 1px solid transparent;
  font: 600 16px/1 var(--cp-font); letter-spacing: var(--cp-track-body); cursor: pointer; text-decoration: none;
  transition: background-color var(--cp-dur-micro) var(--cp-ease-out), transform var(--cp-dur-micro) var(--cp-ease-out), box-shadow var(--cp-dur-micro) var(--cp-ease-out);
}
.cp-btn:active { transform: scale(0.98); }
.cp-btn:focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
.cp-btn--primary { background: var(--cp-accent); color: var(--cp-on-accent); }
.cp-btn--primary:hover { background: color-mix(in srgb, var(--cp-accent) 88%, var(--cp-ink)); }
.cp-btn--dark { background: var(--cp-ink); color: #fff; }
.cp-btn--secondary { background: var(--cp-card); color: var(--cp-text); border-color: var(--cp-line-strong); }
.cp-btn--secondary:hover { background: var(--cp-surface); }
.cp-btn--ghost { background: transparent; color: var(--cp-accent-text); }
.cp-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--cp-radius-sm); }
.cp-btn[disabled] { background: var(--cp-gray-100); color: var(--cp-gray-500); cursor: not-allowed; transform: none; }

.cp-input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--cp-radius-md);
  border: 1px solid var(--cp-line-strong); background: var(--cp-card); color: var(--cp-text);
  font: 400 16px/1.4 var(--cp-font); letter-spacing: var(--cp-track-body);
  transition: border-color var(--cp-dur-micro) var(--cp-ease-out), box-shadow var(--cp-dur-micro) var(--cp-ease-out);
}
.cp-input::placeholder { color: var(--cp-text-faint); }
.cp-input:focus { outline: none; border-color: var(--cp-accent-text); box-shadow: var(--cp-shadow-focus); }
.cp-input[aria-invalid="true"] { border-color: var(--cp-danger); }

.cp-card { background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-sm); }

.cp-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--cp-radius-xs); font: 600 12px/1 var(--cp-font); }
.cp-badge--green { background: var(--cp-accent-tint); color: var(--cp-accent-text); }
.cp-badge--gray { background: var(--cp-surface); color: var(--cp-text-sub); }
.cp-badge--warn { background: var(--cp-warning-bg); color: var(--cp-warning); }
.cp-badge--danger { background: var(--cp-danger-bg); color: var(--cp-danger); }