/* ──────────────────────────────────────────────────────────────
   Wanted Design System — Tokens
   Source: Wanted Design System v3 (CC BY 4.0, Wanted Lab Inc.)
   ────────────────────────────────────────────────────────────── */

/* ── Fonts ────────────────────────────────────────────────── */
/* Pretendard JP is the system primary — Korean, English & Japanese
   in one face. Wanted Sans is the brand display face used for
   marketing surfaces and the Wanted lockup itself.

   Wanted Sans variable + Pretendard JP are loaded from CDN below.
   Drop OTF/TTF files into ./fonts/ to self-host.                  */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.4/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css");

:root {
  --font-sans: "Pretendard Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Wanted Sans Variable", "Wanted Sans", var(--font-sans);
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Atomic Color Palette ─────────────────────────────────
     Wanted is a cool-neutral system: grays carry a slight blue
     undertone (coolNeutral). Common is the absolute b/w pair.   */

  --common-100: #FFFFFF;
  --common-0:   #000000;

  /* Cool Neutral — primary gray family */
  --cool-neutral-99: #F7F7F8;
  --cool-neutral-98: #F4F4F5;
  --cool-neutral-97: #EAEBEC;
  --cool-neutral-96: #E1E2E4;
  --cool-neutral-95: #DBDCDF;
  --cool-neutral-90: #C2C4C8;
  --cool-neutral-80: #AEB0B6;
  --cool-neutral-70: #989BA2;
  --cool-neutral-60: #878A93;
  --cool-neutral-50: #70737C;
  --cool-neutral-40: #5A5C63;
  --cool-neutral-30: #46474C;
  --cool-neutral-25: #37383C;
  --cool-neutral-23: #333438;
  --cool-neutral-22: #2E2F33;
  --cool-neutral-20: #292A2D;
  --cool-neutral-17: #212225;
  --cool-neutral-15: #1B1C1E;
  --cool-neutral-10: #171719;
  --cool-neutral-7:  #141415;
  --cool-neutral-5:  #0F0F10;
  --cool-neutral-0:  #000000;

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

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

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

  /* Orange — caution / warning */
  --orange-99: #FFFCF7;
  --orange-95: #FEF4E6;
  --orange-90: #FEE6C6;
  --orange-80: #FFD49C;
  --orange-70: #FFC06E;
  --orange-60: #FFA938;
  --orange-50: #FF9200;   /* caution */
  --orange-39: #D17600;
  --orange-30: #9C5800;
  --orange-20: #663A00;
  --orange-10: #361E00;

  /* Red-Orange — energetic accent */
  --red-orange-50: #FF5E00;
  --red-orange-48: #F55A00;

  /* Lime / Cyan / Light Blue / Violet / Purple / Pink — accents */
  --lime-50: #58CF04;
  --lime-37: #429E00;
  --cyan-50: #00BDDE;
  --cyan-40: #0098B2;
  --light-blue-50: #00AEFF;
  --light-blue-40: #008DCF;
  --violet-50: #7D5EF7;
  --violet-45: #6541F2;
  --violet-40: #5B37ED;
  --purple-50: #CB59FF;
  --purple-40: #AD36E3;
  --pink-50: #F553DA;
  --pink-46: #E846CD;

  /* ── Semantic — Light (default) ───────────────────────────── */
  --primary-normal: var(--blue-50);
  --primary-strong: var(--blue-45);
  --primary-heavy:  var(--blue-40);

  /* Labels (foreground text) */
  --label-normal:    var(--cool-neutral-10);                  /* primary text */
  --label-strong:    var(--common-0);                         /* high-emphasis */
  --label-neutral:   rgba(46, 47, 51, 0.88);                  /* coolNeutral-22 @ 88 */
  --label-alternative: rgba(55, 56, 60, 0.61);                /* coolNeutral-25 @ 61 */
  --label-assistive: rgba(55, 56, 60, 0.28);                  /* coolNeutral-25 @ 28 */
  --label-disable:   rgba(55, 56, 60, 0.16);                  /* coolNeutral-25 @ 16 */

  /* Background */
  --background-normal:   var(--common-100);
  --background-alternative: var(--cool-neutral-99);
  --background-elevated: var(--common-100);
  --background-dimmer:   rgba(0, 0, 0, 0.56);

  /* Line / border */
  --line-normal:    rgba(112, 115, 124, 0.22);                /* default border */
  --line-neutral:   rgba(112, 115, 124, 0.16);
  --line-alternative: rgba(112, 115, 124, 0.08);
  --line-strong:    var(--cool-neutral-15);

  /* Interaction states */
  --interaction-inactive: var(--cool-neutral-50);
  --interaction-disable:  rgba(112, 115, 124, 0.22);

  /* Status */
  --status-positive: var(--green-50);
  --status-negative: var(--red-50);
  --status-cautionary: var(--orange-50);

  /* Accent backgrounds (subtle tinted surfaces) */
  --accent-bg-blue:   var(--blue-95);
  --accent-bg-red:    var(--red-95);
  --accent-bg-green:  var(--green-95);
  --accent-bg-orange: var(--orange-95);

  /* Inverse (dark-on-light callouts) */
  --inverse-primary: var(--blue-60);
  --inverse-label:   var(--common-100);
  --inverse-bg:      var(--cool-neutral-15);

  /* Component fills (subtle gray surfaces inside cards) */
  --fill-normal: rgba(112, 115, 124, 0.08);
  --fill-strong: rgba(112, 115, 124, 0.16);

  /* Static white/black (don't flip in dark mode) */
  --static-white: #FFFFFF;
  --static-black: #000000;

  /* ── Shadow / Elevation ───────────────────────────────────── */
  --shadow-xs: 0 1px 2px -1px rgba(23, 23, 23, 0.10);
  --shadow-sm: 0 4px 6px -1px rgba(23, 23, 23, 0.06), 0 2px 4px -2px rgba(23, 23, 23, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(23, 23, 23, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 24px -6px rgba(23, 23, 23, 0.08), 0 6px 10px -4px rgba(23, 23, 23, 0.08);
  --shadow-xl: 0 24px 38px -10px rgba(23, 23, 23, 0.12), 0 10px 15px -5px rgba(23, 23, 23, 0.10);

  /* Emphasized (deeper) shadows — used on raised CTAs */
  --shadow-emphasize-sm: 0 2px 4px rgba(23, 23, 23, 0.03), 0 4px 6.25px rgba(23, 23, 23, 0.03);
  --shadow-emphasize-md: 0 4px 5px rgba(23, 23, 23, 0.035), 0 10px 15px rgba(23, 23, 23, 0.035);
  --shadow-emphasize-lg: 0 6px 7.5px rgba(23, 23, 23, 0.04), 0 16px 22.5px rgba(23, 23, 23, 0.04);

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;   /* default for chips, small buttons */
  --radius-10: 10px;
  --radius-12: 12px;  /* inputs */
  --radius-16: 16px;  /* cards */
  --radius-20: 20px;
  --radius-24: 24px;  /* large surfaces, panels */
  --radius-32: 32px;  /* hero surfaces */
  --radius-full: 9999px;

  /* ── Spacing (4-pt grid) ──────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Typography Scale ─────────────────────────────────────────
     7 hierarchies × 18 styles, all in Pretendard JP unless noted. */

  /* Display */
  --type-display1-size: 56px;  --type-display1-lh: 1.25;    --type-display1-ls: -0.0145em;  --type-display1-weight: 700;
  --type-display2-size: 40px;  --type-display2-lh: 1.3;     --type-display2-ls: -0.0282em;  --type-display2-weight: 700;
  --type-display3-size: 36px;  --type-display3-lh: 1.334;   --type-display3-ls: -0.027em;   --type-display3-weight: 700;

  /* Title */
  --type-title1-size: 32px;    --type-title1-lh: 1.375;     --type-title1-ls: -0.0253em;   --type-title1-weight: 700;
  --type-title2-size: 28px;    --type-title2-lh: 1.358;     --type-title2-ls: -0.0236em;   --type-title2-weight: 700;
  --type-title3-size: 24px;    --type-title3-lh: 1.334;     --type-title3-ls: -0.023em;    --type-title3-weight: 700;

  /* Heading */
  --type-heading1-size: 22px;  --type-heading1-lh: 1.364;   --type-heading1-ls: -0.0194em; --type-heading1-weight: 700;
  --type-heading2-size: 20px;  --type-heading2-lh: 1.4;     --type-heading2-ls: -0.012em;  --type-heading2-weight: 700;

  /* Headline */
  --type-headline1-size: 18px; --type-headline1-lh: 1.445;  --type-headline1-ls: -0.002em; --type-headline1-weight: 600;
  --type-headline2-size: 17px; --type-headline2-lh: 1.412;  --type-headline2-ls: 0;         --type-headline2-weight: 600;

  /* Body */
  --type-body1-size: 16px;     --type-body1-lh: 1.5;        --type-body1-ls: 0.0057em;    --type-body1-weight: 500;
  --type-body1-reading-lh: 1.625;
  --type-body2-size: 15px;     --type-body2-lh: 1.467;      --type-body2-ls: 0.0096em;    --type-body2-weight: 500;
  --type-body2-reading-lh: 1.6;

  /* Label */
  --type-label1-size: 14px;    --type-label1-lh: 1.429;     --type-label1-ls: 0.0145em;   --type-label1-weight: 500;
  --type-label1-reading-lh: 1.571;
  --type-label2-size: 13px;    --type-label2-lh: 1.385;     --type-label2-ls: 0.0194em;   --type-label2-weight: 500;

  /* Caption */
  --type-caption1-size: 12px;  --type-caption1-lh: 1.334;   --type-caption1-ls: 0.0252em; --type-caption1-weight: 500;
  --type-caption2-size: 11px;  --type-caption2-lh: 1.273;   --type-caption2-ls: 0.0311em; --type-caption2-weight: 500;
}

/* ── Dark theme override (semantic tokens flip) ───────────────── */
:root[data-theme="dark"], .dark {
  --label-normal:      #F4F4F5;
  --label-strong:      #FFFFFF;
  --label-neutral:     rgba(244, 244, 245, 0.88);
  --label-alternative: rgba(244, 244, 245, 0.61);
  --label-assistive:   rgba(244, 244, 245, 0.28);
  --label-disable:     rgba(244, 244, 245, 0.16);

  --background-normal: var(--cool-neutral-7);
  --background-alternative: var(--cool-neutral-10);
  --background-elevated: var(--cool-neutral-15);

  --line-normal: rgba(244, 244, 245, 0.12);
  --line-strong: rgba(244, 244, 245, 0.40);

  --fill-normal: rgba(244, 244, 245, 0.06);
  --fill-strong: rgba(244, 244, 245, 0.12);

  --inverse-bg: var(--common-100);
}

/* ── Element type styles (semantic helpers) ───────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--label-normal);
  background: var(--background-normal);
  font-feature-settings: "ss01", "ss02", "cv09";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display1 { font: var(--type-display1-weight) var(--type-display1-size)/var(--type-display1-lh) var(--font-sans); letter-spacing: var(--type-display1-ls); }
.t-display2 { font: var(--type-display2-weight) var(--type-display2-size)/var(--type-display2-lh) var(--font-sans); letter-spacing: var(--type-display2-ls); }
.t-display3 { font: var(--type-display3-weight) var(--type-display3-size)/var(--type-display3-lh) var(--font-sans); letter-spacing: var(--type-display3-ls); }
.t-title1   { font: var(--type-title1-weight)   var(--type-title1-size)/var(--type-title1-lh)     var(--font-sans); letter-spacing: var(--type-title1-ls); }
.t-title2   { font: var(--type-title2-weight)   var(--type-title2-size)/var(--type-title2-lh)     var(--font-sans); letter-spacing: var(--type-title2-ls); }
.t-title3   { font: var(--type-title3-weight)   var(--type-title3-size)/var(--type-title3-lh)     var(--font-sans); letter-spacing: var(--type-title3-ls); }
.t-heading1 { font: var(--type-heading1-weight) var(--type-heading1-size)/var(--type-heading1-lh) var(--font-sans); letter-spacing: var(--type-heading1-ls); }
.t-heading2 { font: var(--type-heading2-weight) var(--type-heading2-size)/var(--type-heading2-lh) var(--font-sans); letter-spacing: var(--type-heading2-ls); }
.t-headline1 { font: var(--type-headline1-weight) var(--type-headline1-size)/var(--type-headline1-lh) var(--font-sans); letter-spacing: var(--type-headline1-ls); }
.t-headline2 { font: var(--type-headline2-weight) var(--type-headline2-size)/var(--type-headline2-lh) var(--font-sans); letter-spacing: var(--type-headline2-ls); }
.t-body1    { font: var(--type-body1-weight)    var(--type-body1-size)/var(--type-body1-lh)       var(--font-sans); letter-spacing: var(--type-body1-ls); }
.t-body2    { font: var(--type-body2-weight)    var(--type-body2-size)/var(--type-body2-lh)       var(--font-sans); letter-spacing: var(--type-body2-ls); }
.t-label1   { font: var(--type-label1-weight)   var(--type-label1-size)/var(--type-label1-lh)     var(--font-sans); letter-spacing: var(--type-label1-ls); }
.t-label2   { font: var(--type-label2-weight)   var(--type-label2-size)/var(--type-label2-lh)     var(--font-sans); letter-spacing: var(--type-label2-ls); }
.t-caption1 { font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans); letter-spacing: var(--type-caption1-ls); }
.t-caption2 { font: var(--type-caption2-weight) var(--type-caption2-size)/var(--type-caption2-lh) var(--font-sans); letter-spacing: var(--type-caption2-ls); }