/* =================================================================
   Wanted Design System — colors_and_type.css
   Reconstructed from the Wanted Design System (Community) Figma file.
   ================================================================= */

/* -----------------------------------------------------------------
   Fonts
   Pretendard is bundled locally as a variable font (weights 100–900).
   Pretendard JP and Wanted Sans are not separately licensed here, so
   they alias to the same file — visually identical for Latin / Hangul
   and a graceful fallback for kana. Replace the @font-face src for
   'Pretendard JP' and 'Wanted Sans' if/when their .woff2 are added.
   ----------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('fonts/PretendardVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard JP';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('fonts/PretendardVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Wanted Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('fonts/PretendardVariable.woff2') format('woff2');
}

:root {
  /* ============================================================
     ATOMIC PALETTE  (color-global-*)
     Each ramp = 14 steps (50, 100..1300) + black.
     ============================================================ */

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

  /* Cool Neutral — the dominant gray ramp in Wanted */
  --color-global-coolNeutral-50:  #F7F7F8;
  --color-global-coolNeutral-100: #F4F4F5;
  --color-global-coolNeutral-200: #EAEBEC;
  --color-global-coolNeutral-300: #E1E2E4;
  --color-global-coolNeutral-400: #DBDCDF;
  --color-global-coolNeutral-500: #C2C4C8;
  --color-global-coolNeutral-600: #AEB0B6;
  --color-global-coolNeutral-700: #989BA2;
  --color-global-coolNeutral-800: #878A93;
  --color-global-coolNeutral-900: #70737C;
  --color-global-coolNeutral-1000: #5A5C63;
  --color-global-coolNeutral-1100: #46474C;
  --color-global-coolNeutral-1200: #37383C;
  --color-global-coolNeutral-1300: #333438;
  --color-global-coolNeutral-1400: #2E2F33;
  --color-global-coolNeutral-1500: #292A2D;
  --color-global-coolNeutral-1600: #212225;
  --color-global-coolNeutral-1700: #1B1C1E;
  --color-global-coolNeutral-1800: #171719;
  --color-global-coolNeutral-1900: #141415;
  --color-global-coolNeutral-2000: #0F0F10;
  --color-global-coolNeutral-black: #000000;

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

  /* Red — negative / error */
  --color-global-red-50:  #FFFAFA;
  --color-global-red-100: #FEECEC;
  --color-global-red-200: #FED5D5;
  --color-global-red-300: #FFB5B5;
  --color-global-red-400: #FF8C8C;
  --color-global-red-500: #FF6363;
  --color-global-red-600: #FF4242;   /* ★ Negative */
  --color-global-red-700: #E52222;
  --color-global-red-800: #B20C0C;
  --color-global-red-900: #750404;
  --color-global-red-1000: #3B0101;
  --color-global-red-black: #000000;

  /* Green — positive */
  --color-global-green-50:  #F2FFF6;
  --color-global-green-100: #D9FFE6;
  --color-global-green-200: #ACFCC7;
  --color-global-green-300: #7DF5A5;
  --color-global-green-400: #49E57D;
  --color-global-green-500: #1ED45A;
  --color-global-green-600: #00BF40;   /* ★ Positive */
  --color-global-green-700: #009632;
  --color-global-green-800: #006E25;
  --color-global-green-900: #004517;
  --color-global-green-1000: #00240C;
  --color-global-green-black: #000000;

  /* Orange — caution */
  --color-global-orange-50:  #FFFCF7;
  --color-global-orange-100: #FEF4E6;
  --color-global-orange-200: #FEE6C6;
  --color-global-orange-300: #FFD49C;
  --color-global-orange-400: #FFC06E;
  --color-global-orange-500: #FFA938;
  --color-global-orange-600: #FF9200;   /* ★ Caution */
  --color-global-orange-700: #D47800;
  --color-global-orange-800: #D17600;
  --color-global-orange-900: #9C5800;
  --color-global-orange-1000: #663A00;
  --color-global-orange-1100: #361E00;
  --color-global-orange-black: #000000;

  /* Red Orange */
  --color-global-redOrange-50:  #FFFAF7;
  --color-global-redOrange-100: #FEEEE5;
  --color-global-redOrange-200: #FEDBC6;
  --color-global-redOrange-300: #FFC09C;
  --color-global-redOrange-400: #FF9C63;
  --color-global-redOrange-500: #FF7B2E;
  --color-global-redOrange-600: #FF5E00;
  --color-global-redOrange-700: #F55A00;
  --color-global-redOrange-800: #CC4B00;
  --color-global-redOrange-900: #943600;
  --color-global-redOrange-1000: #5C2200;
  --color-global-redOrange-1100: #2E1100;
  --color-global-redOrange-black: #000000;

  /* Lime */
  --color-global-lime-600: #58CF04;
  --color-global-lime-800: #429E00;

  /* Cyan */
  --color-global-cyan-50:  #F7FEFF;
  --color-global-cyan-100: #DEFAFF;
  --color-global-cyan-600: #00BDDE;
  --color-global-cyan-700: #0098B2;

  /* Light Blue */
  --color-global-lightBlue-600: #00AEFF;
  --color-global-lightBlue-700: #008DCF;

  /* Violet — informative / "new" */
  --color-global-violet-50:  #FBFAFF;
  --color-global-violet-100: #F0ECFE;
  --color-global-violet-500: #7D5EF7;
  --color-global-violet-600: #6541F2;   /* ★ Informative / accent */
  --color-global-violet-700: #5B37ED;
  --color-global-violet-800: #4F29E5;

  /* Purple */
  --color-global-purple-600: #CB59FF;
  --color-global-purple-700: #AD36E3;

  /* Pink */
  --color-global-pink-600: #F553DA;
  --color-global-pink-700: #E846CD;

  /* ============================================================
     ALPHA — Wanted's signature opacity scale, applied to fg/bg.
     ============================================================ */
  --alpha-5:  0.05;
  --alpha-8:  0.08;
  --alpha-12: 0.12;
  --alpha-16: 0.16;
  --alpha-22: 0.22;
  --alpha-28: 0.28;
  --alpha-35: 0.35;
  --alpha-43: 0.43;
  --alpha-52: 0.52;
  --alpha-61: 0.61;
  --alpha-74: 0.74;
  --alpha-88: 0.88;
  --alpha-97: 0.97;
  --alpha-100: 1;

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

  /* Surfaces */
  --bg-page:        #FFFFFF;
  --bg-platter:     rgba(112,115,124,0.05);   /* the soft 5% wash */
  --bg-platter-alt: rgba(112,115,124,0.08);
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     rgba(0,0,0,0.43);          /* modal scrim */

  /* Text — applied as alpha over coolNeutral */
  --text-primary:    rgba(46,47,51,0.88);     /* color-text-strong */
  --text-secondary:  rgba(46,47,51,0.61);     /* color-text-normal */
  --text-tertiary:   rgba(55,56,60,0.43);     /* color-text-alternative */
  --text-disabled:   rgba(55,56,60,0.28);
  --text-on-color:   #FFFFFF;
  --text-link:       var(--color-global-blue-800);
  --text-negative:   var(--color-global-red-600);
  --text-positive:   var(--color-global-green-600);
  --text-caution:    var(--color-global-orange-600);
  --text-informative:var(--color-global-violet-600);

  /* Lines */
  --line-subtle:   rgba(112,115,124,0.08);
  --line-soft:     rgba(112,115,124,0.16);
  --line-default:  rgba(112,115,124,0.22);    /* the canonical hairline */
  --line-strong:   rgba(112,115,124,0.43);
  --line-heavy:    #000000;

  /* Primary (action) */
  --primary:           var(--color-global-blue-800);     /* #0066FF */
  --primary-hover:     var(--color-global-blue-900);     /* #005EEB */
  --primary-pressed:   var(--color-global-blue-1000);    /* #0054D1 */
  --primary-disabled:  rgba(0,102,255,0.28);
  --primary-bg:        var(--color-global-blue-100);
  --primary-bg-strong: var(--color-global-blue-200);

  /* Status */
  --negative:        var(--color-global-red-600);
  --negative-bg:     var(--color-global-red-100);
  --positive:        var(--color-global-green-600);
  --positive-bg:     var(--color-global-green-100);
  --caution:         var(--color-global-orange-600);
  --caution-bg:      var(--color-global-orange-100);
  --informative:     var(--color-global-violet-600);
  --informative-bg:  var(--color-global-violet-100);

  /* Neutral fills */
  --fill-neutral:        rgba(112,115,124,0.05);
  --fill-neutral-strong: rgba(112,115,124,0.12);
  --fill-neutral-heavy:  rgba(112,115,124,0.22);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-64: 64px;
  --radius-pill: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(23,23,23,0.10);
  --shadow-xl: 0 16px 40px rgba(23,23,23,0.16);
  --shadow-row: 0 1px 0 rgba(23,23,23,0.07);

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;

  /* ============================================================
     TYPOGRAPHY  — semantic vars
     ============================================================ */
  --font-sans:    'Pretendard JP', 'Pretendard', 'Wanted Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Wanted Sans', 'Pretendard JP', 'Pretendard', sans-serif;
  --font-mono:    'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   DARK theme override
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg-page:        #141415;
  --bg-platter:     rgba(255,255,255,0.05);
  --bg-platter-alt: rgba(255,255,255,0.08);
  --bg-elevated:    #1B1C1E;
  --bg-overlay:     rgba(0,0,0,0.61);

  --text-primary:    rgba(255,255,255,0.88);
  --text-secondary:  rgba(255,255,255,0.61);
  --text-tertiary:   rgba(255,255,255,0.43);
  --text-disabled:   rgba(255,255,255,0.28);

  --line-subtle:  rgba(255,255,255,0.08);
  --line-soft:    rgba(255,255,255,0.16);
  --line-default: rgba(255,255,255,0.22);
  --line-strong:  rgba(255,255,255,0.43);
  --line-heavy:   #FFFFFF;

  --fill-neutral:        rgba(255,255,255,0.05);
  --fill-neutral-strong: rgba(255,255,255,0.12);
  --fill-neutral-heavy:  rgba(255,255,255,0.22);
}

/* ============================================================
   Type scale — apply via class.
   18 styles across 7 tiers, lifted from Typography page.
   ============================================================ */
.t-display-1 { font-family: var(--font-sans); font-weight: 700; font-size: 56px; line-height: 1.20; letter-spacing: -0.0307em; }
.t-display-2 { font-family: var(--font-sans); font-weight: 700; font-size: 40px; line-height: 1.30; 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.027em; }

.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.023em; }

.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.40;  letter-spacing: -0.012em; }

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

.t-body-1n   { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.50;  letter-spacing: 0.0057em; }
.t-body-1r   { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.625; letter-spacing: 0.0057em; }
.t-body-2n   { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.467; letter-spacing: 0.0096em; }
.t-body-2r   { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.60;  letter-spacing: 0.0096em; }

.t-label-1n  { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.429; letter-spacing: 0.0145em; }
.t-label-1r  { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.571; 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; }

/* ============================================================
   Element defaults — semantic mappings to type scale
   ============================================================ */
html, body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-page); }
h1 { font: 700 32px/1.375 var(--font-sans); letter-spacing: -0.0253em; }
h2 { font: 700 28px/1.358 var(--font-sans); letter-spacing: -0.0236em; }
h3 { font: 700 24px/1.334 var(--font-sans); letter-spacing: -0.023em;  }
h4 { font: 600 20px/1.40  var(--font-sans); letter-spacing: -0.012em;  }
h5 { font: 600 18px/1.445 var(--font-sans); letter-spacing: -0.002em;  }
h6 { font: 600 16px/1.50  var(--font-sans); letter-spacing: 0.0057em;  }
p, body { font: 500 16px/1.50 var(--font-sans); letter-spacing: 0.0057em; }
small { font: 500 13px/1.385 var(--font-sans); letter-spacing: 0.0194em; }
code, pre { font-family: var(--font-mono); }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }