/* ============================================================
   LIIT Design System — Colors & Type
   주식회사 리아이티 (LIIT Co., Ltd.)
   의약품 판촉 영업 중계 전문 플랫폼
   ============================================================ */

/* --- Webfonts ------------------------------------------------
   Pretendard — locally hosted (SIL Open Font License 1.1)
   9 weights: Thin 100 → Black 900
   JetBrains Mono — Google Fonts CDN (SIL OFL 1.1)
   ----------------------------------------------------------- */
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Thin.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Black.woff") format("woff");
}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ───── Brand Color (from logo) ─────────────────────────── */
  --liit-mint-50:  #E8FBF7;
  --liit-mint-100: #C9F5EC;
  --liit-mint-200: #9DEDDD;
  --liit-mint-300: #6BE0CE;
  --liit-mint-400: #43D6C0;
  --liit-mint-500: #2BD8C5;  /* PRIMARY — 로고 메인 민트 */
  --liit-mint-600: #18B6A8;  /* PRIMARY HOVER */
  --liit-mint-700: #179391;  /* PRIMARY ACTIVE */
  --liit-mint-800: #155F6E;
  --liit-mint-900: #16445B;  /* 로고 그라데이션 끝점 */

  /* ───── Neutral (warm-cool gray, tinted toward teal) ────── */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFBFC;
  --gray-100: #F4F6F8;
  --gray-200: #E7EBEF;
  --gray-300: #D2D8DE;
  --gray-400: #A5AEB7;
  --gray-500: #6B7783;
  --gray-600: #4A5562;
  --gray-700: #2F3942;
  --gray-800: #1A2128;
  --gray-900: #0E1318;

  /* ───── Semantic ────────────────────────────────────────── */
  --color-success: #1DBF73;
  --color-warning: #F5A524;
  --color-danger:  #E5484D;
  --color-info:    var(--liit-mint-600);

  /* ───── Foreground / Background tokens ──────────────────── */
  --bg:        var(--gray-0);
  --bg-soft:   var(--gray-50);
  --bg-muted:  var(--gray-100);
  --bg-inverse: var(--gray-900);

  --fg:        var(--gray-900);  /* primary text */
  --fg-muted:  var(--gray-600);  /* secondary */
  --fg-subtle: var(--gray-500);  /* placeholders, captions */
  --fg-on-brand: #FFFFFF;

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --brand:        var(--liit-mint-500);
  --brand-hover:  var(--liit-mint-600);
  --brand-active: var(--liit-mint-700);
  --brand-soft:   var(--liit-mint-50);
  --brand-deep:   var(--liit-mint-900);

  /* ───── Type ────────────────────────────────────────────── */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* base scale (1.125 minor third) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: -0.005em;
  --tracking-wide:    0.04em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ───── Radius ──────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ───── Shadow / Elevation ──────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(14, 19, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 19, 24, 0.05), 0 1px 2px rgba(14, 19, 24, 0.03);
  --shadow-md: 0 6px 16px -4px rgba(14, 19, 24, 0.08), 0 2px 4px rgba(14, 19, 24, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(14, 19, 24, 0.12), 0 4px 10px rgba(14, 19, 24, 0.04);
  --shadow-brand: 0 12px 30px -10px rgba(24, 182, 168, 0.45);

  /* ───── Spacing scale (4px base) ────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ───── 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-base:   200ms;
  --dur-slow:   320ms;
}

/* ───── Base reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ───── Semantic typography ─────────────────────────────── */
.display {
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
}
h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
}
.body-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
}
.body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.caption {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
}