/* ============================================================
   현대드림투어 — Foundation Tokens
   Colors • Typography • Spacing • Radius • Shadows • Semantics
   ============================================================ */

/* ----------------------------------------------------------
   Webfonts
   - Pretendard (단일 폰트) → 로컬 TTF (fonts/ 폴더, 사용자 업로드본)
     한글·영문·숫자 전체를 하나의 폰트로 처리.
   - JetBrains Mono  → 코드·숫자 정렬 전용 (Google Fonts CDN)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Pretendard Variable (primary — prefer for weight interpolation) ---- */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/PretendardVariable.ttf') format('truetype-variations'),
       url('../fonts/PretendardVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Static weight fallbacks (browsers without variable-font support) ---- */
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Thin.ttf')        format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-ExtraLight.ttf')  format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Light.ttf')       format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Regular.ttf')     format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Medium.ttf')      format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-SemiBold.ttf')    format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Bold.ttf')        format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-ExtraBold.ttf')   format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Black.ttf')       format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- Primary · Forest Green ---------- */
  --primary-50:  #E8F5F2;
  --primary-100: #B8E0D8;
  --primary-300: #5BBDAD;
  --primary-500: #1E9D8B;   /* MAIN */
  --primary-700: #145E54;

  /* ---------- Secondary · Warm Orange ---------- */
  --secondary-50:  #FCEFDB;
  --secondary-100: #F5C988;
  --secondary-300: #E89B3D;
  --secondary-500: #CA7700;  /* MAIN */
  --secondary-700: #7A4700;

  /* ---------- Neutral · Gray Scale ---------- */
  --neutral-50:  #FAFAFA;   /* 페이지 배경 */
  --neutral-100: #F0F0EE;   /* 서피스, 보더 약 */
  --neutral-200: #D9D9D6;   /* 보더 기본 */
  --neutral-400: #A8A8A4;   /* 비활성 텍스트 */
  --neutral-600: #6E6E6B;   /* 보조 텍스트 */
  --neutral-800: #3D3D3B;   /* 본문 강조 */
  --neutral-900: #1E1E1E;   /* 헤드라인, 다크 서피스 */

  /* ---------- Semantic ---------- */
  --success: #2E7D5B;
  --warning: #E89B3D;
  --error:   #C0392B;
  --info:    #2C6FB5;

  /* ---------- Semantic aliases (fg/bg/border) ---------- */
  --bg-page:        var(--neutral-50);
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   var(--neutral-100);
  --bg-dark:        var(--neutral-900);
  --bg-tint-primary:   var(--primary-50);
  --bg-tint-secondary: var(--secondary-50);

  --fg-heading:     var(--neutral-900);
  --fg-body:        var(--neutral-800);
  --fg-muted:       var(--neutral-600);
  --fg-disabled:    var(--neutral-400);
  --fg-on-dark:     #FFFFFF;
  --fg-on-primary:  #FFFFFF;
  --fg-link:        var(--primary-500);
  --fg-link-hover:  var(--primary-700);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--primary-500);

  /* ---------- Typography ---------- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale tokens — size / line-height / letter-spacing */
  --font-display: 500 40px/1.2  var(--font-sans);
  --font-h1:      500 32px/1.3  var(--font-sans);
  --font-h2:      500 24px/1.4  var(--font-sans);
  --font-h3:      500 18px/1.5  var(--font-sans);
  --font-body:    400 15px/1.7  var(--font-sans);
  --font-body-sm: 400 13px/1.6  var(--font-sans);
  --font-caption: 400 12px/1.5  var(--font-sans);

  --tracking-display: -0.02em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.01em;
  --tracking-h3:      -0.005em;
  --tracking-body:     0;
  --tracking-caption:  0.01em;
  --tracking-allcaps:  0.05em;

  /* ---------- Spacing (8px grid) ---------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(30,30,30,0.06);
  --shadow-md:   0 4px 12px rgba(30,30,30,0.08);
  --focus-ring:  0 0 0 3px rgba(30,157,139,0.15);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --grid-cols: 12;
  --grid-gutter: 24px;

  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   320ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-body);
  font: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font: var(--font-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--fg-heading);
  margin: 0;
}
h2, .h2 {
  font: var(--font-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--fg-heading);
  margin: 0;
}
h3, .h3 {
  font: var(--font-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--fg-heading);
  margin: 0;
}
.display {
  font: var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-heading);
}
p, .body { font: var(--font-body); color: var(--fg-body); }
.body-sm { font: var(--font-body-sm); color: var(--fg-body); }
.caption  { font: var(--font-caption); letter-spacing: var(--tracking-caption); color: var(--fg-muted); }
.allcaps  { text-transform: uppercase; letter-spacing: var(--tracking-allcaps); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}