/* ═══════════════════════════════════════════════════════════════
   Local Mile Design System — "First Light on the East Sea"
   Single source of truth for design tokens.
   Color ratio follows the 60 : 30 : 10 rule
     60% Fog  — cool sea-fog neutrals (backgrounds, text)
     30% Sea  — deep East Sea teal-navy (brand, structure)
     10% Dawn — Homigot sunrise coral (conversion accents only)
   Docs: docs/DESIGN-SYSTEM.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 60% Dominant · Fog (cool neutrals) ── */
  --fog-0:   #FFFFFF;
  --fog-50:  #F6F8F9;   /* page background */
  --fog-100: #EDF1F2;
  --fog-200: #E2E8EA;
  --fog-300: #D2DADE;
  --fog-400: #C2CDD2;
  --ink:      #16262E;  /* primary text */
  --ink-soft: #4C5E67;  /* secondary text */
  --ink-mute: #78888F;  /* placeholder / disabled */

  /* ── 30% Secondary · Sea (deep East Sea teal-navy) ── */
  --sea-950: #081C26;
  --sea-900: #0E2A38;   /* brand primary */
  --sea-800: #143A4C;
  --sea-700: #1E4A5F;
  --sea-500: #35708C;
  --sea-300: #7FA8BD;
  --sea-100: #DCEAF1;
  --sea-50:  #EEF5F8;

  /* ── 10% Accent · Dawn (Homigot sunrise coral) ── */
  --dawn-700: #9C3609;
  --dawn-600: #B8420F;  /* buttons w/ white text (AA) */
  --dawn-500: #E85D2F;  /* icons, large display accents */
  --dawn-400: #F0854F;
  --dawn-100: #FCE7DB;
  --dawn-50:  #FDF3EC;

  /* ── Feedback ── */
  --success:      #1B7A53;
  --success-soft: #E3F2EA;
  --warn:         #B45309;
  --warn-soft:    #FEF3E2;
  --danger:       #B3261E;
  --danger-soft:  #FBEDEB;

  /* ── Typography ── */
  --font-display: "Fraunces", "Nanum Myeongjo", "Hiragino Mincho ProN", "Songti SC", Georgia, serif;
  --font-display-ko: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-body: "Manrope", "Apple SD Gothic Neo", "Hiragino Sans", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ── Elevation ── */
  --shadow-card:  0 1px 2px rgba(8, 28, 38, 0.05), 0 12px 32px -12px rgba(8, 28, 38, 0.12);
  --shadow-float: 0 2px 4px rgba(8, 28, 38, 0.06), 0 24px 48px -16px rgba(8, 28, 38, 0.18);

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ Base ═══ */

/* 한국어 페이지는 세리프(명조) 대신 고딕 — Tailwind font-headline 유틸보다 우선 */
html[lang="ko"] {
  --font-display: var(--font-display-ko);
}
html[lang="ko"] .font-headline {
  font-family: var(--font-display-ko);
}

::selection {
  background: var(--dawn-100);
  color: var(--dawn-700);
}

:focus-visible {
  outline: 2px solid var(--dawn-600);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ Signature · horizon rule ═══
   A hairline that travels from the deep sea into first light.
   Use under eyebrows and section titles — one per section. */

.horizon-rule {
  display: block;
  width: 72px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    var(--sea-900) 0%,
    var(--sea-500) 52%,
    var(--dawn-500) 80%,
    var(--dawn-400) 100%);
}

.horizon-rule--wide { width: 100%; opacity: 0.9; }

/* Eyebrow label above section titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea-700);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--sea-500), var(--dawn-500));
}

.eyebrow--on-dark { color: var(--sea-300); }

/* ═══ Buttons ═══ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.875rem 2rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.btn:active { transform: translateY(1px); }

/* Conversion actions only — the 10% */
.btn-accent {
  background: var(--dawn-600);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-accent:hover { background: var(--dawn-500); transform: translateY(-2px); box-shadow: var(--shadow-float); }

/* Structural / navigational actions — the 30% */
.btn-sea {
  background: var(--sea-900);
  color: #fff;
}
.btn-sea:hover { background: var(--sea-700); transform: translateY(-2px); }

/* Quiet actions — the 60% */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--fog-300);
}
.btn-ghost:hover { border-color: var(--sea-500); color: var(--sea-700); }

/* On dark (sea) surfaces */
.btn-ghost--on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-ghost--on-dark:hover { background: rgba(255, 255, 255, 0.1); }

/* ═══ Cards ═══ */

.card {
  background: var(--fog-0);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

/* ═══ Utilities ═══ */

.editorial-shadow { box-shadow: var(--shadow-card); }
.float-shadow { box-shadow: var(--shadow-float); }
.glass-effect { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }