/* ============================================================
   LK INDUSTRIES — Color & Type Tokens
   Heritage premium + industrial minimal.
   Navy authority · Gold precision · Engineered neutrals.
   ============================================================ */

/* ---------- Web Fonts ---------- */
/* Pretendard — Korean-first sans, pairs with Latin perfectly */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
/* Fraunces — display serif for editorial headlines, slight industrial flair */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");
/* JetBrains Mono — engineering numerals, specs, callouts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */

  /* Primary: Deep Navy — authority, precision, German-engineering trust */
  --lk-navy-900: #061222;     /* darkest, near-black with blue */
  --lk-navy-800: #0B2545;     /* hero backgrounds, primary brand */
  --lk-navy-700: #133463;
  --lk-navy-600: #1E4A86;
  --lk-navy-500: #2B65AE;
  --lk-navy-400: #5C8BC9;
  --lk-navy-300: #9DB7DC;
  --lk-navy-200: #CFDDED;
  --lk-navy-100: #E8EFF7;
  --lk-navy-50:  #F4F7FB;

  /* Accent: Precision Gold — micron tolerances, premium machined brass */
  --lk-gold-900: #5C4509;
  --lk-gold-800: #8B6712;
  --lk-gold-700: #B0841A;
  --lk-gold-600: #D4A017;     /* primary accent */
  --lk-gold-500: #E0B335;
  --lk-gold-400: #ECCB6A;
  --lk-gold-300: #F4DFA0;
  --lk-gold-200: #FAEDC9;
  --lk-gold-100: #FDF6E4;

  /* Neutrals: warm-leaning steel grays */
  --lk-ink-1000: #0A0D12;
  --lk-ink-900:  #16191F;
  --lk-ink-800:  #2A2E36;
  --lk-ink-700:  #3F444E;
  --lk-ink-600:  #5A6069;
  --lk-ink-500:  #7B8089;
  --lk-ink-400:  #9CA1A9;
  --lk-ink-300:  #C2C6CC;
  --lk-ink-200:  #DEE1E5;
  --lk-ink-100:  #EDEFF2;
  --lk-ink-50:   #F6F7F9;
  --lk-paper:    #FFFFFF;
  --lk-bone:     #FAFAF7;     /* off-white, blueprint paper feel */

  /* Semantic */
  --lk-success: #1E8E5A;
  --lk-warning: #C97A0E;
  --lk-danger:  #B23B2E;
  --lk-info:    var(--lk-navy-600);

  /* ---------- Semantic surface tokens ---------- */
  --bg:           var(--lk-paper);
  --bg-subtle:    var(--lk-bone);
  --bg-muted:     var(--lk-ink-50);
  --bg-inverse:   var(--lk-navy-800);
  --bg-inverse-deep: var(--lk-navy-900);

  --fg:           var(--lk-ink-900);     /* primary text */
  --fg-1:         var(--lk-ink-900);
  --fg-2:         var(--lk-ink-700);     /* secondary */
  --fg-3:         var(--lk-ink-500);     /* tertiary / captions */
  --fg-4:         var(--lk-ink-400);     /* disabled / placeholder */
  --fg-on-dark:   var(--lk-paper);
  --fg-on-dark-2: var(--lk-navy-200);
  --fg-on-dark-3: var(--lk-navy-300);

  --accent:       var(--lk-gold-600);
  --accent-hover: var(--lk-gold-700);
  --accent-fg:    var(--lk-navy-900);    /* text on gold */

  --primary:      var(--lk-navy-800);
  --primary-hover:var(--lk-navy-700);
  --primary-fg:   var(--lk-paper);

  --border:       var(--lk-ink-200);
  --border-strong:var(--lk-ink-300);
  --border-inverse: rgba(255,255,255,0.14);
  --hairline:     rgba(10,13,18,0.08);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Pretendard", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace;

  /* ---------- Scale (modular, 1.25 ratio, tightened at top) ---------- */
  --fs-12: 0.75rem;     /* 12px — micro-eyebrow */
  --fs-13: 0.8125rem;   /* 13px — caption */
  --fs-14: 0.875rem;    /* 14px — small */
  --fs-15: 0.9375rem;   /* 15px — UI default */
  --fs-16: 1rem;        /* 16px — body */
  --fs-18: 1.125rem;    /* 18px — body large */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;      /* h4 */
  --fs-28: 1.75rem;
  --fs-32: 2rem;        /* h3 */
  --fs-40: 2.5rem;
  --fs-48: 3rem;        /* h2 */
  --fs-64: 4rem;
  --fs-80: 5rem;        /* h1 / hero */
  --fs-104:6.5rem;      /* display */

  /* ---------- Weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  /* ---------- Tracking (letter-spacing) ---------- */
  --tr-display:  -0.02em;
  --tr-tight:    -0.012em;
  --tr-normal:   0;
  --tr-wide:      0.04em;
  --tr-eyebrow:   0.16em;     /* uppercase eyebrows */
  --tr-spec:      0.08em;     /* specs/callouts */

  /* ============================================================
     SPACING — 4px base, doubling at the top
     ============================================================ */
  --sp-0:  0;
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */
  --sp-32: 8rem;      /* 128 */
  --sp-40: 10rem;     /* 160 */

  /* ============================================================
     RADII — restrained; this brand prefers right angles
     ============================================================ */
  --r-0:  0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — sparse, technical
     ============================================================ */
  --shadow-hairline: 0 0 0 1px var(--hairline);
  --shadow-xs: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 37, 69, 0.07), 0 1px 2px rgba(11, 37, 69, 0.04);
  --shadow-md: 0 8px 22px rgba(11, 37, 69, 0.09), 0 2px 6px rgba(11, 37, 69, 0.05);
  --shadow-lg: 0 24px 48px -12px rgba(11, 37, 69, 0.18), 0 8px 16px rgba(11, 37, 69, 0.07);
  --shadow-inset-hair: inset 0 0 0 1px rgba(11, 37, 69, 0.08);
  --shadow-focus: 0 0 0 3px rgba(212, 160, 23, 0.32);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-precise:  cubic-bezier(0.65, 0, 0.35, 1); /* mechanical, even */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-slower: 600ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container: 1280px;
  --container-narrow: 960px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

/* Display — Fraunces, used sparingly for hero statements */
.lk-display, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(3rem, 7vw, var(--fs-104));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* h1 — section heroes */
h1, .lk-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: inherit;
  margin: 0;
}

h2, .lk-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: clamp(2rem, 3.6vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: inherit;
  margin: 0;
}

h3, .lk-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: inherit;
  margin: 0;
}

h4, .lk-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0;
}

h5, .lk-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Eyebrow — uppercase mono label that sits above headlines */
.lk-eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Body */
p, .lk-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.lk-lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  letter-spacing: -0.005em;
}

.lk-small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.lk-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-spec);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* Spec — numerical / unit data */
.lk-spec {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-spec);
}

.lk-spec-num {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Code / mono inline */
code, .lk-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Link — restrained, underline on hover */
a, .lk-link {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
a:hover, .lk-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-hover);
}

/* Hairline rule */
.lk-rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.lk-rule--strong { background: var(--fg-1); }
.lk-rule--gold   { background: var(--accent); }

/* Korean-specific tweaks: slightly looser leading for Hangul */
:lang(ko) {
  word-break: keep-all;
  line-break: strict;
}