/* ============================================================
   Wanted Design System — colors & type
   Source of truth: Figma "Wanted Design System (Community)"
   ============================================================ */

/* --- Pretendard (local OTF — uploaded brand fonts) -------- */
@font-face { font-family: "Pretendard"; font-weight: 100; font-style: normal;
  src: url("fonts/Pretendard-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 200; font-style: normal;
  src: url("fonts/Pretendard-ExtraLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 300; font-style: normal;
  src: url("fonts/Pretendard-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal;
  src: url("fonts/Pretendard-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal;
  src: url("fonts/Pretendard-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal;
  src: url("fonts/Pretendard-SemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal;
  src: url("fonts/Pretendard-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 800; font-style: normal;
  src: url("fonts/Pretendard-ExtraBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 900; font-style: normal;
  src: url("fonts/Pretendard-Black.otf") format("opentype"); font-display: swap; }

/* SF Mono fallback -> JetBrains Mono on web (close enough) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — Atomic palette (raw scales)
     ============================================================ */

  /* Coolneutral */
  --color-coolneutral-99: #ffffff;
  --color-coolneutral-98: #f7f7f8;
  --color-coolneutral-95: #f4f4f5;
  --color-coolneutral-90: #e8e8ea;
  --color-coolneutral-80: #dbdcdf;
  --color-coolneutral-70: #c2c4c8;
  --color-coolneutral-60: #aeb0b6;
  --color-coolneutral-50: #989ba2;
  --color-coolneutral-40: #878a93;
  --color-coolneutral-30: #70737c;
  --color-coolneutral-25: #5b5d65;
  --color-coolneutral-20: #46474c;
  --color-coolneutral-15: #37383c;
  --color-coolneutral-10: #2e2f33;
  --color-coolneutral-5:  #1b1c1e;
  --color-coolneutral-3:  #171719;

  /* Blue (primary) */
  --color-blue-50:  #eaf2fe;
  --color-blue-100: #d4e4fd;
  --color-blue-200: #a8c9fb;
  --color-blue-300: #7dadf9;
  --color-blue-400: #5191f7;
  --color-blue-500: #3385ff;
  --color-blue-600: #0066ff;
  --color-blue-700: #005eeb;
  --color-blue-800: #0046b0;
  --color-blue-900: #002e75;

  /* Red */
  --color-red-50:  #ffecec;
  --color-red-100: #ffd9d9;
  --color-red-200: #ffb3b3;
  --color-red-300: #ff8c8c;
  --color-red-400: #ff6666;
  --color-red-500: #ff4242;
  --color-red-600: #e63939;
  --color-red-700: #b32d2d;
  --color-red-800: #802020;
  --color-red-900: #4d1313;

  /* Green */
  --color-green-50:  #e6faec;
  --color-green-100: #ccf5d9;
  --color-green-200: #99ebb3;
  --color-green-300: #66e08c;
  --color-green-400: #33d666;
  --color-green-500: #00bf40;
  --color-green-600: #00a837;
  --color-green-700: #00822b;
  --color-green-800: #005c1f;
  --color-green-900: #003613;

  /* Purple (AI/premium) */
  --color-purple-50:  #f0ecfe;
  --color-purple-100: #e1d8fd;
  --color-purple-200: #c4b1fb;
  --color-purple-300: #a68bf9;
  --color-purple-400: #8964f7;
  --color-purple-500: #9747ff;
  --color-purple-600: #6541f2;
  --color-purple-700: #4f33bf;
  --color-purple-800: #382580;
  --color-purple-900: #211640;

  /* Yellow */
  --color-yellow-50:  #fff8e6;
  --color-yellow-100: #fff1cc;
  --color-yellow-200: #ffe399;
  --color-yellow-300: #ffd566;
  --color-yellow-400: #ffc845;
  --color-yellow-500: #ffb800;
  --color-yellow-600: #cc9300;
  --color-yellow-700: #996e00;

  /* Cyan / informative cool */
  --color-cyan-50:  #e6f7fa;
  --color-cyan-100: #cceff5;
  --color-cyan-300: #4dc9d8;
  --color-cyan-500: #0098b2;
  --color-cyan-700: #006c80;

  /* ============================================================
     COLOR — Semantic roles  (use these in components)
     ============================================================ */

  /* Foreground — text & icons */
  --fg-neutral-primary:    var(--color-coolneutral-3);   /* #171719 */
  --fg-neutral-strong:     var(--color-coolneutral-5);   /* #1B1C1E */
  --fg-neutral-secondary:  var(--color-coolneutral-15);  /* #37383C */
  --fg-neutral-subtle:     var(--color-coolneutral-30);  /* #70737C */
  --fg-neutral-disabled:   var(--color-coolneutral-60);  /* #AEB0B6 */
  --fg-neutral-onColor:    #ffffff;

  --fg-cta:                var(--color-blue-600);
  --fg-cta-hover:          var(--color-blue-700);

  --fg-positive:           var(--color-green-500);
  --fg-negative:           var(--color-red-500);
  --fg-cautionary:         var(--color-yellow-500);
  --fg-informative:        var(--color-cyan-500);
  --fg-magic:              var(--color-purple-500);   /* AI / premium */

  /* Background — surfaces */
  --bg-neutral:            #ffffff;
  --bg-neutral-subtle:     var(--color-coolneutral-98); /* #F7F7F8 */
  --bg-neutral-muted:      var(--color-coolneutral-95); /* #F4F4F5 */
  --bg-neutral-strong:     var(--color-coolneutral-3);  /* #171719 */
  --bg-neutral-inverse:    var(--color-coolneutral-3);

  --bg-cta-strong:         var(--color-blue-600);
  --bg-cta-strong-hover:   var(--color-blue-700);
  --bg-cta-subtle:         var(--color-blue-50);

  --bg-positive-subtle:    var(--color-green-50);
  --bg-negative-subtle:    var(--color-red-50);
  --bg-cautionary-subtle:  var(--color-yellow-50);
  --bg-informative-subtle: var(--color-cyan-50);
  --bg-magic-subtle:       var(--color-purple-50);

  /* Border / line */
  --line-neutral-subtle:   var(--color-coolneutral-95); /* #F4F4F5 hairline */
  --line-neutral:          var(--color-coolneutral-80); /* #DBDCDF default */
  --line-neutral-strong:   var(--color-coolneutral-70); /* #C2C4C8 strong  */
  --line-cta:              var(--color-blue-600);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
               "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
  --font-display: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Roles */
  --type-display-1-size: 56px; --type-display-1-weight: 700; --type-display-1-lh: 1.18; --type-display-1-track: -0.025em;
  --type-display-2-size: 36px; --type-display-2-weight: 700; --type-display-2-lh: 1.22; --type-display-2-track: -0.022em;
  --type-display-3-size: 28px; --type-display-3-weight: 700; --type-display-3-lh: 1.28; --type-display-3-track: -0.02em;

  --type-title-1-size: 24px; --type-title-1-weight: 700; --type-title-1-lh: 1.34; --type-title-1-track: -0.02em;
  --type-title-2-size: 20px; --type-title-2-weight: 600; --type-title-2-lh: 1.4;  --type-title-2-track: -0.018em;
  --type-title-3-size: 17px; --type-title-3-weight: 600; --type-title-3-lh: 1.4;  --type-title-3-track: -0.015em;

  --type-body-1-size:  16px; --type-body-1-weight: 500; --type-body-1-lh: 1.5;   --type-body-1-track: -0.011em;
  --type-body-1r-weight: 400;
  --type-body-2-size:  15px; --type-body-2-weight: 500; --type-body-2-lh: 1.5;   --type-body-2-track: -0.011em;
  --type-body-3-size:  14px; --type-body-3-weight: 500; --type-body-3-lh: 1.5;   --type-body-3-track: -0.008em;

  --type-label-size:   13px; --type-label-weight:  500; --type-label-lh:  1.4;   --type-label-track:  -0.005em;
  --type-caption-size: 12px; --type-caption-weight:500; --type-caption-lh:1.4;   --type-caption-track:-0.003em;
  --type-mono-size:    13px; --type-mono-weight:   500; --type-mono-lh:   1.5;   --type-mono-track:   0;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ============================================================
     ELEVATION (subtle, never dramatic)
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(23,23,23,0.06);
  --shadow-2: 0 2px 8px rgba(23,23,23,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(23,23,23,0.10);
  --shadow-focus: 0 0 0 4px rgba(0,102,255,0.12);

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --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: 80px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 300ms;
}

/* ============================================================
   Element defaults — apply font + sane resets
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-neutral-primary);
  background: var(--bg-neutral);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--type-display-2-size); font-weight: var(--type-display-2-weight);
     line-height: var(--type-display-2-lh); letter-spacing: var(--type-display-2-track); margin: 0; }
h2 { font-size: var(--type-display-3-size); font-weight: var(--type-display-3-weight);
     line-height: var(--type-display-3-lh); letter-spacing: var(--type-display-3-track); margin: 0; }
h3 { font-size: var(--type-title-1-size); font-weight: var(--type-title-1-weight);
     line-height: var(--type-title-1-lh); letter-spacing: var(--type-title-1-track); margin: 0; }
h4 { font-size: var(--type-title-2-size); font-weight: var(--type-title-2-weight);
     line-height: var(--type-title-2-lh); letter-spacing: var(--type-title-2-track); margin: 0; }
h5 { font-size: var(--type-title-3-size); font-weight: var(--type-title-3-weight);
     line-height: var(--type-title-3-lh); letter-spacing: var(--type-title-3-track); margin: 0; }
p  { font-size: var(--type-body-1-size); font-weight: var(--type-body-1r-weight);
     line-height: var(--type-body-1-lh); letter-spacing: var(--type-body-1-track); margin: 0; }
small{font-size: var(--type-caption-size); color: var(--fg-neutral-subtle);}
code, pre { font-family: var(--font-mono); font-size: var(--type-mono-size);}
a { color: var(--fg-cta); text-decoration: none; }
a:hover { color: var(--fg-cta-hover); }

/* ============================================================
   Utility classes for type roles (use when not on a real element)
   ============================================================ */
.t-display-1 { font: var(--type-display-1-weight) var(--type-display-1-size)/var(--type-display-1-lh) var(--font-display); letter-spacing: var(--type-display-1-track); }
.t-display-2 { font: var(--type-display-2-weight) var(--type-display-2-size)/var(--type-display-2-lh) var(--font-display); letter-spacing: var(--type-display-2-track); }
.t-display-3 { font: var(--type-display-3-weight) var(--type-display-3-size)/var(--type-display-3-lh) var(--font-display); letter-spacing: var(--type-display-3-track); }
.t-title-1   { font: var(--type-title-1-weight) var(--type-title-1-size)/var(--type-title-1-lh) var(--font-sans); letter-spacing: var(--type-title-1-track); }
.t-title-2   { font: var(--type-title-2-weight) var(--type-title-2-size)/var(--type-title-2-lh) var(--font-sans); letter-spacing: var(--type-title-2-track); }
.t-title-3   { font: var(--type-title-3-weight) var(--type-title-3-size)/var(--type-title-3-lh) var(--font-sans); letter-spacing: var(--type-title-3-track); }
.t-body-1    { font: var(--type-body-1-weight) var(--type-body-1-size)/var(--type-body-1-lh) var(--font-sans); letter-spacing: var(--type-body-1-track); }
.t-body-2    { font: var(--type-body-2-weight) var(--type-body-2-size)/var(--type-body-2-lh) var(--font-sans); letter-spacing: var(--type-body-2-track); }
.t-body-3    { font: var(--type-body-3-weight) var(--type-body-3-size)/var(--type-body-3-lh) var(--font-sans); letter-spacing: var(--type-body-3-track); }
.t-label     { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-lh) var(--font-sans); letter-spacing: var(--type-label-track); }
.t-caption   { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-sans); letter-spacing: var(--type-caption-track); color: var(--fg-neutral-subtle); }
.t-mono      { font: var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-lh) var(--font-mono); }