/* ════════════════════════════════════════════════════════════════
   Bohrline · Design Tokens
   ────────────────────────────────────────────────────────────────
   Locked 2026-05-26 — Sample H (B + A + F synthesis).
   ANY change requires updating feedback-atomverse-design-lock memory.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Palette (Sora HUD base) ─── */
  --bg:      #06080F;
  --bg-2:    #0A0E1A;
  --bg-3:    #10162A;
  --bg-card: rgba(94, 234, 212, 0.025);
  --grid:    rgba(94, 234, 212, 0.05);

  /* ─── Text (softer than F, closer to MUBI A) ─── */
  --text:           #E4E8F4;
  --text-warm:      #F4F0E3;
  --text-dim:       #7A85A8;
  --text-very-dim:  #6B76A0;  /* raised from #4A5680 (2.8:1, fails WCAG) toward ~4.5:1 on navy */

  /* ─── Accent (Sora cyan + lime) ─── */
  --accent:         #5EEAD4;
  --accent-bright:  #7FF0DE;
  --accent-dim:     rgba(94, 234, 212, 0.20);
  --accent-soft:    rgba(94, 234, 212, 0.10);
  --accent-2:       #A3E635;
  --accent-2-soft:  rgba(163, 230, 53, 0.15);
  --danger:         #EF4444;   /* UI 위험·음수·파괴 상태 표시 (데이터 컬러맵 색과 구분). 13+ 레슨 중복 해소용 단일 출처 */

  /* ─── Rules ─── */
  --rule:        rgba(94, 234, 212, 0.13);
  --rule-strong: rgba(94, 234, 212, 0.30);

  /* ─── Type stack (A's editorial + F's mono) ─── */
  --font-display: 'Cormorant Garamond', serif;       /* English display titles (upright) */
  --font-serif:   'Noto Serif KR', serif;            /* Korean body serif */
  --font-sans:    'Pretendard Variable', system-ui, sans-serif;  /* UI body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;     /* Data / tags */

  /* ─── Spacing scale ─── */
  --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;

  /* ─── Radius ─── */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 8px;
  --r-4: 14px;

  /* ─── Motion ─── */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  0.18s;
  --dur-med:   0.30s;
  --dur-slow:  0.50s;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-pad: 48px;

  /* ─── Glassmorphism tokens ─── */
  --glass-bg:        linear-gradient(135deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.012) 100%);
  --glass-bg-strong: linear-gradient(135deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 100%);
  --glass-bg-faint:  linear-gradient(135deg, rgba(255,255,255,0.02)  0%, rgba(255,255,255,0.005) 100%);
  --glass-border:    rgba(94, 234, 212, 0.18);
  --glass-border-2:  rgba(94, 234, 212, 0.10);
  --glass-blur:      blur(24px) saturate(180%);
  --glass-blur-lg:   blur(32px) saturate(200%);
  --glass-shadow:    0 8px 32px rgba(6, 8, 15, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-shadow-lg: 0 20px 60px rgba(6, 8, 15, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-glow:      0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 36px rgba(6, 8, 15, 0.5);
}

/* Mobile: lighter blur (single biggest GPU cost on phones).
   backdrop-filter compositing is ~3-4× cheaper at 12-16px vs 24-32px. */
@media (max-width: 768px) {
  :root {
    --glass-blur:    blur(12px) saturate(140%);
    --glass-blur-lg: blur(16px) saturate(150%);
  }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Ambient orbs (slow color bloom behind all glass) ─── */
html::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 18%, rgba(94, 234, 212, 0.06), transparent 60%),
    radial-gradient(50% 45% at 88% 78%, rgba(163, 230, 53, 0.045), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(94, 234, 212, 0.02), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: orb-drift 24s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-30px, 20px); }
}

/* ─── Global base reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Premium ambient gradient (no graph-paper grid) — Sample H locked 2026-05-27 */
  background:
    radial-gradient(ellipse 70% 50% at 18% 12%, rgba(94, 234, 212, 0.045), transparent 65%),
    radial-gradient(ellipse 55% 45% at 82% 88%, rgba(163, 230, 53, 0.030), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 55%, rgba(20, 30, 60, 0.40), transparent 75%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  letter-spacing: -0.020em;
  word-break: keep-all;          /* Korean typography 2026 */
  line-height: 1.7;
  font-size: 15px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

a { color: inherit; text-decoration: none; }

/* Academic-only elements: hidden by default (intuitive mode) */
/* Layer toggle removed — all content unified into one always-visible view.
   직관 서술과 학술 심화(수식·유도·출처)를 한 레슨에 함께 노출한다. */
.academic-only { display: block; }
.intuitive-only { display: block; }

/* Lang switch: hide opposite-language elements */
[data-lang-only="ko"] { display: revert; }
[data-lang-only="en"] { display: none; }
body.lang-en [data-lang-only="ko"] { display: none; }
body.lang-en [data-lang-only="en"] { display: revert; }