/* ============================================================================
 * Wanted Design System — colors & type
 * Source of truth: github.com/wanteddev/montage-web (Montage / @wanteddev/wds)
 * Tokens lifted directly from packages/wds-theme/src
 *
 * Load Pretendard before this file:
 *   <link rel="stylesheet" crossorigin
 *     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css">
 *   <link rel="stylesheet" crossorigin
 *     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp-dynamic-subset.min.css">
 * ========================================================================== */

:root {
  /* -- ATOMIC ------------------------------------------------------------- */
  /* Common */
  --atomic-common-0: #000000;
  --atomic-common-100: #ffffff;

  /* Primary blue (50 is the hero brand color) */
  --atomic-blue-10: #001536;
  --atomic-blue-20: #002966;
  --atomic-blue-30: #003E9C;
  --atomic-blue-40: #0054D1;
  --atomic-blue-45: #005EEB;
  --atomic-blue-50: #0066FF;   /* PRIMARY */
  --atomic-blue-55: #1A75FF;
  --atomic-blue-60: #3385FF;
  --atomic-blue-65: #4F95FF;
  --atomic-blue-70: #69A5FF;
  --atomic-blue-80: #9EC5FF;
  --atomic-blue-90: #C9DEFE;
  --atomic-blue-95: #EAF2FE;
  --atomic-blue-99: #F7FBFF;

  /* Cool neutral (the workhorse grayscale, slightly cool) */
  --atomic-coolNeutral-5:  #0F0F10;
  --atomic-coolNeutral-7:  #141415;
  --atomic-coolNeutral-10: #171719;
  --atomic-coolNeutral-15: #1B1C1E;
  --atomic-coolNeutral-17: #212225;
  --atomic-coolNeutral-20: #292A2D;
  --atomic-coolNeutral-22: #2E2F33;
  --atomic-coolNeutral-23: #333438;
  --atomic-coolNeutral-25: #37383C;
  --atomic-coolNeutral-30: #46474C;
  --atomic-coolNeutral-40: #5A5C63;
  --atomic-coolNeutral-50: #70737C;
  --atomic-coolNeutral-60: #878A93;
  --atomic-coolNeutral-70: #989BA2;
  --atomic-coolNeutral-80: #AEB0B6;
  --atomic-coolNeutral-90: #C2C4C8;
  --atomic-coolNeutral-95: #DBDCDF;
  --atomic-coolNeutral-96: #E1E2E4;
  --atomic-coolNeutral-97: #EAEBEC;
  --atomic-coolNeutral-98: #F4F4F5;
  --atomic-coolNeutral-99: #F7F7F8;

  /* Status & accent (selected stops only — full set in atomic palette) */
  --atomic-red-50:       #FF4242;
  --atomic-red-40:       #E52222;
  --atomic-orange-50:    #FF9200;
  --atomic-orange-39:    #D17600;
  --atomic-green-50:     #00BF40;
  --atomic-green-40:     #009632;
  --atomic-redOrange-50: #FF5E00;
  --atomic-redOrange-48: #F55A00;
  --atomic-lime-50:      #58CF04;
  --atomic-cyan-50:      #00BDDE;
  --atomic-lightBlue-50: #00AEFF;
  --atomic-violet-50:    #6541F2;
  --atomic-violet-45:    #5B37ED;
  --atomic-purple-50:    #CB59FF;
  --atomic-pink-50:      #F553DA;

  /* -- SEMANTIC (light theme — default) ----------------------------------- */
  --semantic-static-white: #ffffff;
  --semantic-static-black: #000000;

  --semantic-primary-normal: var(--atomic-blue-50);
  --semantic-primary-strong: var(--atomic-blue-45);
  --semantic-primary-heavy:  var(--atomic-blue-40);

  /* Label = foreground text. Opacity tokens collapsed into rgba where needed */
  --semantic-label-normal:      var(--atomic-coolNeutral-10);
  --semantic-label-strong:      var(--atomic-common-0);
  --semantic-label-neutral:     rgba(46, 47, 51, 0.88);   /* coolNeutral-22 88% */
  --semantic-label-alternative: rgba(55, 56, 60, 0.61);   /* coolNeutral-25 61% */
  --semantic-label-assistive:   rgba(55, 56, 60, 0.28);
  --semantic-label-disable:     rgba(55, 56, 60, 0.16);

  --semantic-background-normal-normal:           var(--atomic-common-100);
  --semantic-background-normal-alternative:      var(--atomic-coolNeutral-99);
  --semantic-background-elevated-normal:         var(--atomic-common-100);
  --semantic-background-elevated-alternative:    var(--atomic-coolNeutral-99);
  --semantic-background-transparent-normal:      rgba(255, 255, 255, 0.08);
  --semantic-background-transparent-alternative: rgba(255, 255, 255, 0.28);

  --semantic-interaction-inactive: var(--atomic-coolNeutral-70);
  --semantic-interaction-disable:  var(--atomic-coolNeutral-98);

  --semantic-line-normal-normal:      rgba(112, 115, 124, 0.22);  /* coolNeutral-50 */
  --semantic-line-normal-neutral:     rgba(112, 115, 124, 0.16);
  --semantic-line-normal-alternative: rgba(112, 115, 124, 0.08);
  --semantic-line-solid-normal:       var(--atomic-coolNeutral-96);
  --semantic-line-solid-neutral:      var(--atomic-coolNeutral-97);
  --semantic-line-solid-alternative:  var(--atomic-coolNeutral-98);

  --semantic-status-positive:   var(--atomic-green-50);
  --semantic-status-cautionary: var(--atomic-orange-50);
  --semantic-status-negative:   var(--atomic-red-50);

  --semantic-fill-normal:      rgba(112, 115, 124, 0.08);
  --semantic-fill-strong:      rgba(112, 115, 124, 0.16);
  --semantic-fill-alternative: rgba(112, 115, 124, 0.05);

  --semantic-inverse-primary:    var(--atomic-blue-60);
  --semantic-inverse-background: var(--atomic-coolNeutral-15);
  --semantic-inverse-label:      var(--atomic-coolNeutral-99);

  --semantic-material-dimmer: rgba(23, 23, 25, 0.52);

  /* Elevation — Montage uses very soft shadows that "lift" cards subtly. */
  --shadow-xsmall: 0px 1px 2px -1px rgba(23, 23, 23, 0.10);
  --shadow-small:  0px 2px 4px -2px rgba(23, 23, 23, 0.06), 0px 4px 6px -1px rgba(23, 23, 23, 0.06);
  --shadow-medium: 0px 4px 6px -2px rgba(23, 23, 23, 0.07), 0px 10px 15px -3px rgba(23, 23, 23, 0.07);
  --shadow-large:  0px 6px 10px -4px rgba(23, 23, 23, 0.08), 0px 16px 24px -6px rgba(23, 23, 23, 0.08);
  --shadow-xlarge: 0px 10px 15px -5px rgba(23, 23, 23, 0.10), 0px 24px 38px -10px rgba(23, 23, 23, 0.12);
  --shadow-spread-small:  0px 0px 60px 0px rgba(23, 23, 23, 0.10);
  --shadow-spread-medium: 0px 15px 75px 0px rgba(23, 23, 23, 0.16);

  /* -- SPACING scale (px) -------------------------------------------------- */
  --space-0:  0px;
  --space-1:  1px;
  --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-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;

  /* -- RADII --------------------------------------------------------------- */
  --radius-6:  6px;   /* xs chip */
  --radius-8:  8px;   /* small button / chip */
  --radius-10: 10px;  /* medium button / large chip */
  --radius-12: 12px;  /* large button / card / text-field */
  --radius-16: 16px;  /* large card */
  --radius-20: 20px;
  --radius-full: 999px;

  /* -- BREAKPOINTS --------------------------------------------------------- */
  --bp-sm: 768px;
  --bp-md: 992px;
  --bp-lg: 1200px;
  --bp-xl: 1600px;

  /* -- TYPOGRAPHY ---------------------------------------------------------- */
  --font-sans:
    'Pretendard JP Variable', 'Pretendard JP', 'Pretendard Variable',
    Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
    'Malgun Gothic', sans-serif;
  --font-mono:
    'JetBrains Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo,
    Consolas, monospace;

  /* The Montage type ramp. font-size / line-height / letter-spacing
     pulled from packages/wds/src/components/typography/style.ts */
  --type-display1:   700 3.5rem/4.5rem    var(--font-sans); /* 56 / 72  */
  --type-display2:   700 2.5rem/3.25rem   var(--font-sans); /* 40 / 52  */
  --type-display3:   700 2.25rem/3rem     var(--font-sans); /* 36 / 48  */
  --type-title1:     700 2rem/2.75rem     var(--font-sans); /* 32 / 44  */
  --type-title2:     700 1.75rem/2.375rem var(--font-sans); /* 28 / 38  */
  --type-title3:     700 1.5rem/2rem      var(--font-sans); /* 24 / 32  */
  --type-heading1:   600 1.375rem/1.875rem var(--font-sans);/* 22 / 30  */
  --type-heading2:   600 1.25rem/1.75rem  var(--font-sans); /* 20 / 28  */
  --type-headline1:  600 1.125rem/1.625rem var(--font-sans);/* 18 / 26  */
  --type-headline2:  600 1.0625rem/1.5rem var(--font-sans); /* 17 / 24  */
  --type-body1:      400 1rem/1.5rem      var(--font-sans); /* 16 / 24  */
  --type-body1-read: 400 1rem/1.625rem    var(--font-sans); /* 16 / 26  */
  --type-body2:      400 0.9375rem/1.375rem var(--font-sans); /* 15 / 22 */
  --type-body2-read: 400 0.9375rem/1.5rem var(--font-sans); /* 15 / 24  */
  --type-label1:     500 0.875rem/1.25rem var(--font-sans); /* 14 / 20  */
  --type-label2:     500 0.8125rem/1.125rem var(--font-sans); /* 13 / 18 */
  --type-caption1:   500 0.75rem/1rem     var(--font-sans); /* 12 / 16  */
  --type-caption2:   500 0.6875rem/0.875rem var(--font-sans); /* 11 / 14 */

  /* Letter spacing per variant (Pretendard is tight-set). */
  --ls-display1:  -0.0319em;
  --ls-display2:  -0.0282em;
  --ls-display3:  -0.0270em;
  --ls-title1:    -0.0253em;
  --ls-title2:    -0.0236em;
  --ls-title3:    -0.0230em;
  --ls-heading1:  -0.0194em;
  --ls-heading2:  -0.0120em;
  --ls-headline1: -0.0020em;
  --ls-headline2:  0;
  --ls-body1:      0.0057em;
  --ls-body2:      0.0096em;
  --ls-label1:     0.0145em;
  --ls-label2:     0.0194em;
  --ls-caption1:   0.0252em;
  --ls-caption2:   0.0311em;

  /* -- Z-INDEX ------------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  10;
  --z-fixed:   20;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* Dark theme — opt in via [data-theme="dark"] on root */
[data-theme="dark"] {
  --semantic-primary-normal: var(--atomic-blue-60);
  --semantic-primary-strong: #1A75FF;
  --semantic-primary-heavy:  var(--atomic-blue-50);

  --semantic-label-normal:      var(--atomic-coolNeutral-99);
  --semantic-label-strong:      var(--atomic-common-100);
  --semantic-label-neutral:     rgba(194, 196, 200, 0.88);
  --semantic-label-alternative: rgba(174, 176, 182, 0.61);
  --semantic-label-assistive:   rgba(174, 176, 182, 0.28);
  --semantic-label-disable:     rgba(152, 155, 162, 0.16);

  --semantic-background-normal-normal:        var(--atomic-coolNeutral-15);
  --semantic-background-normal-alternative:   var(--atomic-coolNeutral-5);
  --semantic-background-elevated-normal:      var(--atomic-coolNeutral-17);
  --semantic-background-elevated-alternative: var(--atomic-coolNeutral-7);

  --semantic-line-solid-normal:      var(--atomic-coolNeutral-25);
  --semantic-line-solid-neutral:     var(--atomic-coolNeutral-23);
  --semantic-line-solid-alternative: var(--atomic-coolNeutral-22);
}

/* ============================================================================
 * Element baseline — apply Pretendard + Montage tokens to bare HTML.
 * Drop this file in once and every <h1>, <p>, <button> etc. inherits the system.
 * ========================================================================== */

html, body {
  font: var(--type-body1);
  letter-spacing: var(--ls-body1);
  color: var(--semantic-label-normal);
  background: var(--semantic-background-normal-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss10' 1; /* Pretendard tabular numerals */
}

h1 { font: var(--type-title1);    letter-spacing: var(--ls-title1);    margin: 0; }
h2 { font: var(--type-title2);    letter-spacing: var(--ls-title2);    margin: 0; }
h3 { font: var(--type-title3);    letter-spacing: var(--ls-title3);    margin: 0; }
h4 { font: var(--type-heading1);  letter-spacing: var(--ls-heading1);  margin: 0; }
h5 { font: var(--type-heading2);  letter-spacing: var(--ls-heading2);  margin: 0; }
h6 { font: var(--type-headline1); letter-spacing: var(--ls-headline1); margin: 0; }
p  { font: var(--type-body1);     letter-spacing: var(--ls-body1);     margin: 0; }

small  { font: var(--type-label1);    letter-spacing: var(--ls-label1); }
code   { font-family: var(--font-mono); font-size: 0.875em; }

a {
  color: var(--semantic-primary-normal);
  text-decoration: none;
}
a:hover { color: var(--semantic-primary-strong); }

*, *::before, *::after { box-sizing: border-box; }