/* AUTO-SYNCED from docs/Design/design-tokens.css (sha256:4eb21698). Do not edit. */
/* Run: python scripts/sync_design_tokens.py */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');


:root {
  /* ============================================================
     1. BRAND PALETTE
     ============================================================ */
  --vb-ink:        #1A1F2E;
  --vb-parchment:  #F8F4ED;
  --vb-aubergine:  #5D4276;
  --vb-ember:      #B8915D;
  --vb-sage:       #6B8E7F;
  --vb-surface:    #FFFFFF;

  /* ============================================================
     2. SEMANTIC TEXT
     ============================================================ */
  --vb-text-primary:    #1A1F2E;
  --vb-text-secondary:  #4A4F5C;
  --vb-text-tertiary:   #8B8D94;
  --vb-text-on-dark:    #F8F4ED;
  --vb-text-on-accent:  #FFFFFF;

  /* ============================================================
     3. SEMANTIC SURFACES & BORDERS
     ============================================================ */
  --vb-bg-page:        #F8F4ED;
  --vb-bg-elevated:    #FFFFFF;
  --vb-bg-tint:        #EFE9DD;
  --vb-wikt-bg:        #F7F3EC;  /* Wiktionary 박스 전용 — bg-tint 보다 연한 배경 (§169) */
  --vb-bg-deep:        #1A1F2E;  /* 다크 푸터, 헤더 inverse 등 */

  --vb-border:         #E5DDD0;
  --vb-border-soft:    #EFE9DD;
  --vb-border-strong:  #C8BFAF;
  --vb-border-accent:  #5D4276;

  /* ============================================================
     4. STATE & HIGHLIGHT
     ============================================================ */
  --vb-aubergine-soft:   rgba(93, 66, 118, 0.08);
  --vb-aubergine-medium: rgba(93, 66, 118, 0.16);

  /* 단어 학습 상태 */
  --vb-highlight-unlearned:        rgba(184, 145, 93, 0.16);
  --vb-highlight-unlearned-border: #B8915D;
  --vb-highlight-unlearned-text:   #8B6738;
  --vb-highlight-unlearned-active: #B8915D;

  --vb-highlight-learned:         rgba(107, 142, 127, 0.16);
  --vb-highlight-learned-border:  #6B8E7F;
  --vb-highlight-learned-text:    #4F6B5D;

  /* Reader-specific: TTS 재생 중 활성 문장 highlight */
  --vb-highlight-active: color-mix(in srgb, var(--vb-ember) 48%, white 52%);

  /* Reader 하이라이트 팔레트 — 낭독 중 문장(speaking) / 북마크 문장(bookmark) */
  --hl-speaking-bg:   #e9e2f7;  /* 부드러운 보라 배경 */
  --hl-speaking-text: #2b2722;  /* 본문 잉크 그대로 */
  --hl-bookmark-bg:   #f6e6bf;  /* 호박색 (종이 형광펜) */
  --hl-bookmark-text: #2b2722;
  --hl-bookmark-edge: #d8b15f;  /* 왼쪽 3px 보더 */

  /* Reader ANNOTATE 단어 레벨 배경 하이라이트 (easy/medium/hard) */
  --hl-annot-easy:   #f1ecf8;  /* 은은한 연보라 (문장에 스며들게) */
  --hl-annot-medium: #e8def3;  /* 중간 보라 */
  --hl-annot-hard:   #ddcfec;  /* 진한 보라 */

  /* Worksheet "From your vault" 드롭다운 메뉴 배경 — 은은한 연보라 (aubergine 12% + surface) */
  --vb-menu-vault-bg: #ece8ef;

  /* 시맨틱 상태 */
  --vb-success: #4F6B5D;
  --vb-warning: #8B6738;
  --vb-danger:  #A23B2F;
  --vb-info:    #3D4A6B;

  /* Reader 단어 레벨 underline — 무드에 맞춘 차분한 G/B/R */
  --vb-reader-level-easy:   #4F6B5D;  /* muted forest green */
  --vb-reader-level-medium: #3D4A6B;  /* muted slate blue */
  --vb-reader-level-hard:   #A23B2F;  /* muted brick red */

  /* ============================================================
     5. TYPOGRAPHY — Font families
     ============================================================ */
  --vb-font-serif: 'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --vb-font-sans:  'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vb-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     6. TYPOGRAPHY — Size scale
     ============================================================ */
  --vb-text-xs:      11px;
  --vb-text-sm:      13px;
  --vb-text-base:    15px;
  --vb-text-reading: 18px;
  --vb-text-lg:      19px;
  --vb-text-xl:      22px;
  --vb-text-2xl:     28px;
  --vb-text-3xl:     36px;
  --vb-text-4xl:     48px;
  --vb-text-hero:    clamp(36px, 6vw, 64px);

  /* ============================================================
     7. TYPOGRAPHY — Line heights
     ============================================================ */
  --vb-leading-tight:   1.2;
  --vb-leading-snug:    1.35;
  --vb-leading-normal:  1.55;
  --vb-leading-relaxed: 1.65;
  --vb-leading-reading: 1.75;

  /* ============================================================
     8. SPACING (8px baseline)
     ============================================================ */
  --vb-space-1:  4px;
  --vb-space-2:  8px;
  --vb-space-3:  12px;
  --vb-space-4:  16px;
  --vb-space-5:  20px;
  --vb-space-6:  24px;
  --vb-space-8:  32px;
  --vb-space-10: 40px;
  --vb-space-12: 48px;
  --vb-space-16: 64px;
  --vb-space-20: 80px;
  --vb-space-24: 96px;

  /* ============================================================
     9. CONTAINER WIDTHS
     ============================================================ */
  --vb-container-reader:  680px;
  --vb-container-narrow:  760px;
  --vb-container-default: 1080px;
  --vb-container-wide:    1280px;

  /* ============================================================
     10. BORDER RADIUS
     ============================================================ */
  --vb-radius-sm:   3px;
  --vb-radius-md:   6px;
  --vb-radius-lg:   10px;
  --vb-radius-xl:   16px;
  --vb-radius-full: 9999px;

  /* ============================================================
     11. BREAKPOINTS (참고용 — JS에서 활용)
        CSS @media에서는 직접 수치 사용 (변수 미지원)
     ============================================================ */
  --vb-bp-sm: 640px;
  --vb-bp-md: 768px;
  --vb-bp-lg: 1024px;
  --vb-bp-xl: 1280px;

  /* ============================================================
     12. TRANSITIONS
     ============================================================ */
  --vb-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --vb-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --vb-dur-fast: 120ms;
  --vb-dur:      200ms;
  --vb-dur-slow: 320ms;

  /* ============================================================
     13. Z-INDEX SCALE
     ============================================================ */
  --vb-z-base:     1;
  --vb-z-dropdown: 100;
  --vb-z-sticky:   200;
  --vb-z-overlay:  300;
  --vb-z-modal:    400;
  --vb-z-toast:    500;

  /* ============================================================
     14. FOCUS RING (포커스 가시성)
     ============================================================ */
  --vb-focus-ring: 0 0 0 3px var(--vb-aubergine-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --vb-text-primary:    #F0E9DC;
    --vb-text-secondary:  #B5B0A4;
    --vb-text-tertiary:   #928D7F;

    --vb-bg-page:         #14181F;
    --vb-bg-elevated:     #1F242E;
    --vb-bg-tint:         #252B36;
    --vb-wikt-bg:         #252B36;  /* Wiktionary 박스 전용 — 다크는 기존 bg-tint 와 동일 (§169) */
    --vb-bg-deep:         #0E1117;
    --vb-surface:         #1F242E;

    --vb-border:          #2C3140;
    --vb-border-soft:     #232734;
    --vb-border-strong:   #404655;

    /* 채도 약간 올림 - 어두운 배경에서 시인성 확보 */
    --vb-aubergine:       #9C7FC0;
    --vb-ember:           #D4AA72;
    --vb-sage:            #88AE9F;

    --vb-aubergine-soft:   rgba(156, 127, 192, 0.12);
    --vb-aubergine-medium: rgba(156, 127, 192, 0.22);

    --vb-highlight-unlearned:        rgba(212, 170, 114, 0.22);
    --vb-highlight-unlearned-border: #D4AA72;
    --vb-highlight-unlearned-text:   #D4AA72;

    --vb-highlight-learned:        rgba(136, 174, 159, 0.22);
    --vb-highlight-learned-border: #88AE9F;
    --vb-highlight-learned-text:   #88AE9F;

    --vb-highlight-active: color-mix(in srgb, var(--vb-ember) 55%, black 45%);

    /* Reader 하이라이트 팔레트 — 다크 */
    --hl-speaking-bg:   #3a3152;  /* 어두운 보라, 텍스트는 밝게 */
    --hl-speaking-text: #e7defb;
    --hl-bookmark-bg:   #463a22;  /* 어두운 호박 */
    --hl-bookmark-text: #f3eede;  /* 본문 크림색 유지 */
    --hl-bookmark-edge: #d8b15f;

    /* Reader ANNOTATE 단어 레벨 배경 하이라이트 — 다크 */
    --hl-annot-easy:   #2b2840;  /* 은은한 연보라 (다크, 문장에 스며들게) */
    --hl-annot-medium: #353050;  /* 중간 보라 (다크) */
    --hl-annot-hard:   #423a63;  /* 진한 보라 (다크) */

    /* Worksheet "From your vault" 드롭다운 메뉴 배경 — 두터운 보라 (다크) */
    --vb-menu-vault-bg: #3d3a51;

    /* Reader 단어 레벨 underline — 다크 모드용 채도↑ */
    --vb-reader-level-easy:   #88B69D;
    --vb-reader-level-medium: #7F9CC0;
    --vb-reader-level-hard:   #D47272;
  }
}

:root[data-theme="dark"] {
  --vb-text-primary:    #F0E9DC;
  --vb-text-secondary:  #B5B0A4;
  --vb-text-tertiary:   #928D7F;

  --vb-bg-page:         #14181F;
  --vb-bg-elevated:     #1F242E;
  --vb-bg-tint:         #252B36;
  --vb-wikt-bg:         #252B36;  /* Wiktionary 박스 전용 — 다크는 기존 bg-tint 와 동일 (§169) */
  --vb-bg-deep:         #0E1117;
  --vb-surface:         #1F242E;

  --vb-border:          #2C3140;
  --vb-border-soft:     #232734;
  --vb-border-strong:   #404655;

  --vb-aubergine:       #9C7FC0;
  --vb-ember:           #D4AA72;
  --vb-sage:            #88AE9F;

  --vb-aubergine-soft:   rgba(156, 127, 192, 0.12);
  --vb-aubergine-medium: rgba(156, 127, 192, 0.22);

  --vb-highlight-unlearned:        rgba(212, 170, 114, 0.22);
  --vb-highlight-unlearned-border: #D4AA72;
  --vb-highlight-unlearned-text:   #D4AA72;

  --vb-highlight-learned:        rgba(136, 174, 159, 0.22);
  --vb-highlight-learned-border: #88AE9F;
  --vb-highlight-learned-text:   #88AE9F;

  --vb-highlight-active: color-mix(in srgb, var(--vb-ember) 55%, black 45%);

  /* Reader 하이라이트 팔레트 — 다크 */
  --hl-speaking-bg:   #3a3152;
  --hl-speaking-text: #e7defb;
  --hl-bookmark-bg:   #463a22;
  --hl-bookmark-text: #f3eede;
  --hl-bookmark-edge: #d8b15f;

  /* Reader ANNOTATE 단어 레벨 배경 하이라이트 — 다크 */
  --hl-annot-easy:   #2b2840;  /* 은은한 연보라 (다크, 문장에 스며들게) */
  --hl-annot-medium: #353050;  /* 중간 보라 (다크) */
  --hl-annot-hard:   #423a63;  /* 진한 보라 (다크) */

  /* Worksheet "From your vault" 드롭다운 메뉴 배경 — 두터운 보라 (다크) */
  --vb-menu-vault-bg: #3d3a51;

  /* Reader 단어 레벨 underline — 다크 모드용 채도↑ */
  --vb-reader-level-easy:   #88B69D;
  --vb-reader-level-medium: #7F9CC0;
  --vb-reader-level-hard:   #D47272;
}