/* ==========================================================================
   Wanted Design System — colors, type, spacing, radii, shadows, motion
   Reconstructed from the Wanted Design System (Community) Figma file.
   Drop in <link rel="stylesheet" href="colors_and_type.css"> first.
   ========================================================================== */

/* ---------- Webfonts -------------------------------------------------------
   Wanted Sans is served locally from /fonts/. Pretendard JP still loads
   from the author's CDN — drop a /fonts/PretendardJPVariable.woff2 in and
   add a matching @font-face block to take it offline.
*/
@font-face {
  font-family: "Wanted Sans Variable";
  src:
    url("fonts/WantedSansVariable.woff2") format("woff2-variations"),
    url("fonts/WantedSansVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Convenience alias so `font-family: "Wanted Sans"` also works. */
@font-face {
  font-family: "Wanted Sans";
  src:
    url("fonts/WantedSansVariable.woff2") format("woff2-variations"),
    url("fonts/WantedSansVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp.css");

:root {
  /* ===== Atomic colors — Common ===== */
  --color-atomic-common-100: #ffffff;
  --color-atomic-common-0: #000000;

  /* ===== Atomic colors — Neutral (true grey, used for charts/diagrams only) ===== */
  --color-atomic-neutral-99: #f7f7f7;
  --color-atomic-neutral-95: #dcdcdc;
  --color-atomic-neutral-90: #c4c4c4;
  --color-atomic-neutral-80: #b0b0b0;
  --color-atomic-neutral-70: #9b9b9b;
  --color-atomic-neutral-60: #8a8a8a;
  --color-atomic-neutral-50: #737373;
  --color-atomic-neutral-40: #5c5c5c;
  --color-atomic-neutral-30: #474747;
  --color-atomic-neutral-22: #303030;
  --color-atomic-neutral-20: #2a2a2a;
  --color-atomic-neutral-15: #1c1c1c;
  --color-atomic-neutral-10: #171717;
  --color-atomic-neutral-5: #0f0f0f;
  --color-atomic-neutral-0: #000000;

  /* ===== Atomic colors — Cool Neutral (the actual neutral) ===== */
  --color-atomic-coolNeutral-99: #f7f7f8;
  --color-atomic-coolNeutral-98: #f4f4f5;
  --color-atomic-coolNeutral-97: #eaebec;
  --color-atomic-coolNeutral-96: #e1e2e4;
  --color-atomic-coolNeutral-95: #dbdcdf;
  --color-atomic-coolNeutral-90: #c2c4c8;
  --color-atomic-coolNeutral-80: #aeb0b6;
  --color-atomic-coolNeutral-70: #989ba2;
  --color-atomic-coolNeutral-60: #878a93;
  --color-atomic-coolNeutral-50: #70737c;
  --color-atomic-coolNeutral-40: #5a5c63;
  --color-atomic-coolNeutral-30: #46474c;
  --color-atomic-coolNeutral-25: #37383c;
  --color-atomic-coolNeutral-23: #333438;
  --color-atomic-coolNeutral-22: #2e2f33;
  --color-atomic-coolNeutral-20: #292a2d;
  --color-atomic-coolNeutral-17: #212225;
  --color-atomic-coolNeutral-15: #1b1c1e;
  --color-atomic-coolNeutral-10: #171719;
  --color-atomic-coolNeutral-7: #141415;
  --color-atomic-coolNeutral-5: #0f0f10;
  --color-atomic-coolNeutral-0: #000000;

  /* ===== Atomic colors — Blue (brand) ===== */
  --color-atomic-blue-99: #f7fbff;
  --color-atomic-blue-95: #eaf2fe;
  --color-atomic-blue-90: #c9defe;
  --color-atomic-blue-80: #9ec5ff;
  --color-atomic-blue-70: #69a5ff;
  --color-atomic-blue-65: #4f95ff;
  --color-atomic-blue-60: #3385ff;
  --color-atomic-blue-55: #1a75ff;
  --color-atomic-blue-50: #0066ff;
  --color-atomic-blue-45: #005eeb;
  --color-atomic-blue-40: #0054d1;
  --color-atomic-blue-30: #003e9c;
  --color-atomic-blue-20: #002966;
  --color-atomic-blue-10: #001536;
  --color-atomic-blue-0: #000000;

  /* ===== Atomic colors — Red ===== */
  --color-atomic-red-99: #fffafa;
  --color-atomic-red-95: #feecec;
  --color-atomic-red-90: #fed5d5;
  --color-atomic-red-80: #ffb5b5;
  --color-atomic-red-70: #ff8c8c;
  --color-atomic-red-60: #ff6363;
  --color-atomic-red-50: #ff4242;
  --color-atomic-red-40: #e52222;
  --color-atomic-red-30: #b20c0c;
  --color-atomic-red-20: #750404;
  --color-atomic-red-10: #3b0101;
  --color-atomic-red-0: #000000;

  /* ===== Atomic colors — Green ===== */
  --color-atomic-green-99: #f2fff6;
  --color-atomic-green-95: #d9ffe6;
  --color-atomic-green-90: #acfcc7;
  --color-atomic-green-80: #7df5a5;
  --color-atomic-green-70: #49e57d;
  --color-atomic-green-60: #1ed45a;
  --color-atomic-green-50: #00bf40;
  --color-atomic-green-40: #009632;
  --color-atomic-green-30: #006e25;
  --color-atomic-green-20: #004517;
  --color-atomic-green-10: #00240c;
  --color-atomic-green-0: #000000;

  /* ===== Atomic colors — Orange ===== */
  --color-atomic-orange-99: #fffcf7;
  --color-atomic-orange-95: #fef4e6;
  --color-atomic-orange-90: #fee6c6;
  --color-atomic-orange-80: #ffd49c;
  --color-atomic-orange-70: #ffc06e;
  --color-atomic-orange-60: #ffa938;
  --color-atomic-orange-50: #ff9200;
  --color-atomic-orange-40: #d47800;
  --color-atomic-orange-39: #d17600;
  --color-atomic-orange-30: #9c5800;
  --color-atomic-orange-20: #663a00;
  --color-atomic-orange-10: #361e00;
  --color-atomic-orange-0: #000000;

  /* ===== Atomic colors — Red Orange ===== */
  --color-atomic-redOrange-99: #fffaf7;
  --color-atomic-redOrange-95: #feeee5;
  --color-atomic-redOrange-90: #fedbc6;
  --color-atomic-redOrange-80: #ffc09c;
  --color-atomic-redOrange-70: #ff9c63;
  --color-atomic-redOrange-60: #ff7b2e;
  --color-atomic-redOrange-50: #ff5e00;
  --color-atomic-redOrange-48: #f55a00;
  --color-atomic-redOrange-40: #cc4b00;
  --color-atomic-redOrange-30: #943600;
  --color-atomic-redOrange-20: #5c2200;
  --color-atomic-redOrange-10: #2e1100;

  /* ===== Atomic colors — Lime ===== */
  --color-atomic-lime-99: #f8fff2;
  --color-atomic-lime-95: #e6ffd4;
  --color-atomic-lime-90: #ccfca9;
  --color-atomic-lime-80: #aef779;
  --color-atomic-lime-70: #88f03e;
  --color-atomic-lime-60: #6be016;
  --color-atomic-lime-50: #58cf04;
  --color-atomic-lime-40: #48ad00;
  --color-atomic-lime-37: #429e00;
  --color-atomic-lime-30: #347d00;
  --color-atomic-lime-20: #225200;
  --color-atomic-lime-10: #112900;

  /* ===== Atomic colors — Cyan / Light Blue / Violet / Purple / Pink ===== */
  --color-atomic-cyan-50: #00bdde;
  --color-atomic-cyan-40: #0098b2;
  --color-atomic-lightBlue-50: #00aeff;
  --color-atomic-lightBlue-40: #008dcf;
  --color-atomic-violet-50: #7d5ef7;
  --color-atomic-violet-45: #6541f2;
  --color-atomic-violet-40: #5b37ed;
  --color-atomic-purple-50: #d478ff;
  --color-atomic-purple-40: #ad36e3;
  --color-atomic-pink-50: #fa73e3;
  --color-atomic-pink-46: #e846cd;

  /* ===== Static ===== */
  --color-semantic-static-white: #ffffff;
  --color-semantic-static-black: #000000;

  /* ===== Semantic — Light theme defaults ===== */

  /* Backgrounds */
  --color-bg-canvas: #ffffff;
  --color-bg-page: #f4f4f5; /* coolNeutral-98 */
  --color-bg-elevated: #ffffff;
  --color-bg-elevated-alt: #f7f7f8; /* coolNeutral-99 */
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-tinted: rgba(112, 115, 124, 0.08);

  /* Text */
  --color-text-primary: rgba(0, 0, 0, 1);
  --color-text-secondary: rgba(46, 47, 51, 0.88); /* coolNeutral-22 @ 88 */
  --color-text-tertiary: rgba(55, 56, 60, 0.61); /* coolNeutral-25 @ 61 */
  --color-text-assistive: rgba(55, 56, 60, 0.28);
  --color-text-disabled: rgba(55, 56, 60, 0.28);
  --color-text-inverse: #ffffff;
  --color-text-brand: #0066ff; /* blue-50 */
  --color-text-onBrand: #ffffff;
  --color-text-positive: #009632; /* green-40 */
  --color-text-negative: #e52222; /* red-40 */
  --color-text-warning: #d47800; /* orange-40 */

  /* Borders */
  --color-border-subtle: rgba(112, 115, 124, 0.16);
  --color-border-default: rgba(112, 115, 124, 0.22);
  --color-border-strong: rgba(112, 115, 124, 0.52);
  --color-border-inverse: #000000;
  --color-border-focus: #0066ff;

  /* Interaction */
  --color-interaction-inactive: #989ba2; /* coolNeutral-70 */
  --color-interaction-disable: #f4f4f5; /* coolNeutral-98 */
  --color-interaction-hover: rgba(112, 115, 124, 0.08);
  --color-interaction-press: rgba(112, 115, 124, 0.16);

  /* Accents */
  --color-accent-brand: #0066ff;
  --color-accent-brand-hover: #005eeb;
  --color-accent-brand-press: #0054d1;
  --color-accent-brand-tint: #eaf2fe;
  --color-accent-positive: #00bf40;
  --color-accent-negative: #ff4242;
  --color-accent-warning: #ff9200;
  --color-accent-info: #0066ff;

  /* Surfaces (cards, sheets) */
  --color-surface-card: #ffffff;
  --color-surface-card-hover: #f7f7f8;
  --color-surface-overlay: rgba(255, 255, 255, 0.92);

  /* ===== Spacing — 4px base ===== */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* ===== Radius ===== */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-64: 64px;
  --radius-pill: 9999px;

  /* ===== Shadows ===== */
  --shadow-emphasize:
    0 1px 4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 4px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #0066ff;

  /* ===== Motion ===== */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasize: cubic-bezier(0.3, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* ===== Type families ===== */
  --font-display:
    "Wanted Sans Variable", "Pretendard JP", system-ui, sans-serif;
  --font-body:
    "Pretendard JP", "Pretendard", "Apple SD Gothic Neo", system-ui,
    -apple-system, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* ===== Type scale (size / line-height / letter-spacing / weight) ===== */
  /* Display */
  --type-display-1-size: 56px;
  --type-display-1-lh: 72px;
  --type-display-1-ls: -0.0319em;
  --type-display-1-weight: 700;
  --type-display-2-size: 40px;
  --type-display-2-lh: 52px;
  --type-display-2-ls: -0.0282em;
  --type-display-2-weight: 700;
  --type-display-3-size: 36px;
  --type-display-3-lh: 48px;
  --type-display-3-ls: -0.027em;
  --type-display-3-weight: 700;
  /* Title */
  --type-title-1-size: 32px;
  --type-title-1-lh: 44px;
  --type-title-1-ls: -0.0253em;
  --type-title-1-weight: 700;
  --type-title-2-size: 28px;
  --type-title-2-lh: 38px;
  --type-title-2-ls: -0.0236em;
  --type-title-2-weight: 700;
  --type-title-3-size: 24px;
  --type-title-3-lh: 32px;
  --type-title-3-ls: -0.023em;
  --type-title-3-weight: 700;
  /* Heading */
  --type-heading-1-size: 22px;
  --type-heading-1-lh: 30px;
  --type-heading-1-ls: -0.0194em;
  --type-heading-1-weight: 700;
  --type-heading-2-size: 20px;
  --type-heading-2-lh: 28px;
  --type-heading-2-ls: -0.012em;
  --type-heading-2-weight: 700;
  /* Headline */
  --type-headline-1-size: 18px;
  --type-headline-1-lh: 26px;
  --type-headline-1-ls: -0.002em;
  --type-headline-1-weight: 600;
  --type-headline-2-size: 17px;
  --type-headline-2-lh: 24px;
  --type-headline-2-ls: 0em;
  --type-headline-2-weight: 600;
  /* Body */
  --type-body-1-size: 16px;
  --type-body-1-lh: 24px;
  --type-body-1-ls: 0.0057em;
  --type-body-1-weight: 500;
  --type-body-1-reading-lh: 26px;
  --type-body-2-size: 15px;
  --type-body-2-lh: 22px;
  --type-body-2-ls: 0.0096em;
  --type-body-2-weight: 500;
  --type-body-2-reading-lh: 24px;
  /* Label */
  --type-label-1-size: 14px;
  --type-label-1-lh: 20px;
  --type-label-1-ls: 0.0145em;
  --type-label-1-weight: 600;
  --type-label-1-reading-lh: 22px;
  --type-label-2-size: 13px;
  --type-label-2-lh: 18px;
  --type-label-2-ls: 0.0194em;
  --type-label-2-weight: 600;
  /* Caption */
  --type-caption-1-size: 12px;
  --type-caption-1-lh: 16px;
  --type-caption-1-ls: 0.0252em;
  --type-caption-1-weight: 500;
  --type-caption-2-size: 11px;
  --type-caption-2-lh: 14px;
  --type-caption-2-ls: 0.0311em;
  --type-caption-2-weight: 500;
}

/* ---------- Dark theme override ----------
   Apply via [data-theme="dark"] on a wrapper or :root.
*/
[data-theme="dark"],
.theme-dark {
  --color-bg-canvas: #15171a;
  --color-bg-page: #15171a;
  --color-bg-elevated: #1b1c1e; /* coolNeutral-15 */
  --color-bg-elevated-alt: #212225; /* coolNeutral-17 */
  --color-bg-tinted: rgba(255, 255, 255, 0.06);

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.88);
  --color-text-tertiary: rgba(255, 255, 255, 0.61);
  --color-text-assistive: rgba(255, 255, 255, 0.28);
  --color-text-disabled: rgba(255, 255, 255, 0.28);
  --color-text-inverse: #000000;
  --color-text-brand: #69a5ff; /* blue-70 in dark */

  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.32);
  --color-border-inverse: #ffffff;

  --color-interaction-inactive: #70737c;
  --color-interaction-disable: #292a2d;
  --color-interaction-hover: rgba(255, 255, 255, 0.08);
  --color-interaction-press: rgba(255, 255, 255, 0.16);

  --color-accent-brand: #1a75ff;
  --color-accent-brand-hover: #3385ff;
  --color-accent-brand-press: #4f95ff;
  --color-accent-brand-tint: rgba(0, 102, 255, 0.16);

  --color-surface-card: #1b1c1e;
  --color-surface-card-hover: #212225;
  --color-surface-overlay: rgba(27, 28, 30, 0.92);
}

/* ==========================================================================
   Semantic mixins — apply directly with class names
   ========================================================================== */

html,
body {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.type-display-1 {
  font-family: var(--font-display);
  font-size: var(--type-display-1-size);
  line-height: var(--type-display-1-lh);
  letter-spacing: var(--type-display-1-ls);
  font-weight: var(--type-display-1-weight);
}
.type-display-2 {
  font-family: var(--font-body);
  font-size: var(--type-display-2-size);
  line-height: var(--type-display-2-lh);
  letter-spacing: var(--type-display-2-ls);
  font-weight: var(--type-display-2-weight);
}
.type-display-3 {
  font-family: var(--font-body);
  font-size: var(--type-display-3-size);
  line-height: var(--type-display-3-lh);
  letter-spacing: var(--type-display-3-ls);
  font-weight: var(--type-display-3-weight);
}
.type-title-1 {
  font-family: var(--font-body);
  font-size: var(--type-title-1-size);
  line-height: var(--type-title-1-lh);
  letter-spacing: var(--type-title-1-ls);
  font-weight: var(--type-title-1-weight);
}
.type-title-2 {
  font-family: var(--font-body);
  font-size: var(--type-title-2-size);
  line-height: var(--type-title-2-lh);
  letter-spacing: var(--type-title-2-ls);
  font-weight: var(--type-title-2-weight);
}
.type-title-3 {
  font-family: var(--font-body);
  font-size: var(--type-title-3-size);
  line-height: var(--type-title-3-lh);
  letter-spacing: var(--type-title-3-ls);
  font-weight: var(--type-title-3-weight);
}
.type-heading-1 {
  font-family: var(--font-body);
  font-size: var(--type-heading-1-size);
  line-height: var(--type-heading-1-lh);
  letter-spacing: var(--type-heading-1-ls);
  font-weight: var(--type-heading-1-weight);
}
.type-heading-2 {
  font-family: var(--font-body);
  font-size: var(--type-heading-2-size);
  line-height: var(--type-heading-2-lh);
  letter-spacing: var(--type-heading-2-ls);
  font-weight: var(--type-heading-2-weight);
}
.type-headline-1 {
  font-family: var(--font-body);
  font-size: var(--type-headline-1-size);
  line-height: var(--type-headline-1-lh);
  letter-spacing: var(--type-headline-1-ls);
  font-weight: var(--type-headline-1-weight);
}
.type-headline-2 {
  font-family: var(--font-body);
  font-size: var(--type-headline-2-size);
  line-height: var(--type-headline-2-lh);
  letter-spacing: var(--type-headline-2-ls);
  font-weight: var(--type-headline-2-weight);
}
.type-body-1 {
  font-family: var(--font-body);
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-lh);
  letter-spacing: var(--type-body-1-ls);
  font-weight: var(--type-body-1-weight);
}
.type-body-1-reading {
  font-family: var(--font-body);
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-reading-lh);
  letter-spacing: var(--type-body-1-ls);
  font-weight: var(--type-body-1-weight);
}
.type-body-2 {
  font-family: var(--font-body);
  font-size: var(--type-body-2-size);
  line-height: var(--type-body-2-lh);
  letter-spacing: var(--type-body-2-ls);
  font-weight: var(--type-body-2-weight);
}
.type-label-1 {
  font-family: var(--font-body);
  font-size: var(--type-label-1-size);
  line-height: var(--type-label-1-lh);
  letter-spacing: var(--type-label-1-ls);
  font-weight: var(--type-label-1-weight);
}
.type-label-2 {
  font-family: var(--font-body);
  font-size: var(--type-label-2-size);
  line-height: var(--type-label-2-lh);
  letter-spacing: var(--type-label-2-ls);
  font-weight: var(--type-label-2-weight);
}
.type-caption-1 {
  font-family: var(--font-body);
  font-size: var(--type-caption-1-size);
  line-height: var(--type-caption-1-lh);
  letter-spacing: var(--type-caption-1-ls);
  font-weight: var(--type-caption-1-weight);
}
.type-caption-2 {
  font-family: var(--font-body);
  font-size: var(--type-caption-2-size);
  line-height: var(--type-caption-2-lh);
  letter-spacing: var(--type-caption-2-ls);
  font-weight: var(--type-caption-2-weight);
}

/* Buttons — base shape only; the kit ships full variants. */
.wt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  border-radius: var(--radius-12);
  padding: var(--space-10) var(--space-16);
  font-family: var(--font-body);
  font-size: var(--type-body-1-size);
  font-weight: 600;
  letter-spacing: var(--type-body-1-ls);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
  white-space: nowrap;
  user-select: none;
}
.wt-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.wt-btn--primary {
  background: var(--color-accent-brand);
  color: var(--color-text-onBrand);
}
.wt-btn--primary:hover {
  background: var(--color-accent-brand-hover);
}
.wt-btn--primary:active {
  background: var(--color-accent-brand-press);
}
.wt-btn--secondary {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.wt-btn--secondary:hover {
  background: var(--color-interaction-hover);
}
.wt-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.wt-btn--ghost:hover {
  background: var(--color-interaction-hover);
}
.wt-btn--danger {
  background: var(--color-accent-negative);
  color: #ffffff;
}
.wt-btn[disabled],
.wt-btn:disabled {
  background: var(--color-interaction-disable);
  color: var(--color-text-disabled);
  border-color: transparent;
  cursor: not-allowed;
}
.wt-btn--sm {
  padding: var(--space-6) var(--space-12);
  font-size: var(--type-label-1-size);
  border-radius: var(--radius-8);
}
.wt-btn--lg {
  padding: var(--space-12) var(--space-20);
  font-size: var(--type-headline-2-size);
  border-radius: var(--radius-16);
}

/* Card */
.wt-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-16);
  padding: var(--space-24);
}

/* Input */
.wt-input {
  appearance: none;
  width: 100%;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-12);
  padding: var(--space-10) var(--space-14);
  font-family: var(--font-body);
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-lh);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}
.wt-input::placeholder {
  color: var(--color-text-tertiary);
}
.wt-input:focus {
  outline: none;
  border-color: var(--color-accent-brand);
  box-shadow: 0 0 0 3px var(--color-accent-brand-tint);
}

/* Badge / Chip */
.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-tinted);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--type-caption-1-size);
  font-weight: 600;
  letter-spacing: var(--type-caption-1-ls);
}
.wt-badge--brand {
  background: var(--color-accent-brand-tint);
  color: var(--color-accent-brand);
}
.wt-badge--positive {
  background: #d9ffe6;
  color: #006e25;
}
.wt-badge--negative {
  background: #feecec;
  color: #b20c0c;
}
.wt-badge--warning {
  background: #fef4e6;
  color: #9c5800;
}

/* Divider */
.wt-divider {
  height: 1px;
  background: var(--color-border-default);
  border: 0;
}
.wt-divider--strong {
  height: 4px;
  background: var(--color-border-inverse);
  border: 0;
}