/* ============================================================
   Obsidian Aurora Glass — Design Tokens
   모든 색상·표면·타이포·모션 값은 여기서만 정의한다.
   ============================================================ */

:root {
  /* ---------- Background space ---------- */
  --bg-deep: #05070d;
  --bg-mid: #080c16;
  --bg-raise: #0b1020;

  /* ---------- Text ---------- */
  --text-primary: #f4f7ff;
  --text-secondary: rgba(226, 232, 240, 0.68);
  --text-muted: rgba(203, 213, 225, 0.46);

  /* ---------- Accent light ---------- */
  --ice-cyan: #66e3ff;
  --electric-indigo: #7c6cff;
  --ultraviolet: #a970ff;
  --success: #49d69a;
  --warning: #f1b84b;
  --error: #ff6b72;

  /* ---------- Glass borders / lines ---------- */
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-soft: rgba(255, 255, 255, 0.07);
  --divider: rgba(255, 255, 255, 0.06);

  /* ---------- Glass surface: LOW (배경에 스며드는 낮은 층) ---------- */
  --surface-low-bg: rgba(255, 255, 255, 0.028);
  --surface-low-blur: 10px;
  --surface-low-radius: 14px;
  --surface-low-shadow: 0 4px 18px rgba(2, 4, 10, 0.35);

  /* ---------- Glass surface: MEDIUM (콘텐츠 패널) ---------- */
  --surface-med-bg: rgba(13, 18, 36, 0.52);
  --surface-med-blur: 18px;
  --surface-med-radius: 20px;
  --surface-med-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(2, 4, 10, 0.5);

  /* ---------- Glass surface: FLOATING (컨트롤·강조 패널) ---------- */
  --surface-float-bg: rgba(17, 23, 46, 0.66);
  --surface-float-blur: 26px;
  --surface-float-radius: 26px;
  --surface-float-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 20px 60px rgba(2, 4, 10, 0.6),
    0 0 46px rgba(102, 227, 255, 0.05);

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(44px, 6.2vw, 78px);
  --fs-h2: clamp(28px, 3.4vw, 40px);
  --fs-h3: clamp(19px, 2vw, 23px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  /* ---------- Spacing ---------- */
  --space-section: clamp(96px, 14vh, 170px);
  --content-max: 1120px;
  --reading-max: 720px;

  /* ---------- Motion ---------- */
  --ease-glass: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 0.22s;
  --dur-med: 0.55s;
  --dur-reveal: 0.8s;
}