/* ============================================================
 * Wanted Design System — Tokens
 * Source: Wanted Design System (Community).fig
 * ------------------------------------------------------------
 * Two layers:
 *   1. Atomic palette (`--color-*-NN`) — raw color steps.
 *   2. Semantic tokens (`--fg-*`, `--bg-*`, `--line-*`, etc.)
 *      — purpose-driven; these are what you should use in UI.
 * ============================================================ */

/* ---------- 1. FONTS ----------
 * Primary face: Pretendard JP (CJK + Latin).
 * Display face: Wanted Sans (used for marketing / wordmark settings).
 * Both are loaded as web fonts in fonts/fonts.css.
 * ------------------------------------------------------------ */
@import url("./fonts/fonts.css");

:root {
  /* ---------- 2. ATOMIC PALETTE ---------- */
  /* Common */
  --color-common-100: #FFFFFF;
  --color-common-0:   #000000;

  /* Neutral */
  --color-neutral-100: #FFFFFF;
  --color-neutral-99:  #F7F7F7;
  --color-neutral-95:  #DCDCDC;
  --color-neutral-90:  #C4C4C4;
  --color-neutral-80:  #B0B0B0;
  --color-neutral-70:  #9B9B9B;
  --color-neutral-60:  #8A8A8A;
  --color-neutral-50:  #737373;
  --color-neutral-40:  #5C5C5C;
  --color-neutral-30:  #474747;
  --color-neutral-25:  #303030;
  --color-neutral-22:  #2A2A2A;
  --color-neutral-15:  #1C1C1C;
  --color-neutral-10:  #171717;
  --color-neutral-5:   #0F0F0F;
  --color-neutral-0:   #000000;

  /* Cool Neutral — the workhorse gray, used for label/line/fill */
  --color-coolNeutral-100: #FFFFFF;
  --color-coolNeutral-99:  #F7F7F8;
  --color-coolNeutral-98:  #F4F4F5;
  --color-coolNeutral-96:  #EAEBEC;
  --color-coolNeutral-94:  #E1E2E4;
  --color-coolNeutral-92:  #DBDCDF;
  --color-coolNeutral-85:  #C2C4C8;
  --color-coolNeutral-78:  #AEB0B6;
  --color-coolNeutral-70:  #989BA2;
  --color-coolNeutral-60:  #878A93;
  --color-coolNeutral-50:  #70737C;
  --color-coolNeutral-40:  #5A5C63;
  --color-coolNeutral-30:  #46474C;
  --color-coolNeutral-25:  #37383C;
  --color-coolNeutral-22:  #333438;
  --color-coolNeutral-20:  #2E2F33;
  --color-coolNeutral-18:  #292A2D;
  --color-coolNeutral-15:  #212225;
  --color-coolNeutral-12:  #1B1C1E;
  --color-coolNeutral-10:  #171719;
  --color-coolNeutral-8:   #141415;
  --color-coolNeutral-5:   #0F0F10;
  --color-coolNeutral-0:   #000000;

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

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

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

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

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

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

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

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

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

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

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

  /* ---------- 3. OPACITY SCALE ----------
   * Designed to be applied on top of cool-neutral 25 / 50 to
   * produce the layered alpha tokens shown in semantic specs. */
  --opacity-5:  0.05;
  --opacity-8:  0.08;
  --opacity-12: 0.12;
  --opacity-16: 0.16;
  --opacity-22: 0.22;
  --opacity-28: 0.28;
  --opacity-35: 0.35;
  --opacity-43: 0.43;
  --opacity-52: 0.52;
  --opacity-61: 0.61;
  --opacity-74: 0.74;
  --opacity-88: 0.88;
  --opacity-97: 0.97;

  /* ---------- 4. SEMANTIC — LIGHT THEME ---------- */
  /* Primary (brand action) */
  --primary-normal:    var(--color-blue-50);
  --primary-strong:    var(--color-blue-45);
  --primary-heavy:     var(--color-blue-40);

  /* Label / foreground text */
  --fg-normal:        rgba(46, 47, 51, 0.88);   /* coolNeutral-22 @ 88% */
  --fg-strong:        var(--color-coolNeutral-15);
  --fg-neutral:       rgba(55, 56, 60, 0.88);
  --fg-alternative:   rgba(55, 56, 60, 0.61);
  --fg-assistive:     rgba(55, 56, 60, 0.28);
  --fg-disable:       rgba(55, 56, 60, 0.16);

  /* Background */
  --bg-normal:           #FFFFFF;
  --bg-alternative:      #F7F7F8;             /* coolNeutral-99 */
  --bg-elevated-normal:  #FFFFFF;
  --bg-elevated-alt:     #F7F7F8;

  /* Line / border */
  --line-normal-normal:    rgba(112, 115, 124, 0.22);
  --line-normal-neutral:   rgba(112, 115, 124, 0.16);
  --line-normal-alt:       rgba(112, 115, 124, 0.08);
  --line-solid-normal:     #C2C4C8;          /* coolNeutral-85 */
  --line-solid-neutral:    #DBDCDF;
  --line-solid-alt:        #EAEBEC;

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

  /* Interaction */
  --interaction-inactive: var(--color-coolNeutral-50);
  --interaction-disable:  var(--color-coolNeutral-98);

  /* Static (theme-invariant) */
  --static-white: #FFFFFF;
  --static-black: #000000;

  /* Inverse — used for dark surfaces inside a light theme */
  --inverse-bg:      var(--color-coolNeutral-15);
  --inverse-fg:      var(--color-coolNeutral-99);
  --inverse-primary: var(--color-blue-60);

  /* Accent colors for charts, tags, badges */
  --accent-redOrange: var(--color-redOrange-50);
  --accent-orange:    var(--color-orange-50);
  --accent-lime:      var(--color-lime-50);
  --accent-green:     var(--color-green-50);
  --accent-cyan:      var(--color-cyan-50);
  --accent-lightBlue: var(--color-lightBlue-50);
  --accent-blue:      var(--color-blue-50);
  --accent-violet:    var(--color-violet-50);
  --accent-purple:    var(--color-purple-50);
  --accent-pink:      var(--color-pink-50);

  /* Material / scrim — a slightly warm dim for modal backdrops */
  --material-dimmer: rgba(23, 25, 28, 0.52);

  /* ---------- 5. SHADOWS ----------
   * Shadows are very soft and short — they layer rather than
   * pop; used on cards, popovers, sticky headers. */
  --shadow-emphasize:
    0 1px 4px 0 rgba(0,0,0,0.08),
    0 0 1px 0 rgba(0,0,0,0.08);
  --shadow-strong:
    0 6px 24px -4px rgba(0,0,0,0.12),
    0 0 1px 0 rgba(0,0,0,0.08);
  --shadow-heavy:
    0 12px 32px -6px rgba(0,0,0,0.16),
    0 0 1px 0 rgba(0,0,0,0.08);

  /* ---------- 6. RADII ----------
   * Wanted's curves are bold. Cards use 24/32; the page-level
   * artboard radius is 60–64. Buttons use 6/10/14 by size. */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 10px;
  --radius-5: 12px;
  --radius-6: 14px;
  --radius-7: 16px;
  --radius-8: 24px;
  --radius-9: 32px;
  --radius-10: 60px;
  --radius-pill: 9999px;

  /* ---------- 7. SPACING ----------
   * 4-pt grid. Top-level art-board gutters jump to 64/96/128. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- 8. TYPE BASE ---------- */
  --font-sans: "Pretendard JP", "Pretendard Variable", "Pretendard",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Wanted Sans Variable", "Wanted Sans", var(--font-sans);
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono",
    "IBM Plex Mono", Menlo, Consolas, monospace;
}

/* ---------- 9. SEMANTIC TYPE SCALE ----------
 * The Wanted scale is dense (12 sizes) and tight (negative
 * tracking on display sizes). All types use `font-feature-settings:
 * 'ss01' on 'ss06' on 'ss07' on;` in production for stylistic
 * alternates — Pretendard JP exposes them. */

.t-display-1 { font-family: var(--font-sans); font-weight: 700; font-size: 56px; line-height: 1.286; letter-spacing: -0.0319em; }
.t-display-2 { font-family: var(--font-sans); font-weight: 700; font-size: 40px; line-height: 1.300; letter-spacing: -0.0282em; }
.t-display-3 { font-family: var(--font-sans); font-weight: 700; font-size: 36px; line-height: 1.334; letter-spacing: -0.0270em; }

/* Light editorial display — uses brand-supplied Pretendard ExtraLight & Thin
 * OTFs. Reserved for marquee headlines (heroes, magazine-style features) where
 * a delicate, airy headline reads better than the bold default. */
.t-display-extralight { font-family: "Pretendard", var(--font-sans); font-weight: 200; font-size: 64px; line-height: 1.150; letter-spacing: -0.0320em; }
.t-display-thin       { font-family: "Pretendard", var(--font-sans); font-weight: 100; font-size: 80px; line-height: 1.100; letter-spacing: -0.0350em; }

.t-title-1   { font-family: var(--font-sans); font-weight: 700; font-size: 32px; line-height: 1.375; letter-spacing: -0.0253em; }
.t-title-2   { font-family: var(--font-sans); font-weight: 700; font-size: 28px; line-height: 1.358; letter-spacing: -0.0236em; }
.t-title-3   { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.334; letter-spacing: -0.0230em; }

.t-heading-1 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.364; letter-spacing: -0.0194em; }
.t-heading-2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.400; letter-spacing: -0.0120em; }

.t-headline-1 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.445; letter-spacing: -0.0020em; }
.t-headline-2 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.412; letter-spacing: 0em; }

.t-body-1-normal  { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.500; letter-spacing: 0.0057em; }
.t-body-1-reading { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.625; letter-spacing: 0.0057em; }
.t-body-2-normal  { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.467; letter-spacing: 0.0096em; }
.t-body-2-reading { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.600; letter-spacing: 0.0096em; }

.t-label-1   { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.429; letter-spacing: 0.0145em; }
.t-label-2   { font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 1.385; letter-spacing: 0.0194em; }

.t-caption-1 { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.334; letter-spacing: 0.0252em; }
.t-caption-2 { font-family: var(--font-sans); font-weight: 500; font-size: 11px; line-height: 1.273; letter-spacing: 0.0311em; }

.t-mono { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 1.45; }

/* ---------- 10. ELEMENT DEFAULTS ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  background: var(--bg-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'ss02' on, 'ss06' on, 'ss07' on;
}

h1 { font: 700 36px/1.334 var(--font-sans); letter-spacing: -0.027em; margin: 0; color: var(--fg-strong); }
h2 { font: 700 28px/1.358 var(--font-sans); letter-spacing: -0.024em; margin: 0; color: var(--fg-strong); }
h3 { font: 700 22px/1.364 var(--font-sans); letter-spacing: -0.019em; margin: 0; color: var(--fg-strong); }
h4 { font: 600 18px/1.445 var(--font-sans); letter-spacing: -0.002em; margin: 0; color: var(--fg-strong); }
p  { font: 500 16px/1.500 var(--font-sans); letter-spacing: 0.006em; margin: 0; color: var(--fg-normal); }
small { font: 500 13px/1.385 var(--font-sans); letter-spacing: 0.019em; color: var(--fg-alternative); }
code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-alternative); padding: 0.1em 0.35em; border-radius: 4px; }

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