/* ============================================================
   Wanted Design System — Colors & Type
   Source: Wanted Design System (Community), CC BY 4.0
   Wanted is a Korean career/job platform. Korean is primary,
   English secondary. Pretendard JP is the workhorse font.
   ============================================================ */

/* -----------------------------------------------------------
   FONTS — loaded from CDN.
   Pretendard JP   → primary UI typeface (Korean + Japanese + Latin)
   Wanted Sans     → display / marketing / brand moments
   SF Mono fallback → ui-monospace stack
   ----------------------------------------------------------- */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-jp.min.css");

/* Wanted Sans — loaded from local brand-font files. */
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-Regular.otf") format("opentype"),
       url("fonts/WantedSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-Medium.otf") format("opentype"),
       url("fonts/WantedSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-SemiBold.otf") format("opentype"),
       url("fonts/WantedSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-Bold.otf") format("opentype"),
       url("fonts/WantedSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-ExtraBold.otf") format("opentype"),
       url("fonts/WantedSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-Black.otf") format("opentype"),
       url("fonts/WantedSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wanted Sans";
  src: url("fonts/WantedSans-ExtraBlack.otf") format("opentype"),
       url("fonts/WantedSans-ExtraBlack.ttf") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     FONT STACKS
     ============================================================ */
  --font-sans:       "Pretendard JP Variable", "Pretendard JP", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-display:    "Wanted Sans", "Pretendard JP Variable", "Pretendard JP", system-ui, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ============================================================
     ATOMIC COLORS  (color-global-*)
     14-step scales. Names indexed roughly to 50–1000 in the source,
     here flattened to step indices 0–13 for sane authoring.
     ============================================================ */

  /* Common */
  --color-common-0:        #FFFFFF;
  --color-common-100:      #000000;

  /* Neutral (pure gray) */
  --color-neutral-100: #F7F7F7;
  --color-neutral-200: #DCDCDC;
  --color-neutral-300: #C4C4C4;
  --color-neutral-400: #B0B0B0;
  --color-neutral-500: #9B9B9B;
  --color-neutral-600: #8A8A8A;
  --color-neutral-700: #737373;
  --color-neutral-800: #5C5C5C;
  --color-neutral-900: #474747;
  --color-neutral-1000:#303030;
  --color-neutral-1100:#2A2A2A;
  --color-neutral-1200:#1C1C1C;
  --color-neutral-1300:#171717;
  --color-neutral-1400:#0F0F0F;

  /* Cool Neutral — workhorse UI gray, slight cool tint */
  --color-coolNeutral-100:  #F7F7F8;
  --color-coolNeutral-200:  #F4F4F5;
  --color-coolNeutral-300:  #EAEBEC;
  --color-coolNeutral-400:  #E1E2E4;
  --color-coolNeutral-500:  #DBDCDF;
  --color-coolNeutral-600:  #C2C4C8;
  --color-coolNeutral-700:  #AEB0B6;
  --color-coolNeutral-800:  #989BA2;
  --color-coolNeutral-900:  #878A93;
  --color-coolNeutral-1000: #70737C;
  --color-coolNeutral-1100: #5A5C63;
  --color-coolNeutral-1200: #46474C;
  --color-coolNeutral-1300: #37383C;
  --color-coolNeutral-1400: #333438;
  --color-coolNeutral-1500: #2E2F33;
  --color-coolNeutral-1600: #292A2D;
  --color-coolNeutral-1700: #212225;
  --color-coolNeutral-1800: #1B1C1E;
  --color-coolNeutral-1900: #171719;
  --color-coolNeutral-2000: #141415;
  --color-coolNeutral-2100: #0F0F10;

  /* Blue — brand primary */
  --color-blue-100:  #F7FBFF;
  --color-blue-200:  #EAF2FE;
  --color-blue-300:  #C9DEFE;
  --color-blue-400:  #9EC5FF;
  --color-blue-500:  #69A5FF;
  --color-blue-600:  #4F95FF;
  --color-blue-700:  #3385FF;
  --color-blue-800:  #1A75FF;
  --color-blue-900:  #0066FF;   /* PRIMARY  */
  --color-blue-1000: #005EEB;
  --color-blue-1100: #0054D1;
  --color-blue-1200: #003E9C;
  --color-blue-1300: #002966;
  --color-blue-1400: #001536;

  /* Red */
  --color-red-100:  #FFFAFA;
  --color-red-200:  #FEECEC;
  --color-red-300:  #FED5D5;
  --color-red-400:  #FFB5B5;
  --color-red-500:  #FF8C8C;
  --color-red-600:  #FF6363;
  --color-red-700:  #FF4242;   /* DANGER */
  --color-red-800:  #E52222;
  --color-red-900:  #B20C0C;
  --color-red-1000: #750404;
  --color-red-1100: #3B0101;

  /* Green */
  --color-green-100:  #F2FFF6;
  --color-green-200:  #D9FFE6;
  --color-green-300:  #ACFCC7;
  --color-green-400:  #7DF5A5;
  --color-green-500:  #49E57D;
  --color-green-600:  #1ED45A;
  --color-green-700:  #00BF40;   /* SUCCESS */
  --color-green-800:  #009632;
  --color-green-900:  #006E25;
  --color-green-1000: #004517;
  --color-green-1100: #00240C;

  /* Yellow / Orange (warning) */
  --color-yellow-100: #FFFCF7;
  --color-yellow-200: #FEF4E6;
  --color-yellow-300: #FEE6C6;
  --color-yellow-400: #FFD49C;
  --color-yellow-500: #FFC06E;
  --color-yellow-600: #FFA938;
  --color-yellow-700: #FF9200;   /* WARNING */
  --color-yellow-800: #D47800;
  --color-yellow-900: #9C5800;

  --color-orange-700: #FF5E00;   /* RedOrange accent */
  --color-orange-800: #F55A00;

  --color-cyan-700:      #00BDDE;
  --color-lightBlue-700: #00AEFF;
  --color-violet-700:    #6541F2;
  --color-violet-800:    #5B37ED;
  --color-purple-700:    #CB59FF;
  --color-pink-700:      #F553DA;

  /* ============================================================
     SEMANTIC TOKENS — light theme
     ============================================================ */

  /* Primary — the brand action color */
  --color-primary-normal:    var(--color-blue-900);   /* #0066FF */
  --color-primary-strong:    var(--color-blue-1000);  /* #005EEB */
  --color-primary-heavy:     var(--color-blue-1100);  /* #0054D1 */

  /* Label (text) — opacity-based for true contrast layering */
  --color-label-normal:      rgba(46,47,51,0.88);
  --color-label-strong:      #000000;
  --color-label-neutral:     rgba(46,47,51,0.88);
  --color-label-alternative: rgba(55,56,60,0.61);
  --color-label-assistive:   rgba(55,56,60,0.28);
  --color-label-disable:     rgba(55,56,60,0.16);

  /* Background */
  --color-bg-normal:         #FFFFFF;
  --color-bg-alternative:    #F7F7F8;       /* coolNeutral-100 */
  --color-bg-elevated:       #FFFFFF;
  --color-bg-inverse:        #1B1C1E;       /* coolNeutral-1800 */

  /* Line / border */
  --color-line-normal:       rgba(112,115,124,0.22);
  --color-line-neutral:      rgba(112,115,124,0.16);
  --color-line-alternative:  rgba(112,115,124,0.08);
  --color-line-strong:       rgba(112,115,124,0.61);

  /* Status */
  --color-status-positive:   var(--color-green-700);
  --color-status-cautionary: var(--color-yellow-700);
  --color-status-negative:   var(--color-red-700);
  --color-status-info:       var(--color-blue-900);

  /* Component fills (subtle gray buttons / chips) */
  --color-fill-normal:       rgba(112,115,124,0.08);
  --color-fill-strong:       rgba(112,115,124,0.16);
  --color-fill-neutral:      rgba(112,115,124,0.05);

  /* Inverse */
  --color-inverse-primary:   var(--color-blue-700);
  --color-inverse-label:     #FFFFFF;

  /* Accent backgrounds (chip / tag backgrounds) */
  --color-accent-bg-red:        #FEECEC;
  --color-accent-bg-redOrange:  #FEEEE5;
  --color-accent-bg-orange:     #FEF4E6;
  --color-accent-bg-yellow:     #FEF4E6;
  --color-accent-bg-green:      #D9FFE6;
  --color-accent-bg-blue:       #EAF2FE;
  --color-accent-bg-violet:     #F0ECFE;
  --color-accent-bg-purple:     #F9EDFF;
  --color-accent-bg-pink:       #FEECFB;

  /* ============================================================
     OPACITY TOKENS — used as alpha values on coolNeutral
     ============================================================ */
  --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;

  /* ============================================================
     RADIUS — Wanted favors generous radii. 12 for controls,
     16/20 for cards, 32 for sections, 64 for hero containers.
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default for buttons / inputs */
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;   /* default for cards */
  --radius-4xl:  48px;
  --radius-5xl:  64px;   /* hero / section containers */
  --radius-full: 9999px;

  /* ============================================================
     SHADOW — "normal" (drop) tier from the figma file.
     Strong + inset variants also exist in source; expose the
     workhorse normal-tier here.
     ============================================================ */
  --shadow-xsmall: 0 1px 2px -1px rgba(23,23,23,0.10);
  --shadow-small:  0 4px 6px -1px rgba(23,23,23,0.06),
                   0 2px 4px -2px rgba(23,23,23,0.06);
  --shadow-medium: 0 10px 15px -3px rgba(23,23,23,0.07),
                   0 4px 6px  -2px rgba(0,0,0,0.07);
  --shadow-large:  0 16px 24px -6px rgba(23,23,23,0.08),
                   0 6px 10px  -4px rgba(23,23,23,0.08);
  --shadow-xlarge: 0 24px 38px -10px rgba(23,23,23,0.12),
                   0 10px 15px -5px rgba(23,23,23,0.10);

  /* ============================================================
     SPACING — Wanted spacing follows 4px grid up to 8, then 8/16/24/32/48/64/96/128.
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============================================================
     TYPOGRAPHY — semantic vars. Names mirror the source spec.
     All sizes in px; line-heights in absolute px to match Figma.
     Letter spacings copied verbatim from /Typography.
     ============================================================ */

  /* Display */
  --type-display1-size: 56px; --type-display1-lh: 72px; --type-display1-ls: -0.032em; --type-display1-weight: 700;
  --type-display2-size: 40px; --type-display2-lh: 52px; --type-display2-ls: -0.0282em; --type-display2-weight: 700;
  --type-display3-size: 36px; --type-display3-lh: 48px; --type-display3-ls: -0.027em;  --type-display3-weight: 700;

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

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

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

  /* Body */
  --type-body1-size: 16px; --type-body1-lh: 24px; --type-body1-ls: 0.0057em; --type-body1-weight: 500;
  --type-body1r-size: 16px; --type-body1r-lh: 26px; --type-body1r-ls: 0.0057em; --type-body1r-weight: 500;
  --type-body2-size: 15px; --type-body2-lh: 22px; --type-body2-ls: 0.0096em; --type-body2-weight: 500;
  --type-body2r-size: 15px; --type-body2r-lh: 24px; --type-body2r-ls: 0.0096em; --type-body2r-weight: 500;

  /* Label */
  --type-label1-size: 14px; --type-label1-lh: 20px; --type-label1-ls: 0.0145em; --type-label1-weight: 600;
  --type-label1r-size: 14px; --type-label1r-lh: 22px; --type-label1r-ls: 0.0145em; --type-label1r-weight: 500;
  --type-label2-size: 13px; --type-label2-lh: 18px; --type-label2-ls: 0.0194em; --type-label2-weight: 600;

  /* Caption */
  --type-caption1-size: 12px; --type-caption1-lh: 16px; --type-caption1-ls: 0.0252em; --type-caption1-weight: 500;
  --type-caption2-size: 11px; --type-caption2-lh: 14px; --type-caption2-ls: 0.0311em; --type-caption2-weight: 700;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:    140ms;
  --duration-normal:  220ms;
  --duration-slow:    360ms;
}

/* ============================================================
   DARK THEME — apply with [data-theme="dark"] or .dark.
   Mirrors /Color---Semantic/section/Dark.
   ============================================================ */
[data-theme="dark"], .dark {
  --color-primary-normal:    var(--color-blue-700);
  --color-primary-strong:    var(--color-blue-600);

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

  --color-bg-normal:         #171719;       /* coolNeutral-1900 */
  --color-bg-alternative:    #0F0F10;
  --color-bg-elevated:       #292A2D;       /* coolNeutral-1600 */
  --color-bg-inverse:        #FFFFFF;

  --color-line-normal:       rgba(112,115,124,0.32);
  --color-line-neutral:      rgba(112,115,124,0.22);
  --color-line-alternative:  rgba(112,115,124,0.12);

  --color-fill-normal:       rgba(112,115,124,0.22);
  --color-fill-strong:       rgba(112,115,124,0.35);
  --color-fill-neutral:      rgba(112,115,124,0.12);

  --color-inverse-primary:   var(--color-blue-900);
  --color-inverse-label:     #1B1C1E;
}

/* ============================================================
   SEMANTIC TEXT CLASSES — drop-in helpers.
   Use these instead of inline font-size/-weight/-height tuples.
   ============================================================ */
.text-display1, .display-1 { font: var(--type-display1-weight) var(--type-display1-size)/var(--type-display1-lh) var(--font-sans); letter-spacing: var(--type-display1-ls); }
.text-display2, .display-2 { font: var(--type-display2-weight) var(--type-display2-size)/var(--type-display2-lh) var(--font-sans); letter-spacing: var(--type-display2-ls); }
.text-display3, .display-3 { font: var(--type-display3-weight) var(--type-display3-size)/var(--type-display3-lh) var(--font-sans); letter-spacing: var(--type-display3-ls); }

.text-title1, h1 { font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-sans); letter-spacing: var(--type-title1-ls); }
.text-title2, h2 { font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-sans); letter-spacing: var(--type-title2-ls); }
.text-title3, h3 { font: var(--type-title3-weight) var(--type-title3-size)/var(--type-title3-lh) var(--font-sans); letter-spacing: var(--type-title3-ls); }

.text-heading1, h4 { font: var(--type-heading1-weight) var(--type-heading1-size)/var(--type-heading1-lh) var(--font-sans); letter-spacing: var(--type-heading1-ls); }
.text-heading2, h5 { font: var(--type-heading2-weight) var(--type-heading2-size)/var(--type-heading2-lh) var(--font-sans); letter-spacing: var(--type-heading2-ls); }

.text-headline1 { font: var(--type-headline1-weight) var(--type-headline1-size)/var(--type-headline1-lh) var(--font-sans); letter-spacing: var(--type-headline1-ls); }
.text-headline2 { font: var(--type-headline2-weight) var(--type-headline2-size)/var(--type-headline2-lh) var(--font-sans); letter-spacing: var(--type-headline2-ls); }

.text-body1        { font: var(--type-body1-weight)  var(--type-body1-size)/var(--type-body1-lh)   var(--font-sans); letter-spacing: var(--type-body1-ls); }
.text-body1-reading{ font: var(--type-body1r-weight) var(--type-body1r-size)/var(--type-body1r-lh) var(--font-sans); letter-spacing: var(--type-body1r-ls); }
.text-body2        { font: var(--type-body2-weight)  var(--type-body2-size)/var(--type-body2-lh)   var(--font-sans); letter-spacing: var(--type-body2-ls); }
.text-body2-reading{ font: var(--type-body2r-weight) var(--type-body2r-size)/var(--type-body2r-lh) var(--font-sans); letter-spacing: var(--type-body2r-ls); }

.text-label1        { font: var(--type-label1-weight)  var(--type-label1-size)/var(--type-label1-lh)   var(--font-sans); letter-spacing: var(--type-label1-ls); }
.text-label1-reading{ font: var(--type-label1r-weight) var(--type-label1r-size)/var(--type-label1r-lh) var(--font-sans); letter-spacing: var(--type-label1r-ls); }
.text-label2        { font: var(--type-label2-weight)  var(--type-label2-size)/var(--type-label2-lh)   var(--font-sans); letter-spacing: var(--type-label2-ls); }

.text-caption1 { font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans); letter-spacing: var(--type-caption1-ls); }
.text-caption2 { font: var(--type-caption2-weight) var(--type-caption2-size)/var(--type-caption2-lh) var(--font-sans); letter-spacing: var(--type-caption2-ls); }

/* ============================================================
   BASELINE
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--color-label-normal);
  background: var(--color-bg-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }