literal___style_reference:
  info: "> Thư viện trong ánh sáng dịu nhẹ — một phòng đọc nơi tường kem ấm áp giao hòa với kệ gỗ óc chó tối màu."

  theme: "light"

  info: "Literal là một phòng đọc văn học được tái hiện trong ánh sáng dịu nhẹ: một canvas gần như đơn sắc, nơi điểm nhấn màu sắc duy nhất là một tông xanh rừng (forest green) đánh dấu hành động chính. Headlines sử dụng serif ấm áp mang chất sách vở (Libre Baskerville), trong khi mọi thành phần chức năng đều dùng geometric Inter sạch sẽ, tạo nên sự căng thẳng nhẹ nhàng giữa phong cách editorial và digital. Các bề mặt mang chất giấy — canvas xám ấm mềm mại bên dưới những card trắng tinh với viền mảnh và hầu như không có bóng. Toàn bộ trải nghiệm mang cảm giác tĩnh lặng, thoáng đãng, lấy nội dung làm trung tâm, với bìa sách và ảnh chụp màn hình sản phẩm đảm nhận vai trò thị giác mà màu sắc và trang trí không làm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Forest Green | `#278458` | `--color-forest-green` | Màu nền cho primary CTA, điểm nhấn thương hiệu, ký tự ngôi sao trong wordmark, trạng thái active — một điểm nhấn màu duy nhất neo giữ một giao diện gần như không màu |"
    info: "| Charcoal | `#444340` | `--color-charcoal` | Văn bản body chính và UI text, icon strokes, đường viền mặc định |"
    info: "| Soft Gray | `#f8f8f8` | `--color-soft-gray` | Nền canvas trang và nền section — tông trắng ngà ấm giúp card trắng có cảm giác phân lớp thay vì lơ lửng |"
    info: "| Warm Gray | `#9a988b` | `--color-warm-gray` | Văn bản phụ trợ mờ, metadata thứ cấp, đường phân cách danh sách, link đã giảm nhấn mạnh |"
    info: "| Hairline Gray | `#eeeeee` | `--color-hairline-gray` | Viền card và component, đường phân cách tinh tế giữa các section và mục danh sách |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, văn bản trên button, nền input — bề mặt nâng cao phía trên canvas xám |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản heading, nền cho dark secondary action (App Store button), viền đậm trên heading nổi bật |"

  tokens___typography:

    inter___toàn_bộ_ui_chức_năng___body_copy__buttons__navigation__inputs__captions__mô_tả_tính_năng__hero_subtext____font_inter:
      - "**Thay thế:** system-ui, -apple-system, Segoe UI, Roboto"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 14, 15, 16, 22, 40"
      - "**Line height:** 1.35–1.50"
      - "**Vai trò:** Toàn bộ UI chức năng — body copy, buttons, navigation, inputs, captions, mô tả tính năng, hero subtext"

    libre_baskerville___chỉ_dành_riêng_cho_heading_của_section_và_trang___serif_là_tín_hiệu_editorial_phân_tách_display_khỏi_interface____font_libre_baskerville:
      - "**Thay thế:** Lora, Source Serif Pro, Crimson Text"
      - "**Weights:** 500"
      - "**Kích thước:** 28"
      - "**Line height:** 1.35"
      - "**Vai trò:** Chỉ dành riêng cho heading của section và trang — serif là tín hiệu editorial phân tách display khỏi interface"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.45 | — | `--text-caption` |"
      info: "| body | 16px | 1.45 | — | `--text-body` |"
      info: "| subheading | 22px | 1.4 | — | `--text-subheading` |"
      info: "| heading | 28px | 1.35 | — | `--text-heading` |"
      info: "| display | 40px | 1.35 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| other | 16px |"
      info: "| images | 4px |"
      info: "| buttons | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính — xuất hiện một hoặc hai lần mỗi section, luôn màu xanh"

      info: "Nền #278458, chữ trắng, Inter 15px weight 500, radius 4px, padding dọc 14px × ngang 28px, glyph mũi tên phải sau label. 100% width trên mobile, auto trên desktop."

    dark_app_store_button:
      vai_trò: "Secondary download CTA đặt cạnh primary CTA"

      info: "Nền #000000, chữ trắng, Inter 15px weight 500, radius 4px, padding 14px × 28px. Glyph Apple đứng trước label hai dòng 'Download on the App Store'."

    ghost_nav_button_sign_in:
      vai_trò: "Tertiary navigation action trong header"

      info: "Nền trong suốt, chữ #444340, Inter 15px weight 400, không viền. Gạch chân khi hover."

    search_input:
      vai_trò: "Trường tìm kiếm toàn cục trong navigation bar"

      info: "Không viền, nền trong suốt, placeholder text #444340, icon kính lúp bên trái. Nằm gọn trong nav bar mà không có container hiển thị — sự vắng mặt của viền là tuyên ngôn thiết kế."

    feature_card:
      vai_trò: "Card mô tả khả năng sản phẩm trong lưới 3 cột"

      info: "Nền #ffffff, viền 1px #eeeeee, radius 8px, padding 20px. Chứa một subheading serif (Inter 22px weight 700 hoặc Libre Baskerville 28px weight 500) theo sau là bullet text hoặc ảnh chụp màn hình sản phẩm. Tùy chọn bóng rất nhẹ (rgba 0,0,0,0.04) giúp củng cố cảm giác nâng cao mà không tạo nặng nề."

    testimonial_card:
      vai_trò: "Card bằng chứng xã hội trong lưới 'Loved by everyone'"

      info: "Nền #ffffff, viền 1px #eeeeee, radius 8px, padding 20px. Layout: avatar (hình tròn, ~40px) + tên hiển thị Inter 15px weight 500 + dấu tích xác minh + glyph nền tảng trên một hàng, quote text Inter 15px weight 400 bên dưới."

    section_heading_serif:
      vai_trò: "Tiêu đề section editorial — khoảnh khắc trang thở"

      info: "Libre Baskerville 28px weight 500, #000000, căn giữa, line-height 1.35. Nơi duy nhất serif xuất hiện ngoài feature card subheading."

    hero_headline_serif:
      vai_trò: "Tiêu đề editorial cấp trang"

      info: "Serif phong cách Libre Baskerville ở 40px weight 500, #000000, căn giữa, line-height 1.35. Xếp chồng hai dòng, khoảng 8–12 từ."

    book_cover_collage:
      vai_trò: "Hình ảnh hero trang trí — sách được sắp xếp thành cụm rải rác nhưng cân bằng"

      info: "Bìa sách riêng lẻ được hiển thị dưới dạng thumbnail hình chữ nhật radius 4px, không bóng, xoay nhẹ, xếp chồng với độ chồng lấn tinh tế. Bìa sách cung cấp toàn bộ màu sắc trong hero; không có nền tint hay khung bao."

    product_screenshot_tile:
      vui_lòng_cung_cấp_nội_dung_cần_dịch_cho_phần_còn_lại: