/* ============================================================
   Wanted Design System — Colors & Type
   Source: Wanted Design System (Community).fig
   ============================================================ */

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

:root {
  /* ============== Atomic palette ============== */
  /* Common */
  --w-common-100: #ffffff;
  --w-common-0: #000000;

  /* Neutral (warm gray) */
  --w-neutral-99: #fdfdfd;
  --w-neutral-95: #f4f4f5;
  --w-neutral-90: #e8e8ea;
  --w-neutral-80: #dbdcdf;
  --w-neutral-70: #c2c4c8;
  --w-neutral-60: #aeb0b6;
  --w-neutral-50: #989ba2;
  --w-neutral-40: #878a92;
  --w-neutral-30: #70737c;
  --w-neutral-22: #46474b;
  --w-neutral-20: #3f4046;
  --w-neutral-15: #2e2f33;
  --w-neutral-10: #1f2024;
  --w-neutral-5: #131316;
  --w-neutral-0: #000000;

  /* Cool Neutral (used heavily for surfaces & dividers) */
  --w-coolneutral-99: #fafafb;
  --w-coolneutral-98: #f7f7f8;
  --w-coolneutral-97: #f4f4f5;
  --w-coolneutral-96: #f1f1f2;
  --w-coolneutral-95: #ededee;
  --w-coolneutral-90: #dbdcdf;
  --w-coolneutral-80: #c2c4c8;
  --w-coolneutral-70: #aeb0b6;
  --w-coolneutral-60: #989ba2;
  --w-coolneutral-50: #878a92;
  --w-coolneutral-40: #70737c;
  --w-coolneutral-30: #55585f;
  --w-coolneutral-22: #46474b;
  --w-coolneutral-20: #37383c;
  --w-coolneutral-15: #2e2f33;
  --w-coolneutral-10: #1b1c1e;
  --w-coolneutral-7: #161719;
  --w-coolneutral-5: #131316;
  --w-coolneutral-0: #000000;

  /* Blue — primary brand accent */
  --w-blue-99: #f4f8ff;
  --w-blue-95: #eaf2fe;
  --w-blue-90: #d6e4fd;
  --w-blue-80: #adc8fb;
  --w-blue-70: #84acf9;
  --w-blue-65: #6f9ef7;
  --w-blue-60: #5b8fec;
  --w-blue-55: #4a82e8;
  --w-blue-50: #3385ff;
  --w-blue-45: #1a73ff;
  --w-blue-40: #0066ff;   /* Primary */
  --w-blue-30: #005eeb;
  --w-blue-20: #004cc1;
  --w-blue-10: #002f7a;
  --w-blue-0:  #000000;

  /* Red — danger / negative */
  --w-red-99: #fff5f5;
  --w-red-95: #ffe7e7;
  --w-red-90: #ffcfcf;
  --w-red-80: #ff9d9d;
  --w-red-70: #ff7575;
  --w-red-60: #ff5555;
  --w-red-50: #ff4242;
  --w-red-40: #e53030;
  --w-red-30: #b81f1f;
  --w-red-20: #841515;
  --w-red-10: #4d0a0a;
  --w-red-0:  #000000;

  /* Green — positive */
  --w-green-99: #f4fff8;
  --w-green-95: #e0fcec;
  --w-green-90: #b8f5d2;
  --w-green-80: #74e6a4;
  --w-green-70: #38d27c;
  --w-green-60: #00bf40;
  --w-green-50: #00a338;
  --w-green-40: #00872f;
  --w-green-30: #006b25;
  --w-green-20: #004f1c;
  --w-green-10: #002a0e;
  --w-green-0:  #000000;

  /* Orange (Red Orange) */
  --w-orange-50: #ff7733;
  --w-orange-40: #ed5b00;

  /* Lime */
  --w-lime-50: #b5e612;
  --w-lime-37: #6fa800;

  /* Cyan */
  --w-cyan-50: #00bcd4;
  --w-cyan-40: #0098b2;

  /* Light Blue */
  --w-lightblue-50: #3aa9ff;
  --w-lightblue-40: #1f8de8;

  /* Violet — accent (figma diagram dashed lines, brand sparkles) */
  --w-violet-99: #f9f6ff;
  --w-violet-95: #f0ecfe;
  --w-violet-90: #e3daff;
  --w-violet-80: #c8b4ff;
  --w-violet-70: #ad8eff;
  --w-violet-60: #9870ff;
  --w-violet-50: #9747ff;
  --w-violet-45: #8033f5;
  --w-violet-40: #6541f2;
  --w-violet-30: #4d2cc4;
  --w-violet-20: #321780;
  --w-violet-10: #1a0b40;

  /* ============== Semantic — Light theme (default) ============== */

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

  /* Primary brand */
  --w-primary-normal:  var(--w-blue-40);   /* #0066ff */
  --w-primary-strong:  var(--w-blue-30);   /* #005eeb */
  --w-primary-heavy:   var(--w-blue-20);

  /* Background */
  --w-bg-normal:       #ffffff;
  --w-bg-alternative:  var(--w-coolneutral-98); /* #f7f7f8 */
  --w-bg-neutral:      var(--w-coolneutral-95); /* #ededee */

  /* Label (foreground text) */
  --w-label-normal:    var(--w-coolneutral-10); /* #1b1c1e */
  --w-label-strong:    #000000;
  --w-label-neutral:   rgba(46, 47, 51, 0.88);  /* commonly seen */
  --w-label-alternative: rgba(55, 56, 60, 0.61);
  --w-label-assistive: rgba(55, 56, 60, 0.28);
  --w-label-disable:   rgba(55, 56, 60, 0.16);

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

  /* Fill */
  --w-fill-normal:     rgba(112, 115, 124, 0.05);
  --w-fill-neutral:    rgba(112, 115, 124, 0.10);
  --w-fill-alternative:rgba(112, 115, 124, 0.16);
  --w-fill-strong:     rgba(112, 115, 124, 0.22);

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

  /* Accent */
  --w-accent-violet:   var(--w-violet-50);
  --w-accent-cyan:     var(--w-cyan-40);

  /* Inverse (for dark surfaces over light) */
  --w-inverse-bg:      var(--w-coolneutral-10);
  --w-inverse-label:   #ffffff;
  --w-inverse-primary: var(--w-blue-50);

  /* ============== Shadows / Elevation ============== */
  --w-shadow-emphasize: 0 1px 4px 0 rgba(0,0,0,0.08), 0 0 4px 0 rgba(0,0,0,0.04);
  --w-shadow-strong:    0 6px 16px 0 rgba(0,0,0,0.12), 0 0 1px 0 rgba(0,0,0,0.08);
  --w-shadow-heavy:     0 8px 24px 0 rgba(23,23,23,0.10), 0 2px 6px 0 rgba(23,23,23,0.07);
  --w-shadow-card:      0 1px 3px 0 rgba(23,23,23,0.06), 0 0 0 1px rgba(112,115,124,0.10);

  /* ============== Radii ============== */
  --w-radius-2:  2px;
  --w-radius-4:  4px;
  --w-radius-6:  6px;
  --w-radius-8:  8px;   /* default control */
  --w-radius-12: 12px;
  --w-radius-16: 16px;  /* card */
  --w-radius-20: 20px;
  --w-radius-24: 24px;
  --w-radius-32: 32px;  /* hero card */
  --w-radius-pill: 9999px;

  /* ============== Spacing (4-pt scale) ============== */
  --w-space-1:  2px;
  --w-space-2:  4px;
  --w-space-3:  8px;
  --w-space-4:  12px;
  --w-space-5:  16px;
  --w-space-6:  20px;
  --w-space-7:  24px;
  --w-space-8:  32px;
  --w-space-9:  40px;
  --w-space-10: 48px;
  --w-space-11: 64px;
  --w-space-12: 96px;
  --w-space-13: 128px;

  /* Safe Area (mobile) */
  --w-safe-top-ios:     44px;
  --w-safe-top-android: 36px;
  --w-safe-bottom-ios:     34px;
  --w-safe-bottom-android: 14px;

  /* ============== Type — base ============== */
  --w-font-sans: "Pretendard", "Pretendard JP", -apple-system,
                 BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Segoe UI", Roboto, sans-serif;
  --w-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   Type scale  — 7 hierarchies × 18 sub-styles
   sizes/line-heights/letter-spacings copied from /Typography
   ============================================================ */

.w-type-display1   { font:700 56px/1.214 var(--w-font-sans);  letter-spacing:-0.0307em; }
.w-type-display2   { font:700 40px/1.30  var(--w-font-sans);  letter-spacing:-0.0282em; }
.w-type-display3   { font:700 36px/1.334 var(--w-font-sans);  letter-spacing:-0.027em;  }

.w-type-title1     { font:700 32px/1.375 var(--w-font-sans);  letter-spacing:-0.0253em; }
.w-type-title2     { font:700 28px/1.358 var(--w-font-sans);  letter-spacing:-0.0236em; }
.w-type-title3     { font:700 24px/1.334 var(--w-font-sans);  letter-spacing:-0.023em;  }

.w-type-heading1   { font:700 22px/1.364 var(--w-font-sans);  letter-spacing:-0.0194em; }
.w-type-heading2   { font:700 20px/1.40  var(--w-font-sans);  letter-spacing:-0.012em;  }

.w-type-headline1  { font:600 18px/1.445 var(--w-font-sans);  letter-spacing:-0.002em;  }
.w-type-headline2  { font:600 17px/1.412 var(--w-font-sans);  letter-spacing:0em;       }

.w-type-body1n     { font:500 16px/1.50  var(--w-font-sans);  letter-spacing:0.0057em;  }
.w-type-body1r     { font:500 16px/1.625 var(--w-font-sans);  letter-spacing:0.0057em;  }
.w-type-body2n     { font:500 15px/1.467 var(--w-font-sans);  letter-spacing:0.0096em;  }
.w-type-body2r     { font:500 15px/1.60  var(--w-font-sans);  letter-spacing:0.0096em;  }

.w-type-label1n    { font:600 14px/1.429 var(--w-font-sans);  letter-spacing:0.0145em;  }
.w-type-label1r    { font:500 14px/1.571 var(--w-font-sans);  letter-spacing:0.0145em;  }
.w-type-label2     { font:600 13px/1.385 var(--w-font-sans);  letter-spacing:0.0194em;  }

.w-type-caption1   { font:500 12px/1.334 var(--w-font-sans);  letter-spacing:0.0252em;  }
.w-type-caption2   { font:600 11px/1.273 var(--w-font-sans);  letter-spacing:0.0311em;  }

/* Semantic element shortcuts — apply on h1..p when desired */
h1, .h1 { font: 700 36px/1.334 var(--w-font-sans); letter-spacing:-0.027em; color: var(--w-label-strong); }
h2, .h2 { font: 700 28px/1.358 var(--w-font-sans); letter-spacing:-0.0236em; color: var(--w-label-strong); }
h3, .h3 { font: 700 24px/1.334 var(--w-font-sans); letter-spacing:-0.023em;  color: var(--w-label-strong); }
h4, .h4 { font: 700 20px/1.40  var(--w-font-sans); letter-spacing:-0.012em;  color: var(--w-label-strong); }
h5, .h5 { font: 600 17px/1.412 var(--w-font-sans); color: var(--w-label-strong); }
p, .p   { font: 500 16px/1.50  var(--w-font-sans); letter-spacing:0.0057em;  color: var(--w-label-normal); }
small, .small { font: 500 13px/1.385 var(--w-font-sans); letter-spacing:0.0194em; color: var(--w-label-alternative); }
code, .code { font: 500 14px/1.5 var(--w-font-mono); }