/* ==========================================================================
   Design tokens
   Palette inherited from the Korean site (css/main.css): navy #1f2339 with a
   cyan #6cecff accent. Light-surface variants added so the accent can also be
   used as text on white at AA contrast.
   ========================================================================== */

:root {
  /* --- Ink / neutral ramp ------------------------------------------------ */
  --ink-900: #10131f;
  --ink-800: #1f2339; /* brand navy */
  --ink-700: #2b3050;
  --ink-600: #3d436a;
  --slate-500: #5b6180;
  --slate-400: #7d8399;
  --slate-300: #b7bccd;
  --slate-200: #dfe3ee;
  --slate-100: #f0f2f8;
  --slate-50: #f7f8fc;
  --paper: #ffffff;

  /* --- Accents ----------------------------------------------------------- */
  --cyan-300: #a5f3ff;
  --cyan-400: #6cecff; /* accent on dark surfaces */
  --cyan-600: #0e91ad; /* accent as text on light surfaces (AA on white) */
  --cyan-700: #0a6f85;
  --teal-400: #1fdddb;
  --purple-400: #ca7eff;
  --orange-400: #f39c5b;
  --coral-400: #ff7e7e;

  /* --- Semantic ---------------------------------------------------------- */
  --bg: var(--paper);
  --bg-muted: var(--slate-50);
  --bg-dark: var(--ink-800);
  --bg-darker: var(--ink-900);
  --text: var(--ink-800);
  --text-muted: var(--slate-500);
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.62);
  --border: var(--slate-200);
  --border-dark: rgba(255, 255, 255, 0.14);
  --link: var(--cyan-700);
  --focus: var(--cyan-600);

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0: clamp(0.938rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.063rem, 1rem + 0.31vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
  --step-4: clamp(1.875rem, 1.44rem + 2.17vw, 3.25rem);
  --step-5: clamp(2.25rem, 1.55rem + 3.5vw, 4.5rem);

  /* --- Space ------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Shape / depth ----------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 19, 31, 0.06),
    0 2px 8px rgba(16, 19, 31, 0.04);
  --shadow: 0 2px 6px rgba(16, 19, 31, 0.07), 0 12px 32px rgba(16, 19, 31, 0.08);
  --shadow-lg: 0 4px 12px rgba(16, 19, 31, 0.08),
    0 24px 60px rgba(16, 19, 31, 0.14);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (max-width: 900px) {
  :root {
    --header-h: 62px;
  }
}