/* =============================================================
   ERTIER Design System — Tokens
   Aesthetic: Luxury Black + Gold (Cartier / Bvlgari mood)
   ============================================================= */

/* ---------- Webfonts ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@300;400;500&display=swap");

:root {
  /* ---------- Palette ---------- */
  --bg:              #0A0809;     /* deep cinema black, slightly warm */
  --bg-elev:         #100C0A;     /* one notch up, for sticky chrome */
  --surface:         #16110D;     /* card / surface */
  --surface-2:       #1E1812;     /* hovered surface */
  --fg:              #F5EFE0;     /* warm cream — primary text */
  --fg-2:            #C7BFAE;     /* secondary text */
  --fg-3:            #8A8270;     /* tertiary / caption */
  --fg-mute:         #5A5346;     /* disabled / very muted */

  --gold:            #C9A35A;     /* classic gold — accents, CTA, dividers */
  --gold-bright:     #E5C07B;     /* hover / highlight */
  --gold-deep:       #B89048;     /* pressed */
  --gold-ink:        #8A6B30;     /* dark gold for text on cream (rare) */

  --line:            rgba(201, 163, 90, 0.20);   /* default thin gold line */
  --line-strong:     rgba(201, 163, 90, 0.50);   /* hover / focus border */
  --line-fg:         rgba(245, 239, 224, 0.10);  /* very subtle cream line */

  --danger:          #C45A4F;
  --success:         #6B8F6E;

  /* ---------- Glow / Shadow ---------- */
  --glow-radial:     radial-gradient(ellipse at 50% 30%, rgba(201,163,90,0.18), transparent 60%);
  --shadow-card:     0 24px 48px -16px rgba(0,0,0,0.60);
  --shadow-glow:     0 0 32px -8px rgba(201,163,90,0.25);
  --shadow-modal:    0 32px 80px -16px rgba(0,0,0,0.80);

  /* ---------- Type families ---------- */
  --font-kr:         "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif:      "Cormorant Garamond", "Times New Roman", serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (fluid) ---------- */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-md:         18px;
  --text-lg:         clamp(20px, 1.6vw, 24px);
  --text-xl:         clamp(28px, 2.4vw, 36px);
  --text-2xl:        clamp(36px, 3.6vw, 56px);
  --text-3xl:        clamp(48px, 5.6vw, 88px);
  --text-display:    clamp(64px, 8vw, 128px);

  /* ---------- Spacing ---------- */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         24px;
  --space-6:         32px;
  --space-7:         48px;
  --space-8:         64px;
  --space-9:         96px;
  --space-10:        128px;
  --section-y:       clamp(80px, 10vw, 160px);

  /* ---------- Radius ---------- */
  --radius-0:        0px;
  --radius-sm:       2px;        /* subtle softening on cards/inputs */
  --radius-pill:     9999px;     /* capsule buttons only */

  /* ---------- Borders ---------- */
  --border:          1px solid var(--line);
  --border-strong:   1px solid var(--line-strong);
  --border-gold:     1px solid var(--gold);

  /* ---------- Layout ---------- */
  --container:       1320px;
  --container-pad:   clamp(24px, 4vw, 48px);
  --header-h:        72px;

  /* ---------- Motion ---------- */
  --ease:            cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-snap:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:        160ms;
  --dur:             280ms;
  --dur-slow:        560ms;

  /* ---------- Z-Index ---------- */
  --z-header:        50;
  --z-drawer:        80;
  --z-modal:         90;
  --z-toast:         100;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic typography ---------- */

/* H1 — page hero (Korean Pretendard 800) */
.h-display, h1.h-display {
  font-family: var(--font-kr);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}

/* H1 standard */
h1, .h1 {
  font-family: var(--font-kr);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* H2 — section headlines */
h2, .h2 {
  font-family: var(--font-kr);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* H3 — sub headlines */
h3, .h3 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* H4 — card / list titles */
h4, .h4 {
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--fg);
}

/* Body */
p, .p {
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--fg-2);
  text-wrap: pretty;
}
.p-lead {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--fg);
}

/* Mono caption / eyebrow / label */
.eyebrow, .caption-mono, .label-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.caption-mono { color: var(--fg-3); }

/* Serif accent — drop caps, English subtitles, pulled quotes */
.serif, .serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.serif-display {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Wordmark — ERTIER uppercase Cormorant 600 */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Numbers / chapter numerals */
.numeral-mono {
  font-family: var(--font-mono);
  font-weight: 300;
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* ---------- Utility primitives ---------- */
.gold { color: var(--gold); }
.gold-bright { color: var(--gold-bright); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }

.divider-gold {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--space-7) 0;
}
.divider-gold-strong {
  height: 1px;
  background: var(--line-strong);
}

.glow-bg {
  position: relative;
  isolation: isolate;
}
.glow-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glow-radial);
  pointer-events: none;
  z-index: -1;
}

::selection {
  background: var(--gold);
  color: var(--bg);
}

/* Buttons (foundational tokens — full styles in components) */
.btn {
  font-family: var(--font-kr);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: var(--radius-0);
  border: var(--border-gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.btn:active { transform: scale(0.98); }
.btn-solid { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--bg); }
.btn-pill { border-radius: var(--radius-pill); padding: 12px 24px; }