/* ============================================================
   Maltani Design System — colors, type, spacing tokens
   Import once, use everywhere via CSS custom properties.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Spectral:wght@300;400;500;600&family=Mulish:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ---------- BASE COLOR PALETTE ---------- */
  --ink:           #161310;   /* warm near-black, primary text */
  --ink-90:        #2A201A;   /* dusk surface */
  --ink-70:        #4A3F36;
  --ink-50:        #6E5F52;

  --bone:          #F4EEE4;   /* off-white page bg */
  --bone-60:       #FAF6EE;
  --paper:         #FFFFFF;

  --champagne:     #B89A6E;   /* brushed metal accent */
  --champagne-60:  #D4BD9A;
  --champagne-25:  rgba(184, 154, 110, 0.25);
  --champagne-10:  rgba(184, 154, 110, 0.10);

  --amber:         #E89A3C;   /* primary brand accent */
  --amber-bright:  #F4B25A;
  --amber-deep:    #C25E1A;
  --amber-glow:    rgba(232, 154, 60, 0.45);

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --fg-1:          var(--ink);
  --fg-2:          var(--ink-70);
  --fg-3:          var(--ink-50);
  --fg-on-dark:    var(--bone);
  --fg-muted-on-dark: rgba(244, 238, 228, 0.65);

  --bg-1:          var(--bone);
  --bg-2:          var(--bone-60);
  --bg-dark:       var(--ink);
  --bg-dusk:       var(--ink-90);

  --accent:        var(--amber);
  --accent-deep:   var(--amber-deep);
  --rule:          var(--champagne-25);
  --rule-strong:   var(--champagne);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:  'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
  --font-sans:     'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-nav:      'AvenirLTStd', 'Avenir LT Std', 'Avenir Next', 'Avenir', 'Mulish', 'Nunito Sans', -apple-system, system-ui, sans-serif;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Type scale — desktop. Treat all as upper bounds; clamp() for fluid. */
  --fs-eyebrow:    11px;
  --fs-caption:    13px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-lead:       22px;
  --fs-h4:         24px;
  --fs-h3:         32px;
  --fs-h2:         48px;
  --fs-h1:         72px;
  --fs-display:    120px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-loose:      1.65;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.03em;

  /* ---------- SPACING (8pt base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  120px;
  --s-11:  160px;

  /* ---------- RADII ---------- */
  --r-0:   0;
  --r-1:   2px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --border-hair:    1px solid var(--rule);
  --border-strong:  1px solid var(--rule-strong);

  /* ---------- ELEVATION (used sparingly) ---------- */
  --shadow-none:  none;
  --shadow-glow:  inset 0 0 80px rgba(232, 154, 60, 0.18);
  --shadow-modal: 0 32px 80px rgba(22, 19, 16, 0.32);

  /* ---------- MOTION ---------- */
  --ease-settled:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quick:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:     240ms;
  --dur-medium:    600ms;
  --dur-slow:      900ms;
  --dur-pulse:     5000ms;

  /* ---------- LAYOUT ---------- */
  --container:     1280px;
  --container-wide: 1440px;
  --gutter:        24px;
}

html[lang="ko"] {
  --font-display:  'Cormorant Garamond', 'Noto Sans KR', Georgia, serif;
  --font-sans:     'Noto Sans KR', 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-nav:      'AvenirLTStd', 'Avenir LT Std', 'Avenir Next', 'Avenir', 'Mulish', 'Noto Sans KR', -apple-system, system-ui, sans-serif;
}

/* ============================================================
   Semantic element styles (use these directly)
   ============================================================ */

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--champagne);
  line-height: 1;
}

.ds-h1, .ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(56px, 8vw, var(--fs-h1));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-display {
  font-size: clamp(72px, 12vw, var(--fs-display));
  font-weight: var(--fw-light);
  font-style: italic;
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(36px, 5vw, var(--fs-h2));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* ============================================================
   Components
   ============================================================ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-quick),
              color var(--dur-quick) var(--ease-quick),
              transform 80ms linear;
  text-decoration: none;
}
.ds-btn:active { transform: scale(0.99); }

.ds-btn--primary {
  background: var(--ink);
  color: var(--bone);
}
.ds-btn--primary:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--ink);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--champagne);
}
.ds-btn--ghost:hover {
  background: var(--champagne);
  color: var(--bone);
}

.ds-btn--text {
  background: transparent;
  color: var(--ink);
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--champagne);
  border-radius: 0;
}

.ds-rule {
  border: 0;
  border-top: var(--border-hair);
  margin: 0;
}

.ds-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber-glow);
}

@keyframes ds-pulse {
  0%, 100% { opacity: 0.94; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.04); }
}
.ds-glow-pulse { animation: ds-pulse var(--dur-pulse) var(--ease-settled) infinite; }