/* ─────────────────────────────────────────────────────────────────
 * Wanted Design System — design tokens
 * Source: Wanted Design System (Community) Figma — CC BY 4.0
 *
 * Token shape:
 *   --wds-color-atomic-<hue>-<step>       — raw palette swatches (0–99)
 *   --wds-color-semantic-<role>-<state>   — what to actually USE in UI
 *   --wds-text-<size>-<flavor>            — typography styles
 *   --wds-shadow-<level>                  — elevation
 *   --wds-radius-<step>, --wds-space-<n>  — geometry
 *
 * Default semantic mapping below is LIGHT mode. Dark mode is mirrored
 * at the bottom under [data-theme="dark"].
 * ───────────────────────────────────────────────────────────────── */

/* ───────── FONTS ────────────────────────────────────────────────
 * @import rules must precede all other rules, so the Wanted Sans
 * split-subset stylesheet is loaded first. Pretendard Variable is
 * served from a local woff2 (covers Latin + Korean, weights 100–900).
 */
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@latest/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* Explicit face for the brand family so the system can resolve it to a
 * file. Same family as the split @import above — NOT a substitute; the
 * @import still serves the subsetted woff2 at runtime. This declaration
 * points at the official non-split variable file on the same CDN. */
@font-face {
  font-family: "Wanted Sans Variable";
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@latest/packages/wanted-sans/fonts/webfonts/variable/WantedSansVariable.woff2") format("woff2-variations");
}

:root {
  /* ───────── ATOMIC PALETTE ─────────────────────────────────── */

  /* Common — pure black + pure white */
  --wds-color-atomic-common-100: #FFFFFF;
  --wds-color-atomic-common-0:   #000000;

  /* Neutral — pure gray scale (16 steps) */
  --wds-color-atomic-neutral-99: #F7F7F7;
  --wds-color-atomic-neutral-95: #DCDCDC;
  --wds-color-atomic-neutral-90: #C4C4C4;
  --wds-color-atomic-neutral-80: #B0B0B0;
  --wds-color-atomic-neutral-70: #9B9B9B;
  --wds-color-atomic-neutral-60: #8A8A8A;
  --wds-color-atomic-neutral-50: #737373;
  --wds-color-atomic-neutral-40: #5C5C5C;
  --wds-color-atomic-neutral-30: #474747;
  --wds-color-atomic-neutral-22: #303030;
  --wds-color-atomic-neutral-20: #2A2A2A;
  --wds-color-atomic-neutral-15: #1C1C1C;
  --wds-color-atomic-neutral-10: #171717;
  --wds-color-atomic-neutral-5:  #0F0F0F;
  --wds-color-atomic-neutral-0:  #000000;

  /* Cool Neutral — the most-used neutral in product UI (23 steps) */
  --wds-color-atomic-coolneutral-99: #F7F7F8;
  --wds-color-atomic-coolneutral-98: #F4F4F5;
  --wds-color-atomic-coolneutral-97: #EAEBEC;
  --wds-color-atomic-coolneutral-96: #E1E2E4;
  --wds-color-atomic-coolneutral-95: #DBDCDF;
  --wds-color-atomic-coolneutral-90: #C2C4C8;
  --wds-color-atomic-coolneutral-80: #AEB0B6;
  --wds-color-atomic-coolneutral-70: #989BA2;
  --wds-color-atomic-coolneutral-60: #878A93;
  --wds-color-atomic-coolneutral-50: #70737C;
  --wds-color-atomic-coolneutral-40: #5A5C63;
  --wds-color-atomic-coolneutral-30: #46474C;
  --wds-color-atomic-coolneutral-25: #37383C;
  --wds-color-atomic-coolneutral-23: #333438;
  --wds-color-atomic-coolneutral-22: #2E2F33;
  --wds-color-atomic-coolneutral-20: #292A2D;
  --wds-color-atomic-coolneutral-17: #212225;
  --wds-color-atomic-coolneutral-15: #1B1C1E;
  --wds-color-atomic-coolneutral-10: #171719;
  --wds-color-atomic-coolneutral-7:  #141415;
  --wds-color-atomic-coolneutral-5:  #0F0F10;
  --wds-color-atomic-coolneutral-0:  #000000;

  /* Blue — primary brand hue */
  --wds-color-atomic-blue-99: #F7FBFF;
  --wds-color-atomic-blue-95: #EAF2FE;
  --wds-color-atomic-blue-90: #C9DEFE;
  --wds-color-atomic-blue-80: #9EC5FF;
  --wds-color-atomic-blue-70: #69A5FF;
  --wds-color-atomic-blue-65: #4F95FF;
  --wds-color-atomic-blue-60: #3385FF;
  --wds-color-atomic-blue-55: #1A75FF;
  --wds-color-atomic-blue-50: #0066FF;   /* ★ primary */
  --wds-color-atomic-blue-45: #005EEB;
  --wds-color-atomic-blue-40: #0054D1;
  --wds-color-atomic-blue-30: #003E9C;
  --wds-color-atomic-blue-20: #002966;
  --wds-color-atomic-blue-10: #001536;
  --wds-color-atomic-blue-0:  #000000;

  /* Red — destructive/error */
  --wds-color-atomic-red-99: #FFFAFA;
  --wds-color-atomic-red-95: #FEECEC;
  --wds-color-atomic-red-90: #FED5D5;
  --wds-color-atomic-red-80: #FFB5B5;
  --wds-color-atomic-red-70: #FF8C8C;
  --wds-color-atomic-red-60: #FF6363;
  --wds-color-atomic-red-50: #FF4242;
  --wds-color-atomic-red-40: #E52222;
  --wds-color-atomic-red-30: #B20C0C;
  --wds-color-atomic-red-20: #750404;
  --wds-color-atomic-red-10: #3B0101;
  --wds-color-atomic-red-0:  #000000;

  /* Green — positive/success */
  --wds-color-atomic-green-99: #F2FFF6;
  --wds-color-atomic-green-95: #D9FFE6;
  --wds-color-atomic-green-90: #ACFCC7;
  --wds-color-atomic-green-80: #7DF5A5;
  --wds-color-atomic-green-70: #49E57D;
  --wds-color-atomic-green-60: #1ED45A;
  --wds-color-atomic-green-50: #00BF40;
  --wds-color-atomic-green-40: #009632;
  --wds-color-atomic-green-30: #006E25;
  --wds-color-atomic-green-20: #004517;
  --wds-color-atomic-green-10: #00240C;
  --wds-color-atomic-green-0:  #000000;

  /* Orange */
  --wds-color-atomic-orange-99: #FFFCF7;
  --wds-color-atomic-orange-95: #FEF4E6;
  --wds-color-atomic-orange-90: #FEE6C6;
  --wds-color-atomic-orange-80: #FFD49C;
  --wds-color-atomic-orange-70: #FFC06E;
  --wds-color-atomic-orange-60: #FFA938;
  --wds-color-atomic-orange-50: #FF9200;
  --wds-color-atomic-orange-40: #D47800;
  --wds-color-atomic-orange-39: #D17600;
  --wds-color-atomic-orange-30: #9C5800;
  --wds-color-atomic-orange-20: #663A00;
  --wds-color-atomic-orange-10: #361E00;
  --wds-color-atomic-orange-0:  #000000;

  /* Red Orange — accent */
  --wds-color-atomic-redorange-99: #FFFAF7;
  --wds-color-atomic-redorange-95: #FEEEE5;
  --wds-color-atomic-redorange-90: #FEDBC6;
  --wds-color-atomic-redorange-80: #FFC09C;
  --wds-color-atomic-redorange-70: #FF9C63;
  --wds-color-atomic-redorange-60: #FF7B2E;
  --wds-color-atomic-redorange-50: #FF5E00;
  --wds-color-atomic-redorange-48: #F55A00;
  --wds-color-atomic-redorange-40: #CC4B00;
  --wds-color-atomic-redorange-30: #943600;
  --wds-color-atomic-redorange-20: #5C2200;
  --wds-color-atomic-redorange-10: #2E1100;
  --wds-color-atomic-redorange-0:  #000000;

  /* Lime */
  --wds-color-atomic-lime-99: #F8FFF2;
  --wds-color-atomic-lime-95: #E6FFD4;
  --wds-color-atomic-lime-90: #CCFCA9;
  --wds-color-atomic-lime-80: #AEF779;
  --wds-color-atomic-lime-70: #88F03E;
  --wds-color-atomic-lime-60: #6BE016;
  --wds-color-atomic-lime-50: #58CF04;
  --wds-color-atomic-lime-40: #48AD00;
  --wds-color-atomic-lime-37: #429E00;
  --wds-color-atomic-lime-30: #347D00;
  --wds-color-atomic-lime-20: #225200;
  --wds-color-atomic-lime-10: #112900;
  --wds-color-atomic-lime-0:  #000000;

  /* Cyan */
  --wds-color-atomic-cyan-99: #F7FEFF;
  --wds-color-atomic-cyan-95: #DEFAFF;
  --wds-color-atomic-cyan-90: #B5F4FF;
  --wds-color-atomic-cyan-80: #8AEDFF;
  --wds-color-atomic-cyan-70: #57DFF7;
  --wds-color-atomic-cyan-60: #28D0ED;
  --wds-color-atomic-cyan-50: #00BDDE;
  --wds-color-atomic-cyan-40: #0098B2;
  --wds-color-atomic-cyan-30: #006F82;
  --wds-color-atomic-cyan-20: #004854;
  --wds-color-atomic-cyan-10: #00252B;
  --wds-color-atomic-cyan-0:  #000000;

  /* Light Blue */
  --wds-color-atomic-lightblue-99: #F7FDFF;
  --wds-color-atomic-lightblue-95: #E5F6FE;
  --wds-color-atomic-lightblue-90: #C4ECFE;
  --wds-color-atomic-lightblue-80: #A1E1FF;
  --wds-color-atomic-lightblue-70: #70D2FF;
  --wds-color-atomic-lightblue-60: #3DC2FF;
  --wds-color-atomic-lightblue-50: #00AEFF;
  --wds-color-atomic-lightblue-40: #008DCF;
  --wds-color-atomic-lightblue-30: #006796;
  --wds-color-atomic-lightblue-20: #004261;
  --wds-color-atomic-lightblue-10: #002130;
  --wds-color-atomic-lightblue-0:  #000000;

  /* Violet */
  --wds-color-atomic-violet-99: #FBFAFF;
  --wds-color-atomic-violet-95: #F0ECFE;
  --wds-color-atomic-violet-90: #DBD3FE;
  --wds-color-atomic-violet-80: #C0B0FF;
  --wds-color-atomic-violet-70: #9E86FC;
  --wds-color-atomic-violet-60: #7D5EF7;
  --wds-color-atomic-violet-50: #6541F2;
  --wds-color-atomic-violet-45: #5B37ED;
  --wds-color-atomic-violet-40: #4F29E5;
  --wds-color-atomic-violet-30: #3A16C9;
  --wds-color-atomic-violet-20: #23098F;
  --wds-color-atomic-violet-10: #11024D;
  --wds-color-atomic-violet-0:  #000000;

  /* Purple */
  --wds-color-atomic-purple-99: #FEFBFF;
  --wds-color-atomic-purple-95: #F9EDFF;
  --wds-color-atomic-purple-90: #F2D6FF;
  --wds-color-atomic-purple-80: #E9BAFF;
  --wds-color-atomic-purple-70: #DE96FF;
  --wds-color-atomic-purple-60: #D478FF;
  --wds-color-atomic-purple-50: #CB59FF;
  --wds-color-atomic-purple-40: #AD36E3;
  --wds-color-atomic-purple-30: #861CB8;
  --wds-color-atomic-purple-20: #580A7D;
  --wds-color-atomic-purple-10: #290247;
  --wds-color-atomic-purple-0:  #000000;

  /* Pink */
  --wds-color-atomic-pink-99: #FFFAFE;
  --wds-color-atomic-pink-95: #FEECFB;
  --wds-color-atomic-pink-90: #FED3F7;
  --wds-color-atomic-pink-80: #FFB8F3;
  --wds-color-atomic-pink-70: #FF94ED;
  --wds-color-atomic-pink-60: #FA73E3;
  --wds-color-atomic-pink-50: #F553DA;
  --wds-color-atomic-pink-46: #E846CD;
  --wds-color-atomic-pink-40: #D331B8;
  --wds-color-atomic-pink-30: #A81690;
  --wds-color-atomic-pink-20: #730560;
  --wds-color-atomic-pink-10: #3D0133;
  --wds-color-atomic-pink-0:  #000000;

  /* Opacity scale — derived. multiply with a base color via rgba() */
  --wds-opacity-5:   0.05; /* @kind other */
  --wds-opacity-8:   0.08; /* @kind other */
  --wds-opacity-12:  0.12; /* @kind other */
  --wds-opacity-16:  0.16; /* @kind other */
  --wds-opacity-22:  0.22; /* @kind other */
  --wds-opacity-28:  0.28; /* @kind other */
  --wds-opacity-35:  0.35; /* @kind other */
  --wds-opacity-43:  0.43; /* @kind other */
  --wds-opacity-52:  0.52; /* @kind other */
  --wds-opacity-61:  0.61; /* @kind other */
  --wds-opacity-74:  0.74; /* @kind other */
  --wds-opacity-88:  0.88; /* @kind other */
  --wds-opacity-97:  0.97; /* @kind other */
  --wds-opacity-100: 1; /* @kind other */


  /* ───────── SEMANTIC TOKENS — LIGHT MODE ──────────────────── */

  /* Primary — actions, links, focus */
  --wds-color-primary-normal:     #0066FF;       /* blue-50 */
  --wds-color-primary-strong:     #005EEB;       /* blue-45 */
  --wds-color-primary-heavy:      #0054D1;       /* blue-40 */

  /* Label — text */
  --wds-color-label-normal:       #171719;       /* coolneutral-10 (cool, slightly blue-black) */
  --wds-color-label-strong:       #000000;
  --wds-color-label-neutral:      rgba(46,47,51,0.88);   /* coolneutral-22 @ 88% */
  --wds-color-label-alternative:  rgba(55,56,60,0.61);   /* coolneutral-25 @ 61% */
  --wds-color-label-assistive:    rgba(55,56,60,0.28);
  --wds-color-label-disable:      rgba(55,56,60,0.16);

  /* Background — surfaces (page → card → elevated) */
  --wds-color-background-normal:        #FFFFFF;
  --wds-color-background-alternative:   #F7F7F8;       /* coolneutral-99 */
  --wds-color-background-elevated:      #FFFFFF;
  --wds-color-background-elevated-alt:  #F4F4F5;       /* coolneutral-98 */

  /* Line — borders & dividers */
  --wds-color-line-normal:    rgba(112,115,124,0.22);   /* the hairline */
  --wds-color-line-neutral:   rgba(112,115,124,0.16);   /* button outline */
  --wds-color-line-strong:    rgba(112,115,124,0.5);
  --wds-color-line-solid:     #DBDCDF;                  /* coolneutral-95 */

  /* Status — semantic state colors */
  --wds-color-status-positive: #00BF40;                 /* green-50 */
  --wds-color-status-cautionary: #FF9200;               /* orange-50 */
  --wds-color-status-negative: #FF4242;                 /* red-50 */
  --wds-color-status-info:     #0066FF;                 /* blue-50 */

  /* Accent — chromatic surfaces beyond primary */
  --wds-color-accent-redorange:  #FF5E00;
  --wds-color-accent-orange:     #FF9200;
  --wds-color-accent-lime:       #58CF04;
  --wds-color-accent-green:      #00BF40;
  --wds-color-accent-cyan:       #00BDDE;
  --wds-color-accent-lightblue:  #00AEFF;
  --wds-color-accent-violet:     #6541F2;
  --wds-color-accent-purple:     #CB59FF;
  --wds-color-accent-pink:       #F553DA;
  --wds-color-accent-red:        #FF4242;

  /* Inverse — for use on dark surfaces inside light mode */
  --wds-color-inverse-label:      #FFFFFF;
  --wds-color-inverse-background: #171719;
  --wds-color-inverse-primary:    #3385FF;               /* blue-60 lifted */

  /* Component fills (default fills for filled buttons/chips/etc.) */
  --wds-color-fill-normal:    rgba(112,115,124,0.08);
  --wds-color-fill-strong:    rgba(112,115,124,0.16);
  --wds-color-fill-alternative: rgba(112,115,124,0.05);

  /* Dim — scrim/overlay behind modals */
  --wds-color-dim-normal:     rgba(23,23,25,0.52);
  --wds-color-dim-heavy:      rgba(23,23,25,0.74);


  /* ───────── TYPOGRAPHY ────────────────────────────────────── */

  --wds-font-family:       "Pretendard Variable", "Pretendard JP", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK KR", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wds-font-family-brand: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", "Pretendard", sans-serif;
  --wds-font-family-mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Each type style: --wds-text-<name> sets size + line-height + letter-spacing.
   * Pair with --wds-weight-<medium|semibold|bold>. Default body weight is MEDIUM. */
  --wds-text-display-1-size: 56px;   --wds-text-display-1-lh: 1.214; --wds-text-display-1-tracking: -0.0282em;
  --wds-text-display-2-size: 40px;   --wds-text-display-2-lh: 1.3;   --wds-text-display-2-tracking: -0.0282em;
  --wds-text-display-3-size: 36px;   --wds-text-display-3-lh: 1.334; --wds-text-display-3-tracking: -0.027em;

  --wds-text-title-1-size:   32px;   --wds-text-title-1-lh: 1.375;   --wds-text-title-1-tracking: -0.0253em;
  --wds-text-title-2-size:   28px;   --wds-text-title-2-lh: 1.358;   --wds-text-title-2-tracking: -0.0236em;
  --wds-text-title-3-size:   24px;   --wds-text-title-3-lh: 1.334;   --wds-text-title-3-tracking: -0.023em;

  --wds-text-heading-1-size: 22px;   --wds-text-heading-1-lh: 1.364; --wds-text-heading-1-tracking: -0.0194em;
  --wds-text-heading-2-size: 20px;   --wds-text-heading-2-lh: 1.4;   --wds-text-heading-2-tracking: -0.012em;

  --wds-text-headline-1-size: 18px;  --wds-text-headline-1-lh: 1.445; --wds-text-headline-1-tracking: -0.002em;
  --wds-text-headline-2-size: 17px;  --wds-text-headline-2-lh: 1.412; --wds-text-headline-2-tracking: 0em;

  --wds-text-body-1-size:    16px;   --wds-text-body-1-lh: 1.5;       --wds-text-body-1-tracking: 0.0057em;
  --wds-text-body-1-reading-lh: 1.625;
  --wds-text-body-2-size:    15px;   --wds-text-body-2-lh: 1.467;     --wds-text-body-2-tracking: 0.0096em;
  --wds-text-body-2-reading-lh: 1.6;

  --wds-text-label-1-size:   14px;   --wds-text-label-1-lh: 1.429;    --wds-text-label-1-tracking: 0.0145em;
  --wds-text-label-1-reading-lh: 1.571;
  --wds-text-label-2-size:   13px;   --wds-text-label-2-lh: 1.385;    --wds-text-label-2-tracking: 0.0194em;

  --wds-text-caption-1-size: 12px;   --wds-text-caption-1-lh: 1.334;  --wds-text-caption-1-tracking: 0.0252em;
  --wds-text-caption-2-size: 11px;   --wds-text-caption-2-lh: 1.273;  --wds-text-caption-2-tracking: 0.0311em;

  --wds-weight-regular:   400;
  --wds-weight-medium:    500;
  --wds-weight-semibold:  600;
  --wds-weight-bold:      700;
  --wds-weight-extrabold: 800;


  /* ───────── GEOMETRY ──────────────────────────────────────── */

  /* Radius scale */
  --wds-radius-2:   2px;
  --wds-radius-4:   4px;
  --wds-radius-6:   6px;
  --wds-radius-8:   8px;
  --wds-radius-10: 10px;   /* default button/input radius */
  --wds-radius-12: 12px;
  --wds-radius-16: 16px;
  --wds-radius-20: 20px;
  --wds-radius-24: 24px;   /* cards */
  --wds-radius-32: 32px;   /* large surfaces */
  --wds-radius-64: 64px;   /* section panels */
  --wds-radius-full: 9999px;

  /* Spacing scale — based on observed usage. The system isn't grid-100
   * but everything is a multiple of 4. */
  --wds-space-1:   4px;
  --wds-space-2:   8px;
  --wds-space-3:  12px;
  --wds-space-4:  16px;
  --wds-space-5:  20px;
  --wds-space-6:  24px;
  --wds-space-8:  32px;
  --wds-space-10: 40px;
  --wds-space-12: 48px;
  --wds-space-16: 64px;
  --wds-space-24: 96px;
  --wds-space-32: 128px;


  /* ───────── SHADOWS / ELEVATION ───────────────────────────── */

  --wds-shadow-1: 0 4px 6px -1px rgba(23,23,23,.06),  0 2px 4px -2px rgba(23,23,23,.06);
  --wds-shadow-2: 0 10px 15px -3px rgba(23,23,23,.07), 0 4px 6px -2px rgba(0,0,0,.07);
  --wds-shadow-3: 0 16px 24px -6px rgba(23,23,23,.08), 0 6px 10px -4px rgba(23,23,23,.08);
  --wds-shadow-4: 0 24px 38px -10px rgba(23,23,23,.12), 0 10px 15px -5px rgba(23,23,23,.1);

  /* Softer "Strong Outer" set — used on floating sheets/modals */
  --wds-shadow-strong-1: 0 2px 1.73px -2px rgba(23,23,23,.06),  0 4px 4.33px -1px rgba(23,23,23,.06);
  --wds-shadow-strong-2: 0 4px 3.46px -2px rgba(23,23,23,.07),  0 10px 10.39px -3px rgba(23,23,23,.07);
  --wds-shadow-strong-3: 0 6px 5.20px -4px rgba(23,23,23,.08),  0 16px 15.59px -6px rgba(23,23,23,.08);
  --wds-shadow-strong-4: 0 10px 8.66px -5px rgba(23,23,23,.1),  0 24px 24.25px -10px rgba(23,23,23,.12);


  /* ───────── MOTION ────────────────────────────────────────── */
  --wds-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --wds-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --wds-duration-quick: 120ms; /* @kind other */
  --wds-duration-normal: 200ms; /* @kind other */
  --wds-duration-slow: 320ms; /* @kind other */
}


/* ───────── DARK MODE — semantic re-mapping ──────────────────── */

[data-theme="dark"] {
  --wds-color-primary-normal: #3385FF;            /* blue-60 lifted for legibility */
  --wds-color-primary-strong: #1A75FF;
  --wds-color-primary-heavy:  #0066FF;

  --wds-color-label-normal:   #FFFFFF;
  --wds-color-label-strong:   #FFFFFF;
  --wds-color-label-neutral:  rgba(255,255,255,0.88);
  --wds-color-label-alternative: rgba(255,255,255,0.61);
  --wds-color-label-assistive:   rgba(255,255,255,0.28);
  --wds-color-label-disable:     rgba(255,255,255,0.16);

  --wds-color-background-normal:       #171719;   /* coolneutral-10 */
  --wds-color-background-alternative:  #1B1C1E;
  --wds-color-background-elevated:     #292A2D;
  --wds-color-background-elevated-alt: #333438;

  --wds-color-line-normal:   rgba(255,255,255,0.16);
  --wds-color-line-neutral:  rgba(255,255,255,0.12);
  --wds-color-line-strong:   rgba(255,255,255,0.32);
  --wds-color-line-solid:    #37383C;

  --wds-color-fill-normal:    rgba(255,255,255,0.08);
  --wds-color-fill-strong:    rgba(255,255,255,0.16);
  --wds-color-fill-alternative: rgba(255,255,255,0.05);

  --wds-color-inverse-label:      #171719;
  --wds-color-inverse-background: #FFFFFF;
  --wds-color-inverse-primary:    #0066FF;
}


/* ───────── BASELINE — apply WDS look to any page that includes
 * this CSS. Wrap with .wds-root if you want to scope it. */

.wds-root,
body.wds {
  font-family: var(--wds-font-family);
  font-weight: var(--wds-weight-medium);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.0057em;
  color: var(--wds-color-label-normal);
  background: var(--wds-color-background-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ───────── ELEMENT MAPPING — sensible defaults ───────────────── */

.wds-root h1, .wds-display-1 {
  font-size: var(--wds-text-display-1-size);
  line-height: var(--wds-text-display-1-lh);
  letter-spacing: var(--wds-text-display-1-tracking);
  font-weight: var(--wds-weight-bold);
  color: var(--wds-color-label-normal);
}
.wds-display-2 { font-size: var(--wds-text-display-2-size); line-height: var(--wds-text-display-2-lh); letter-spacing: var(--wds-text-display-2-tracking); font-weight: var(--wds-weight-bold); }
.wds-display-3 { font-size: var(--wds-text-display-3-size); line-height: var(--wds-text-display-3-lh); letter-spacing: var(--wds-text-display-3-tracking); font-weight: var(--wds-weight-bold); }

.wds-root h2, .wds-title-1 { font-size: var(--wds-text-title-1-size); line-height: var(--wds-text-title-1-lh); letter-spacing: var(--wds-text-title-1-tracking); font-weight: var(--wds-weight-bold); }
.wds-title-2 { font-size: var(--wds-text-title-2-size); line-height: var(--wds-text-title-2-lh); letter-spacing: var(--wds-text-title-2-tracking); font-weight: var(--wds-weight-bold); }
.wds-title-3 { font-size: var(--wds-text-title-3-size); line-height: var(--wds-text-title-3-lh); letter-spacing: var(--wds-text-title-3-tracking); font-weight: var(--wds-weight-bold); }

.wds-root h3, .wds-heading-1 { font-size: var(--wds-text-heading-1-size); line-height: var(--wds-text-heading-1-lh); letter-spacing: var(--wds-text-heading-1-tracking); font-weight: var(--wds-weight-bold); }
.wds-heading-2 { font-size: var(--wds-text-heading-2-size); line-height: var(--wds-text-heading-2-lh); letter-spacing: var(--wds-text-heading-2-tracking); font-weight: var(--wds-weight-bold); }

.wds-root h4, .wds-headline-1 { font-size: var(--wds-text-headline-1-size); line-height: var(--wds-text-headline-1-lh); letter-spacing: var(--wds-text-headline-1-tracking); font-weight: var(--wds-weight-semibold); }
.wds-headline-2 { font-size: var(--wds-text-headline-2-size); line-height: var(--wds-text-headline-2-lh); letter-spacing: var(--wds-text-headline-2-tracking); font-weight: var(--wds-weight-semibold); }

.wds-root p, .wds-body-1 { font-size: var(--wds-text-body-1-size); line-height: var(--wds-text-body-1-lh); letter-spacing: var(--wds-text-body-1-tracking); font-weight: var(--wds-weight-medium); }
.wds-body-1-reading { font-size: var(--wds-text-body-1-size); line-height: var(--wds-text-body-1-reading-lh); letter-spacing: var(--wds-text-body-1-tracking); font-weight: var(--wds-weight-medium); }
.wds-body-2 { font-size: var(--wds-text-body-2-size); line-height: var(--wds-text-body-2-lh); letter-spacing: var(--wds-text-body-2-tracking); font-weight: var(--wds-weight-medium); }

.wds-label-1 { font-size: var(--wds-text-label-1-size); line-height: var(--wds-text-label-1-lh); letter-spacing: var(--wds-text-label-1-tracking); font-weight: var(--wds-weight-medium); }
.wds-label-2 { font-size: var(--wds-text-label-2-size); line-height: var(--wds-text-label-2-lh); letter-spacing: var(--wds-text-label-2-tracking); font-weight: var(--wds-weight-medium); }
.wds-caption-1 { font-size: var(--wds-text-caption-1-size); line-height: var(--wds-text-caption-1-lh); letter-spacing: var(--wds-text-caption-1-tracking); font-weight: var(--wds-weight-medium); }
.wds-caption-2 { font-size: var(--wds-text-caption-2-size); line-height: var(--wds-text-caption-2-lh); letter-spacing: var(--wds-text-caption-2-tracking); font-weight: var(--wds-weight-medium); }

.wds-root code, .wds-mono { font-family: var(--wds-font-family-mono); font-size: 0.92em; }


/* ───────── BUTTONS — pinned defaults ─────────────────────────── */

.wds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 9px 20px;
  border-radius: var(--wds-radius-10);
  font-family: var(--wds-font-family);
  font-size: var(--wds-text-body-2-size);
  font-weight: var(--wds-weight-bold);
  line-height: var(--wds-text-body-2-lh);
  letter-spacing: 0.0096em;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--wds-duration-quick) var(--wds-easing-standard),
              opacity var(--wds-duration-quick) var(--wds-easing-standard),
              box-shadow var(--wds-duration-quick) var(--wds-easing-standard);
}
.wds-btn--primary {
  background: var(--wds-color-primary-normal);
  color: #fff;
}
.wds-btn--primary:hover { background: var(--wds-color-primary-strong); }
.wds-btn--primary:active { background: var(--wds-color-primary-heavy); }
.wds-btn--outlined {
  background: transparent;
  border: 1px solid var(--wds-color-line-neutral);
  color: var(--wds-color-primary-normal);
}
.wds-btn--outlined:hover { background: var(--wds-color-fill-normal); }
.wds-btn--text {
  background: transparent;
  color: var(--wds-color-primary-normal);
  padding: 9px 10px;
}
.wds-btn--text:hover { background: var(--wds-color-fill-normal); }
.wds-btn--neutral {
  background: var(--wds-color-fill-normal);
  color: var(--wds-color-label-normal);
}
.wds-btn--neutral:hover { background: var(--wds-color-fill-strong); }
.wds-btn--lg { height: 48px; padding: 13px 24px; font-size: var(--wds-text-body-1-size); }
.wds-btn--sm { height: 32px; padding: 5px 14px; font-size: var(--wds-text-label-1-size); }
.wds-btn--xs { height: 28px; padding: 4px 10px; font-size: var(--wds-text-label-2-size); border-radius: 8px; }
.wds-btn:disabled { opacity: 0.32; cursor: not-allowed; }


/* ───────── CARDS / INPUTS — pinned defaults ─────────────────── */

.wds-card {
  background: var(--wds-color-background-normal);
  border: 1px solid var(--wds-color-line-normal);
  border-radius: var(--wds-radius-24);
  padding: var(--wds-space-6);
}
.wds-card--elevated { box-shadow: var(--wds-shadow-2); border-color: transparent; }

.wds-input {
  height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--wds-color-line-normal);
  border-radius: var(--wds-radius-10);
  background: var(--wds-color-background-normal);
  color: var(--wds-color-label-normal);
  font-family: inherit;
  font-size: var(--wds-text-body-2-size);
  font-weight: var(--wds-weight-medium);
  letter-spacing: 0.0096em;
  outline: none;
  transition: border-color var(--wds-duration-quick) var(--wds-easing-standard);
}
.wds-input:focus {
  border-color: var(--wds-color-primary-normal);
  box-shadow: 0 0 0 2px rgba(0,102,255,0.16);
}
.wds-input::placeholder { color: var(--wds-color-label-alternative); }

.wds-divider {
  height: 1px;
  background: var(--wds-color-line-normal);
  border: 0;
}
.wds-divider--heavy { height: 4px; background: #000; }