/* =====================================================================
   Wanted Design System — Tokens
   Source of truth. All other files reference these custom properties.
   ===================================================================== */

@font-face {
  font-family: "Pretendard JP";
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/PretendardJP-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Pretendard JP";
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/PretendardJP-Medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Pretendard JP";
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/PretendardJP-SemiBold.woff2") format("woff2");
  font-weight: 600;
}
@font-face {
  font-family: "Pretendard JP";
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/PretendardJP-Bold.woff2") format("woff2");
  font-weight: 700;
}


:root {
  /* ---- Atomic palette --------------------------------------------------
     Color-atomic-{family}-{step}. Step 0 is darkest, 100 is lightest
     within neutrals; for hues, 50 is the canonical mid value. */

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

  /* Neutral (gray scale, real DS values) */
  --c-neutral-99: #F7F7F8;
  --c-neutral-98: #F4F4F5;
  --c-neutral-95: #DBDCDF;
  --c-neutral-90: #C2C4C8;
  --c-neutral-80: #AEB0B6;
  --c-neutral-70: #989BA2;
  --c-neutral-60: #70737C;
  --c-neutral-50: #505258;
  --c-neutral-40: #46474C;
  --c-neutral-30: #2E2F33;
  --c-neutral-25: #37383C;
  --c-neutral-20: #1B1C1E;
  --c-neutral-15: #171719;
  --c-neutral-10: #14191E;
  --c-neutral-05: #0B0E11;

  /* Blue — primary */
  --c-blue-99: #F0F5FF;
  --c-blue-95: #DBE6FE;
  --c-blue-90: #EAF2FE;
  --c-blue-80: #B0CDFF;
  --c-blue-70: #75A7FF;
  --c-blue-60: #3385FF;
  --c-blue-50: #0066FF;          /* primary */
  --c-blue-40: #005EEB;
  --c-blue-30: #0048B5;
  --c-blue-20: #003280;
  --c-blue-10: #001F4D;

  /* Red — critical */
  --c-red-99:  #FFEDED;
  --c-red-95:  #FFD2D2;
  --c-red-80:  #FF9292;
  --c-red-60:  #FF6363;
  --c-red-50:  #FF4242;          /* critical */
  --c-red-40:  #E22D2D;
  --c-red-30:  #B41C1C;
  --c-red-10:  #4D0808;

  /* Green — positive */
  --c-green-99: #E8FAEE;
  --c-green-90: #B7F0CA;
  --c-green-60: #2ECF6A;
  --c-green-50: #00BF40;         /* positive */
  --c-green-40: #00A035;
  --c-green-20: #003D14;

  /* Yellow — caution */
  --c-yellow-99: #FFF8E1;
  --c-yellow-50: #FFCC00;
  --c-yellow-40: #E5B800;

  /* Violet — accent */
  --c-violet-95: #F0ECFE;
  --c-violet-50: #6541F2;
  --c-violet-40: #9747FF;        /* accent stroke value seen in figma */

  /* Cyan — accent */
  --c-cyan-95: #E0F4F7;
  --c-cyan-50: #0098B2;

  /* Magenta / Pink — accent */
  --c-magenta-50: #E11D74;

  /* Orange — accent */
  --c-orange-50: #FF7A00;

  /* Opacity tokens (overlays) */
  --c-opacity-0:    rgba(0,0,0,0);
  --c-opacity-100:  rgba(0,0,0,1);
  --c-opacity-22:   rgba(112,115,124,0.22);
  --c-opacity-16:   rgba(112,115,124,0.16);
  --c-opacity-08:   rgba(112,115,124,0.08);

  /* ---- Semantic — Light (default) -------------------------------------
     color-semantic-{role}-{state} */

  /* Primary brand */
  --color-primary-normal:    var(--c-blue-50);
  --color-primary-strong:    var(--c-blue-40);
  --color-primary-heavy:     var(--c-blue-30);

  /* Label (text) */
  --color-label-normal:      rgba(0, 0, 0, 0.88);     /* near-black on white */
  --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;
  --color-bg-elevated-normal:  #FFFFFF;
  --color-bg-elevated-alt:     #F7F7F8;

  /* Line / stroke */
  --color-line-normal-normal:    rgba(112,115,124,0.22);
  --color-line-normal-neutral:   rgba(112,115,124,0.16);
  --color-line-normal-alt:       rgba(112,115,124,0.08);
  --color-line-solid-normal:     #DBDCDF;
  --color-line-solid-neutral:    #E1E2E4;

  /* Status */
  --color-status-positive:    var(--c-green-50);
  --color-status-cautionary:  var(--c-yellow-50);
  --color-status-destructive: var(--c-red-50);

  /* Static */
  --color-static-white: #FFFFFF;
  --color-static-black: #000000;

  /* Interaction */
  --color-interaction-inactive: rgba(112,115,124,0.22);
  --color-interaction-disable:  rgba(112,115,124,0.16);
  --color-interaction-hover:    rgba(0,0,0,0.04);
  --color-interaction-pressed:  rgba(0,0,0,0.08);

  /* Inverse */
  --color-inverse-primary:    #FFFFFF;
  --color-inverse-bg:         #171719;
  --color-inverse-label:      #FFFFFF;

  /* Accent (extras) */
  --color-accent-bg-redOrange: #FFF1ED;
  --color-accent-bg-violet:    #F0ECFE;
  --color-accent-bg-blue:      #EAF2FE;
  --color-accent-bg-cyan:      #E0F4F7;
  --color-accent-bg-green:     #E8FAEE;

  /* ---- Typography ----------------------------------------------------- */
  --font-family-base: "Pretendard JP", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-display: "Wanted Sans", "Pretendard JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (size / line-height / letter-spacing). Values lifted from Figma. */
  --type-display1-size: 56px;  --type-display1-lh: 1.20; --type-display1-ls: -0.020em; --type-display1-weight: 700;
  --type-display2-size: 36px;  --type-display2-lh: 1.334;--type-display2-ls: -0.027em; --type-display2-weight: 700;

  --type-title1-size: 28px;    --type-title1-lh: 1.358; --type-title1-ls: -0.024em;  --type-title1-weight: 700;
  --type-title2-size: 24px;    --type-title2-lh: 1.334; --type-title2-ls: -0.023em;  --type-title2-weight: 700;
  --type-title3-size: 20px;    --type-title3-lh: 1.40;  --type-title3-ls: -0.018em;  --type-title3-weight: 600;

  --type-heading1-size: 17px;  --type-heading1-lh: 1.50; --type-heading1-ls: -0.011em; --type-heading1-weight: 600;
  --type-heading2-size: 16px;  --type-heading2-lh: 1.50; --type-heading2-ls: 0.006em;  --type-heading2-weight: 600;

  --type-body1-size: 16px;     --type-body1-lh: 1.50;   --type-body1-ls: 0.006em;    --type-body1-weight: 500;
  --type-body2-size: 15px;     --type-body2-lh: 1.50;   --type-body2-ls: 0.006em;    --type-body2-weight: 500;
  --type-body3-size: 14px;     --type-body3-lh: 1.50;   --type-body3-ls: 0.011em;    --type-body3-weight: 500;

  --type-label1-size: 14px;    --type-label1-lh: 1.43;  --type-label1-ls: 0.011em;   --type-label1-weight: 600;
  --type-label2-size: 13px;    --type-label2-lh: 1.385; --type-label2-ls: 0.016em;   --type-label2-weight: 600;
  --type-label3-size: 12px;    --type-label3-lh: 1.333; --type-label3-ls: 0.022em;   --type-label3-weight: 600;

  --type-caption1-size: 12px;  --type-caption1-lh: 1.333; --type-caption1-ls: 0.022em; --type-caption1-weight: 500;
  --type-caption2-size: 11px;  --type-caption2-lh: 1.273; --type-caption2-ls: 0.031em; --type-caption2-weight: 700;

  /* ---- Spacing (4-pt grid, dense end honored) ------------------------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-48: 96px;
  --space-64: 128px;

  /* ---- Radius --------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;   /* default for buttons */
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(23,23,23,0.06), 0 1px 1px rgba(23,23,23,0.04);
  --shadow-2: 0 2px 6px rgba(23,23,23,0.07), 0 1px 2px rgba(23,23,23,0.06);
  --shadow-3: 0 6px 18px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-4: 0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);

  /* ---- Motion --------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

/* ===== Dark theme ====================================================== */
[data-theme="dark"], .theme-dark {
  --color-label-normal:      rgba(255, 255, 255, 0.92);
  --color-label-strong:      #FFFFFF;
  --color-label-neutral:     rgba(228, 230, 235, 0.88);
  --color-label-alternative: rgba(228, 230, 235, 0.55);
  --color-label-assistive:   rgba(228, 230, 235, 0.28);
  --color-label-disable:     rgba(228, 230, 235, 0.16);

  --color-bg-normal:           #14191E;
  --color-bg-alternative:      #1B1C1E;
  --color-bg-elevated-normal:  #1B1C1E;
  --color-bg-elevated-alt:     #2E2F33;

  --color-line-normal-normal:    rgba(255,255,255,0.16);
  --color-line-normal-neutral:   rgba(255,255,255,0.10);
  --color-line-normal-alt:       rgba(255,255,255,0.06);
  --color-line-solid-normal:     #2E2F33;
  --color-line-solid-neutral:    #37383C;

  --color-primary-normal:    #3385FF;
  --color-primary-strong:    #5C9DFF;
  --color-primary-heavy:     #75A7FF;

  --color-bg-normal:         #14191E;
  --color-inverse-primary:   #14191E;
  --color-inverse-bg:        #FFFFFF;
  --color-inverse-label:     #14191E;

  --color-interaction-hover:    rgba(255,255,255,0.06);
  --color-interaction-pressed:  rgba(255,255,255,0.10);
}

/* ===== Reset & globals ================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--type-body1-size);
  line-height: var(--type-body1-lh);
  letter-spacing: var(--type-body1-ls);
  color: var(--color-label-normal);
  background: var(--color-bg-alternative);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Type utility classes =========================================== */
.t-display1 { font-family: var(--font-family-display); font-size: var(--type-display1-size); line-height: var(--type-display1-lh); letter-spacing: var(--type-display1-ls); font-weight: var(--type-display1-weight); }
.t-display2 { font-size: var(--type-display2-size); line-height: var(--type-display2-lh); letter-spacing: var(--type-display2-ls); font-weight: var(--type-display2-weight); }
.t-title1   { font-size: var(--type-title1-size); line-height: var(--type-title1-lh); letter-spacing: var(--type-title1-ls); font-weight: var(--type-title1-weight); }
.t-title2   { font-size: var(--type-title2-size); line-height: var(--type-title2-lh); letter-spacing: var(--type-title2-ls); font-weight: var(--type-title2-weight); }
.t-title3   { font-size: var(--type-title3-size); line-height: var(--type-title3-lh); letter-spacing: var(--type-title3-ls); font-weight: var(--type-title3-weight); }
.t-heading1 { font-size: var(--type-heading1-size); line-height: var(--type-heading1-lh); letter-spacing: var(--type-heading1-ls); font-weight: var(--type-heading1-weight); }
.t-heading2 { font-size: var(--type-heading2-size); line-height: var(--type-heading2-lh); letter-spacing: var(--type-heading2-ls); font-weight: var(--type-heading2-weight); }
.t-body1    { font-size: var(--type-body1-size); line-height: var(--type-body1-lh); letter-spacing: var(--type-body1-ls); font-weight: var(--type-body1-weight); }
.t-body2    { font-size: var(--type-body2-size); line-height: var(--type-body2-lh); letter-spacing: var(--type-body2-ls); font-weight: var(--type-body2-weight); }
.t-body3    { font-size: var(--type-body3-size); line-height: var(--type-body3-lh); letter-spacing: var(--type-body3-ls); font-weight: var(--type-body3-weight); }
.t-label1   { font-size: var(--type-label1-size); line-height: var(--type-label1-lh); letter-spacing: var(--type-label1-ls); font-weight: var(--type-label1-weight); }
.t-label2   { font-size: var(--type-label2-size); line-height: var(--type-label2-lh); letter-spacing: var(--type-label2-ls); font-weight: var(--type-label2-weight); }
.t-label3   { font-size: var(--type-label3-size); line-height: var(--type-label3-lh); letter-spacing: var(--type-label3-ls); font-weight: var(--type-label3-weight); }
.t-caption1 { font-size: var(--type-caption1-size); line-height: var(--type-caption1-lh); letter-spacing: var(--type-caption1-ls); font-weight: var(--type-caption1-weight); }
.t-caption2 { font-size: var(--type-caption2-size); line-height: var(--type-caption2-lh); letter-spacing: var(--type-caption2-ls); font-weight: var(--type-caption2-weight); }