/* ============================================================
   Jongno Tower Design System
   Colors & Type — Foundation tokens
   ============================================================
   Inspired by Figma's marketing surface: a strictly monochrome
   interface chrome where color exists only inside product
   content. The variable font hits unusual weight stops
   (320, 330, 340, 450, 480, 540) — that granular control IS
   the design.

   Note on fonts: the real product uses a proprietary
   "figmaSans" + "figmaMono". We substitute Inter Variable
   and JetBrains Mono — flag this and swap in real files when
   available.
   ============================================================ */

/* Brand font: Pretendard (Korean / Latin sans, by Kil Hyung-jin)
   Static weights only — see weight-mapping note below. */
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Mono fallback — Pretendard ships sans only, so we keep JetBrains Mono
   from Google Fonts for technical labels until a real mono is supplied. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------- Color: Interface chrome (strict B&W) -------- */
  --color-black:        #000000;
  --color-white:        #ffffff;

  /* -------- Color: Glass overlays -------- */
  --glass-dark:         rgba(0, 0, 0, 0.08);
  --glass-light:        rgba(255, 255, 255, 0.16);

  /* -------- Color: Critical (semantic only — chrome B&W의 유일한 예외) --------
     사용 한정: 폼 검증 에러, 인증 실패, 파괴적 액션 확인(삭제 등) 같은
     "의미가 색에 깃든" 신호. 장식·강조·일반 alert 용도로는 절대 사용 금지. */
  --color-critical:     #C8242E;

  /* -------- Color: Hero / product gradients --------
     Color exists ONLY in product content, never in chrome. */
  --gradient-hero:
    radial-gradient(140% 180% at 120% 50%, #6aa8ff 0%, #2960e8 18%, #0e2a9c 38%, #06154f 60%, #020820 85%, #000510 100%);

  /* -------- Semantic foreground / background -------- */
  --fg-1:               var(--color-black);    /* primary text */
  --fg-on-color:        var(--color-white);    /* text on dark/colored */
  --bg-page:            var(--color-white);
  --bg-card:            var(--color-white);
  --bg-footer:          var(--color-black);

  /* -------- Type: Families --------
     Brand sans → Pretendard (Korean + Latin)
     Mono       → JetBrains Mono (substitute, no real mono supplied) */
  --font-sans: "Pretendard", "SF Pro Display", "Apple SD Gothic Neo",
               system-ui, helvetica, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", menlo, monospace;

  /* -------- Type: Weight ladder --------
     Pretendard ships STATIC weights only (400, 500, 600, 700, 800).
     The brief's variable stops (320 / 330 / 340 / 450 / 480 / 540) are
     not reachable, so we remap them to the nearest installed weight.
     Keep using these tokens — the visual hierarchy is preserved, just
     coarser than a true variable font would allow. */
  --weight-thin:        400; /* was 320 — Pretendard's lightest static */
  --weight-light:       400; /* was 330 */
  --weight-light-plus:  400; /* was 340 */
  --weight-regular:     400;
  --weight-medium:      500; /* was 450 */
  --weight-medium-plus: 500; /* was 480 */
  --weight-semibold:    600; /* was 540 */
  --weight-bold:        700;
  --weight-extrabold:   800;

  /* -------- Type: Sizes -------- */
  --size-display:       86px;   /* 5.38rem */
  --size-h1:            64px;   /* 4rem */
  --size-h2:            26px;   /* 1.63rem */
  --size-h3:            24px;   /* 1.5rem */
  --size-body-lg:       20px;   /* 1.25rem */
  --size-body:          16px;   /* 1rem */
  --size-body-light:    18px;   /* 1.13rem */
  --size-mono:          18px;   /* 1.13rem */
  --size-mono-sm:       12px;   /* 0.75rem */

  /* -------- Type: Letter-spacing --------
     Always negative for sans, positive for mono. */
  --tracking-display:   -1.72px;
  --tracking-h1:        -0.96px;
  --tracking-h2:        -0.26px;
  --tracking-body-lg:   -0.14px;
  --tracking-body:      -0.14px;
  --tracking-tight-md:  -0.1px;
  --tracking-mono:      0.54px;
  --tracking-mono-sm:   0.6px;

  /* -------- Type: Line-heights -------- */
  --lh-display:         1.00;
  --lh-h1:              1.10;
  --lh-h2:              1.35;
  --lh-h3:              1.45;
  --lh-body:            1.40;
  --lh-body-light:      1.45;
  --lh-mono:            1.30;

  /* -------- Spacing scale (8px base, with off-scale stops) -------- */
  --space-px:           1px;
  --space-2:            2px;
  --space-4:            4px;
  --space-4-5:          4.5px;
  --space-8:            8px;
  --space-10:           10px;
  --space-12:           12px;
  --space-16:           16px;
  --space-18:           18px;
  --space-24:           24px;
  --space-32:           32px;
  --space-40:           40px;
  --space-46:           46px;
  --space-48:           48px;
  --space-50:           50px;

  /* -------- Border radius -------- */
  --radius-min:         2px;
  --radius-sm:          6px;
  --radius-md:          8px;
  --radius-pill:        50px;
  --radius-circle:      50%;

  /* -------- Shadow / elevation (used sparingly) -------- */
  --shadow-1:           0 1px 2px rgba(0, 0, 0, 0.04),
                        0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-2:           0 4px 12px rgba(0, 0, 0, 0.08),
                        0 12px 32px rgba(0, 0, 0, 0.06);

  /* -------- Focus ring (signature dashed) -------- */
  --focus-outline:      dashed 2px var(--color-black);
  --focus-outline-on-color: dashed 2px var(--color-white);
  --focus-offset:       2px;

  /* -------- Container -------- */
  --container-max:      1920px;
}

/* ============================================================
   Base / global
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-light-plus);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "kern" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { font-feature-settings: "kern" 1; }

/* ============================================================
   Semantic type roles
   ============================================================ */
.t-display {
  font-family: var(--font-sans);
  font-size: var(--size-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--size-h1);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--size-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

.t-h2-light {
  font-family: var(--font-sans);
  font-size: var(--size-h2);
  font-weight: var(--weight-light-plus);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--size-h3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h3);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--size-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body-lg);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-light);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

.t-body-light {
  font-family: var(--font-sans);
  font-size: var(--size-body-light);
  font-weight: var(--weight-thin);
  line-height: var(--lh-body-light);
  letter-spacing: var(--tracking-h2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  font-weight: 400;
  line-height: var(--lh-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--size-mono-sm);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
}

/* ============================================================
   Element-level defaults (optional opt-in)
   ============================================================ */
.prose h1 { @extend .t-h1; }   /* (informational — not used) */

/* Buttons — see ui_kits/website/Button.jsx for canonical impl */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  border: 0;
  cursor: pointer;
  transition: opacity 120ms linear, transform 120ms linear;
}
.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.btn--black {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 8px 18px 10px;
}
.btn--white {
  background: var(--color-white);
  color: var(--color-black);
  border-radius: var(--radius-pill);
  padding: 8px 18px 10px;
}
.btn--glass-dark {
  background: var(--glass-dark);
  color: var(--color-black);
  border-radius: var(--radius-pill);
  padding: 8px 18px 10px;
}
.btn--glass-light {
  background: var(--glass-light);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 8px 18px 10px;
}
.btn--icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  padding: 0;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.98); }

/* ============================================================
   Nav animations
   ============================================================ */
@keyframes jt-nav-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes jt-mega-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jt-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jt-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Base / page reset
   ------------------------------------------------------------
   Shared across every page. Previously these three rules were
   duplicated in a <style> block inside each HTML file — keep
   them here only (single source of truth).
   ============================================================ */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-white, #fff); }
::selection { background: var(--color-black, #000); color: var(--color-white, #fff); }