/* ========================================================
   Offermate AI — Project Tokens
   Layered on top of the Wanted Design System.
   wanted-ds.css provides ALL color/type/spacing primitives.
   This file re-maps legacy aliases used by pages built before
   the DS was attached, and adds layout / button / form helpers
   that consume DS tokens.
   ======================================================== */

@import url("wanted-ds.css");

:root {
  /* ---- Legacy color aliases → Wanted DS tokens ---- */
  --color-bg:           var(--color-background-normal);             /* #FFFFFF */
  --color-bg-elev:      var(--color-background-elevated);
  --color-bg-soft:      var(--color-background-alternate);          /* #F7F7F8 */
  --color-bg-strong:    var(--color-atomic-neutral-75);             /* #EAEBEC */
  --color-bg-invert:    var(--color-background-inverse);            /* #171719 */

  --color-text:         var(--color-text-normal);                   /* #171719 */
  --color-text-sub:     var(--color-text-neutral);                  /* #37383C */
  --color-text-muted:   var(--color-text-assistive);                /* rgba(55,56,60,0.61) */
  --color-text-dim:     var(--color-text-hint);                     /* rgba(55,56,60,0.43) */
  --color-text-onDark:  #ffffff;
  --color-text-onDark-sub: rgba(255,255,255, 0.72);

  --color-line:         var(--color-line-normal);                   /* rgba(112,115,124,0.22) */
  --color-line-dim:     var(--color-alpha-neutral-12);
  /* keep --color-line-strong from DS at its DS value */

  --color-primary:        var(--color-primary-normal);              /* #0066FF */
  --color-primary-hover:  var(--color-primary-hover-bg);            /* #005EEB */
  --color-primary-press:  var(--color-primary-pressed-bg);          /* #0054D1 */
  --color-primary-soft:   var(--color-primary-subtle-bg);           /* #EAF2FE */
  --color-primary-soft-2: var(--color-atomic-blue-50);              /* #F7FBFF */

  --color-accent:   var(--color-status-positive);                   /* #00BF40 */
  --color-warning:  var(--color-status-cautionary);                 /* #FF9200 */
  --color-danger:   var(--color-status-negative);                   /* #FF4242 */

  /* Tag palette pulled into atomic blue / green / yellow / violet / neutral */
  --color-tag-blue-bg:   var(--color-atomic-blue-100);   --color-tag-blue-fg:   var(--color-atomic-blue-800);
  --color-tag-mint-bg:   var(--color-atomic-green-100);  --color-tag-mint-fg:   var(--color-atomic-green-800);
  --color-tag-amber-bg:  var(--color-atomic-yellow-100); --color-tag-amber-fg:  var(--color-atomic-yellow-800);
  --color-tag-gray-bg:   var(--color-atomic-neutral-75); --color-tag-gray-fg:   var(--color-text-neutral);
  --color-tag-purple-bg: var(--color-atomic-violet-100); --color-tag-purple-fg: var(--color-atomic-violet-800);

  /* ---- Type aliases (legacy size scale, now consumed via DS classes when possible) ---- */
  --font-en: var(--font-sans);

  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-28: 28px;  --lh-28: 38px;
  --fs-32: 32px;  --lh-32: 44px;
  --fs-40: 40px;  --lh-40: 52px;
  --fs-48: 48px;  --lh-48: 58px;
  --fs-56: 56px;  --lh-56: 72px;
  --fs-72: 72px;  --lh-72: 80px;

  /* ---- Spacing aliases (DS provides --space-*; keep --sp-* for back-compat) ---- */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px;
  --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px;
  --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px; --sp-160: 160px;

  /* ---- Radius aliases ---- */
  --r-2: var(--radius-2); --r-4: var(--radius-4); --r-6: var(--radius-6);
  --r-8: var(--radius-8); --r-10: var(--radius-10); --r-12: var(--radius-12);
  --r-14: 14px; --r-16: var(--radius-16); --r-20: var(--radius-20);
  --r-24: var(--radius-24); --r-full: var(--radius-full);

  /* ---- Shadow aliases ---- */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-3: var(--shadow-lg);
  --shadow-4: var(--shadow-xl);
  --shadow-pop: 0 24px 60px rgba(23,23,23, 0.14), 0 8px 20px rgba(23,23,23, 0.06);

  --container: 1200px;
  --container-wide: 1320px;
  --header-h: 64px;
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.467;
  letter-spacing: 0.0096em;
  color: var(--color-text-normal);
  background: var(--color-background-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--color-primary-normal); color: #fff; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* ---- Type utilities (Wanted bilingual label pattern) ---- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.0194em;
  color: var(--color-primary-normal);
}
.label-en {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.0252em;
  color: var(--color-text-assistive);
}
.h-display { font-weight: 700; letter-spacing: -0.027em; line-height: 1.15; }
.h-section { font-size: 40px; line-height: 1.30; font-weight: 700; letter-spacing: -0.0282em; }
.text-muted { color: var(--color-text-assistive); }
.text-sub   { color: var(--color-text-neutral); }

/* ---- Buttons (Wanted spec: 40 / 48 / 56 height · radius 10) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-10);
  font-size: 15px; font-weight: 600; letter-spacing: 0.0096em;
  background: transparent; color: var(--color-text-strong);
  transition: background 150ms cubic-bezier(0.4,0,0.2,1),
              border-color 150ms cubic-bezier(0.4,0,0.2,1),
              color 150ms cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
}
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

.btn-primary {
  background: var(--color-primary-normal); color: var(--color-primary-on-normal);
  border-color: var(--color-primary-normal);
}
.btn-primary:hover {
  background: var(--color-primary-hover-bg); border-color: var(--color-primary-hover-bg);
}
.btn-primary:active {
  background: var(--color-primary-pressed-bg); border-color: var(--color-primary-pressed-bg);
}

.btn-dark {
  background: var(--color-background-inverse); color: var(--color-text-inverse);
}
.btn-dark:hover { background: var(--color-atomic-neutral-825); }

.btn-outline {
  border-color: var(--color-line-normal); color: var(--color-text-strong);
  background: var(--color-background-normal);
}
.btn-outline:hover {
  background: var(--color-interactive-hover);
  border-color: var(--color-text-strong);
}

.btn-ghost { color: var(--color-text-neutral); }
.btn-ghost:hover { background: var(--color-interactive-hover); }

/* ---- Tag / Badge ---- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  border-radius: var(--radius-4);
  font-size: 12px; font-weight: 600; letter-spacing: 0.0252em;
  background: var(--color-tag-gray-bg); color: var(--color-tag-gray-fg);
}
.tag-blue   { background: var(--color-tag-blue-bg);   color: var(--color-tag-blue-fg); }
.tag-mint   { background: var(--color-tag-mint-bg);   color: var(--color-tag-mint-fg); }
.tag-amber  { background: var(--color-tag-amber-bg);  color: var(--color-tag-amber-fg); }
.tag-purple { background: var(--color-tag-purple-bg); color: var(--color-tag-purple-fg); }
.tag-outline {
  background: transparent;
  border: 1px solid var(--color-line-normal);
  color: var(--color-text-neutral);
}

/* ---- Card ---- */
.card {
  background: var(--color-background-normal);
  border: 1px solid var(--color-line-normal);
  border-radius: var(--radius-16);
}
.card-hover:hover {
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-md);
}

/* ---- Form ---- */
.input, .textarea, .select {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--color-line-normal);
  border-radius: var(--radius-10);
  background: var(--color-background-normal);
  font-size: 15px; color: var(--color-text-normal);
  transition: border-color 150ms, box-shadow 150ms;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary-normal);
  box-shadow: 0 0 0 4px var(--color-primary-subtle-bg);
}
.textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; }
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-strong); margin-bottom: 8px; letter-spacing: 0.0145em; }
.field-help { font-size: 13px; color: var(--color-text-assistive); margin-top: 6px; }

/* ---- Divider ---- */
.divider { border: 0; border-top: 1px solid var(--color-line-normal); margin: 0; }

/* ---- Section pad ---- */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }

/* ---- Bilingual heading pattern ---- */
.bi-head { display: flex; flex-direction: column; gap: 12px; }
.bi-head .en {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.0194em;
  color: var(--color-primary-normal);
}
.bi-head .ko {
  font-size: 40px; line-height: 1.30; font-weight: 700;
  letter-spacing: -0.0282em;
  color: var(--color-text-strong);
}
.bi-head .sub {
  font-size: 16px; color: var(--color-text-neutral); line-height: 1.625;
  max-width: 640px;
  letter-spacing: 0.0057em;
}

/* ---- Utilities ---- */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}