makr___style_reference:
  info: "> Tủ trưng bày bảo tàng dành cho đồ da thủ công. Một phòng trưng bày giấy trắng tĩnh lặng, nơi những dòng chữ đen ấm áp trôi nổi bên dưới các bức ảnh editorial cỡ lớn chụp đồ da được cầm trên tay hoặc đặt trong khung cảnh thiên nhiên, với một dải màu xô xám nhạt duy nhất là điểm nhấn sắc độ."

  theme: "light"

  info: "MAKR là một gallery editorial e-commerce dành cho đồ da thủ công, xây dựng trên bảng màu gần như hoàn toàn đơn sắc, nơi nhiếp ảnh là nhân vật chính. Một tông màu banner gần xám duy nhất (pha chút xô nhẹ) làm điểm nhấn cho dải thông báo phía trên, trong khi mọi thứ khác — bề mặt, chữ, đường kẻ, liên kết — đều sống trong màu mực đen ấm áp trên nền giấy trắng. Typography là Sohne neo-grotesque ở dạng kiềm chế nhất: cỡ chữ nhỏ, line-height rộng rãi, letter-spacing dương trên các nhãn chữ hoa — đọc như chữ trong gallery, không phải copy web UI. Layout thiên về hình ảnh, bất đối xứng, thưa thớt như bảo tàng: sản phẩm được chụp trên tay, trong khung cảnh thiên nhiên, dưới ánh sáng tự nhiên, với các link chú thích nhỏ bên dưới. Các component gần như vô hình — text link có gạch chân, ghost input, không bóng đổ, không nút bo tròn — để da thuộc và nhiếp ảnh gánh vác trọng lượng thương hiệu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Obsidian Ink | `#1c1717` | `--color-obsidian-ink` | Chữ chính, tất cả text link, body copy, heading, nét icon, đường viền mảnh trên toàn bộ UI. Đây là màu chịu lực — độ tương phản 17.7:1 trên nền trắng, dùng cho hơn 5.000 instance. Sắc ấm rất nhẹ (không phải đen thuần) mang lại cảm giác catalog in ấn thay vì cảm giác màn hình |"
    info: "| Paper | `#ffffff` | `--color-paper` | Đường viền mảnh, divider, đường viền input, cạnh card trên bề mặt sáng. Không nâng cấp lên màu CTA chính |"
    info: "| Bone | `#f0f0f0` | `--color-bone` | Bề mặt phụ cho các section xen kẽ, nền panel nhẹ, đường viền inline/separator. Tạo lớp xám ấm rất nhạt giữa nền giấy trắng và dải thông báo xô |"
    info: "| Eucalyptus Mist | `#a9aea9` | `--color-eucalyptus-mist` | Nền banner thông báo trên cùng, lớp nền section nhạt, đường viền cấp ba. Đọc như gần xám khi đứng riêng nhưng mang sắc xô khó nhận ra khi dùng full-width — một hơi thở sắc độ duy nhất trong hệ thống đơn sắc |"

  tokens___typography:

    sohne_web___toàn_bộ_giọng_nói_giao_diện___body__nav__link__heading__button__input__badge__chú_thích_ảnh__sohne_chỉ_ở_weight_400_không_phát_hiện_bold_weight_mang_lại_cho_makr_sự_uy_quyền_thì_thầm__thông_tin_được_truyền_tải_qua_kích_thước_và_tracking__không_bao_giờ_qua_độ_đậm__thay_thế__inter__s_hne__hoặc_untitled_sans_____font_sohne_web:
      - "**Thay thế:** Inter, Untitled Sans, hoặc Neue Haas Grotesk"
      - "**Weight:** 400"
      - "**Cỡ chữ:** 11, 12, 13, 14, 16, 18, 20, 32px"
      - "**Line height:** 1.15, 1.35, 1.40, 1.45, 1.80"
      - "**Letter spacing:** 0.0150em, 0.0300em"
      - "**Vai trò:** Toàn bộ giọng nói giao diện — body, nav, link, heading, button, input, badge, chú thích ảnh. Sohne chỉ ở weight 400 (không phát hiện bold weight) mang lại cho MAKR sự uy quyền thì thầm: thông tin được truyền tải qua kích thước và tracking, không bao giờ qua độ đậm. Thay thế: Inter, Söhne, hoặc Untitled Sans."

    circularxxmonoweb___dành_riêng_cho_các_chú_thích_kỹ_thuật_hoặc_thông_số_sản_phẩm_hiếm_hoi___một_tiếng_thì_thầm_monospace_phá_vỡ_nhịp_điệu_neo_grotesque__dùng_tiết_kiệm__mã_sản_phẩm__thông_số_chất_liệu__không_hơn__thay_thế__jetbrains_mono_hoặc_ibm_plex_mono_____font_circularxxmonoweb:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weight:** 400"
      - "**Cỡ chữ:** 13, 20px"
      - "**Line height:** 1.15"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Dành riêng cho các chú thích kỹ thuật hoặc thông số sản phẩm hiếm hoi — một tiếng thì thầm monospace phá vỡ nhịp điệu neo-grotesque. Dùng tiết kiệm: mã sản phẩm, thông số chất liệu, không hơn. Thay thế: JetBrains Mono hoặc IBM Plex Mono."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.35 | 0.33px | `--text-caption` |"
      info: "| body-lg | 14px | 1.45 | 0.21px | `--text-body-lg` |"
      info: "| heading-sm | 18px | 1.45 | 0.27px | `--text-heading-sm` |"
      info: "| heading | 20px | 1.15 | 0.3px | `--text-heading` |"
      info: "| display | 32px | 1.15 | 0.48px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "6px"

    mật_độ: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 90 | 90px | `--spacing-90` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|--------|"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| modals | 0px |"
      info: "| banners | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 80-120px"
      - "**Card padding:** 12px"
      - "**Element gap:** 5-8px"

  components:

    top_announcement_banner:
      vai_trò: "Dải màu xô full-bleed quảng bá khuyến mãi hoặc sản phẩm mới"

      info: "Strip full-width tràn toàn bộ viewport, nền #a9aea9 (Eucalyptus Mist), chữ #1c1717 (Obsidian Ink) ở cỡ 13–14px Sohne weight 400, căn giữa. Ba cột chữ: một nhãn ("

    minimal_header_navigation:
      vai_trò: "Điều hướng chính và link tiện ích của site"

      info: "Thanh trắng (#ffffff) phía trên dải thông báo. Logo \"MAKR\" căn trái ở cỡ 13–14px chữ hoa Obsidian Ink. Mục nav (Shop, Info, Journal) lệch trái, Search/Account/Cart căn phải, tất cả đều là text link ở Sohne 400. Không nền, không viền, không icon. Vertical padding ~12–16px. Toàn bộ nav đọc như colophon in ấn, không phải navbar web."

    text_link_underlined:
      vai_trò: "Element text tương tác mặc định dùng cho điều hướng, CTA sản phẩm và tham chiếu inline"

      info: "Obsidian Ink (#1c1717) ở cỡ body (12–16px), Sohne 400, với gạch chân 1px mặc định. Khi hover, gạch chân có thể dày lên hoặc chữ chuyển sang màu xô #a9aea9. Đây là style action chính cho toàn bộ site — không có nút CTA có nền."

    newsletter_subscription_modal:
      vai_trò: "Overlay thu thập email hiển thị khi truy cập lần đầu"

      info: "Panel fixed-position, góc dưới bên trái. Bề mặt trắng (#ffffff) hoặc gần trắng, không bóng đổ, không viền, không radius. Heading ở cỡ 13–14px Sohne 400 Obsidian Ink, input email bên dưới là một đường viền dưới đơn (1px Obsidian Ink border-bottom), placeholder \"your@email.com\" màu xám nhạt. Nút submit là text link \"SUBMIT\" chữ hoa 12–13px với tracking dương, không nền. Icon Close (×) góc trên bên phải ở 14px Obsidian Ink."

    email_input_field:
      vai_trò: "Input text để thu thập email và các trường form khác"

      info: "Nền trong suốt, viền dưới 1px Obsidian Ink (#1c1717), không viền trái/phải/trên, không radius. Padding: ~1px trên/dưới, ~2px trái/phải (cực kỳ compact). Placeholder text màu xám nhạt. Font: Sohne 400 ở 13–14px. Input là một đường kẻ đơn trên canvas, giống trường form trong catalog in ấn."

    text_submit_button:
      vai_trò: "Nút gửi form được style như text thuần"

      info: "Chữ hoa Sohne 400 ở 12–13px, Obsidian Ink, letter-spacing 0.0300em, không nền, không viền, không radius. Nằm inline với input field. Padding: 12px ngang, ~6px dọc. Khi hover, chữ chuyển sang màu xô #a9aea9 hoặc chuyển sang gạch chân 2px."

    bottom_subscription_bar:
      vai_trò: "Thanh quảng bá toàn site có thể đóng"

      info: "Thanh trắng full-width mỏng ở cuối viewport. Một dòng chữ hoa căn giữa ở 11–12px Sohne 400 Obsidian Ink, letter-spacing ~0.0300em. Icon Close (×) căn phải ở 14px. Không nền, không border-top (hoặc 1px hairline #f0f0f0)."

    editorial_product_image_grid:
      vai_trò: "Hiển thị nội dung chính cho sản phẩm và câu chuyện trong journal"

      info: "Grid ảnh nhiều cột (thường 2–3 cột trên desktop) với khoảng cách 0 hoặc rất nhỏ giữa các ảnh. Ảnh lấp đầy ô grid từ mép này sang mép kia, không radius, không viền, không bóng đổ. Kết hợp ảnh đen trắng chụp sản phẩm trên tay và ảnh lifestyle full-color. Chú thích đặt bên dưới trong lề trắng, không chồng lên ảnh."

    product_caption_link:
      vai_trò: "Link mô tả ngắn bên dưới ảnh sản phẩm"

      info: "Obsidian Ink 12–13px Sohne 400, căn giữa hoặc căn trái bên dưới ảnh, có gạch chân. Mẫu ví dụ: \"Zip Luxe 'V' Now Available in Black and Bark Chromexcel\" theo sau là text link dòng thứ hai \"Shop Bags and Totes\" như action phụ. Tên sản phẩm không dùng style đặc biệt — chỉ action dòng thứ hai mới có gạch chân."

    lifestyle_photography_block:
      vai_trò: "Hình ảnh editorial full-bleed cho câu chuyện sản phẩm"

      info: "Ảnh full-width ở tỷ lệ tự nhiên, không radius, không viền, không overlay. Chụp dưới ánh sáng tự nhiên ấm áp với tông màu đất trầm. Có thể đi kèm một dòng chú thích trong khoảng trắng bên dưới. Ảnh kể chuyện; UI chrome đứng sang một bên."

    black_and_white_product_photography:
      vai_trò: "Ảnh chụp cận cảnh sản phẩm dùng trong grid sản phẩm"

      info: "Ảnh đơn sắc độ tương phản cao chụp đồ da được cầm trên tay hoặc đặt trên bề mặt trung tính. Cắt sát vào đối tượng, thường vuông hoặc 3:4. Không xử lý màu, không duotone — grayscale thuần. Sự đan xen với ảnh lifestyle full-color tạo nên nhịp điệu thị giác duy nhất của hệ thống."

    close___icon_button:
      vai_trò: "Nút đóng cho modal, banner và overlay"

      info: "Glyph × đơn giản ở 14px Obsidian Ink, không nền, không viền, không radius. Click target nên có padding ~24px. Dùng trong newsletter modal, bottom bar và bất kỳ overlay nào có thể đóng."

  do_s_and_don_ts:

    do:
      - "Dùng #1c1717 (Obsidian Ink) cho tất cả chữ, viền, icon và element tương tác. Đây là màu cấu trúc duy nhất ngoài màu trắng."
      - "Đặt tất cả type ở Sohne 400 — không bao giờ dùng bold weight. Tạo hierarchy qua kích thước (11–32px) và tracking (0.0150em–0.0300em), không qua độ đậm."
      - "Dùng #a9aea9 (Eucalyptus Mist) tiết kiệm, chỉ làm nền banner full-bleed. Đây là khoảnh khắc sắc độ duy nhất của hệ thống — không dùng cho chữ, điểm nhấn nhỏ hoặc element inline."
      - "Style mọi element tương tác như text link có gạch chân. Nút có nền không tồn tại trong hệ thống này."
      - "Render form input là đường viền dưới 1px trên nền trong suốt. Không có input có khung, không có trường bo tròn."
      - "Chụp sản phẩm cận cảnh đối tượng dưới ánh sáng tự nhiên. Dùng crop 2:3 hoặc vuông, không overlay, không viền, không radius."
      - "Duy trì khoảng thở dọc rộng rãi (80–120px) giữa các section editorial để layout đọc như gallery, không phải feed."

    don_t:
      - "Không đưa vào bold, semibold hoặc bất kỳ weight nào trên 400. Hệ thống giao tiếp qua sự kiềm chế, không qua âm lượng."
      - "Không thêm bóng đổ, elevation hoặc chiều sâu z-axis. Bề mặt phẳng, được phân cách bằng whitespace và đôi khi là hairline border."
      - "Không dùng góc bo tròn trên bất kỳ component nào — input, modal, card và banner đều có radius 0px."
      - "Không dùng màu cho hover hoặc active state. Chỉ dùng độ dày gạch chân, chuyển màu chữ sang #a9aea9 hoặc thay đổi opacity."
      - "Không thêm icon, badge, tag hoặc chrome trang trí bên trong ảnh sản phẩm. Ảnh là nội dung."
      - "Không đưa vào màu nhấn mới. Hệ thống là mực đen trên giấy đơn sắc với một dải xô. Bất kỳ màu sắc bổ sung nào cũng phá vỡ ngôn ngữ gallery."
      - "Không chồng chữ lên ảnh sản phẩm. Chú thích, link và nhãn luôn nằm trong lề trắng bên dưới ảnh."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Canvas trang mặc định, bề mặt card, nền header/nav, input fill, nền modal |"
    info: "| 2 | Bone | `#f0f0f0` | Bề mặt section phụ, panel xen kẽ nhẹ, tông màu hairline separator |"
    info: "| 3 | Eucalyptus Mist | `#a9aea9` | Nền banner thông báo full-bleed — tầng bề mặt sắc độ duy nhất |"

  elevation:

    info: "MAKR không dùng bóng đổ và không có z-axis elevation. Các bề mặt được phân cách hoàn toàn bằng whitespace, hairline border và dải thông báo xô. Chiều sâu được truyền tải qua chính hierarchy của ảnh — các đối tượng tiền cảnh được chụp trên nền trung tính tạo ra cảm giác không gian chiều sâu duy nhất."

  imagery:

    info: "Nhiếp ảnh là nội dung chính và ngôn ngữ thương hiệu. Hai phong cách cùng tồn tại: (1) ảnh đen trắng cận cảnh sản phẩm trên tay, crop vuông hoặc 3:4, độ tương phản cao, đối tượng lấp đầy khung hình không có bối cảnh lifestyle; (2) ảnh lifestyle full-color dưới ánh sáng tự nhiên ấm áp, khung cảnh đất trời, người mẫu chuyển động mang túi, chụp từ góc thấp với độ sâu trường ảnh nông. Sự đan xen grayscale/full-color tạo ra nhịp điệu thị giác duy nhất của trang. Không minh họa, không 3D render, không đồ họa trừu tượng. Ảnh full-bleed hoặc edge-to-edge trong ô grid với radius 0 và không viền. Icon vắng mặt hoặc tối thiểu — một × đơn giản để đóng, không hơn."

  layout:

    info: "Layout full-bleed, edge-to-edge không có chiều rộng nội dung tối đa — ảnh lấp đầy viewport. Banner thông báo trên cùng trải rộng 100% chiều rộng, tiếp theo là header nav cũng full-width. Khu vực nội dung chính dùng grid ảnh nhiều cột (2–3 cột desktop) với khoảng cách 0 hoặc tối thiểu, để ảnh tự tạo cấu trúc thị giác. Chữ và link nằm trong lề trắng bên dưới ảnh, không bao giờ chồng lên. Các section editorial xen kẽ giữa grid sản phẩm và ảnh lifestyle full-bleed. Nhịp điệu dọc rộng rãi (section gap 80–120px) tạo nhịp điệu gallery-walk. Newsletter modal là panel fixed góc dưới bên trái; subscription bar có thể đóng nằm ở cuối viewport. Cảm giác tổng thể là catalog bảo tàng hoặc spread in ấn editorial, không phải layout e-commerce điển hình."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh: "\n- text: #1c1717 (Obsidian Ink)\n- background: #ffffff (Paper)\n- surface alt: #f0f0f0 (Bone)\n- border: #1c1717 (Obsidian Ink, 1px)\n- accent banner: #a9aea9 (Eucalyptus Mist)\n- primary action: không có màu CTA riêng biệt"

  similar_brands:

    - "**Mismo** — Cùng ngôn ngữ e-commerce đồ da editorial: bảng màu mực đen trên giấy đơn sắc, neo-grotesque gần giống Sohne, ảnh sản phẩm lớn không bị che, và CTA chỉ là text link"
    - "**Cuyana** — Cùng sự kiềm chế sang trọng tĩnh lặng với canvas gần như toàn trắng, một điểm nhấn ấm trung tính duy nhất, và grid sản phẩm thiên về ảnh để đồ vật tự lên tiếng"
    - "**Aesop** — Cùng triết lý layout gallery-walk — whitespace rộng rãi, type nhỏ tinh tế, không nút có nền, và ảnh sản phẩm được xử lý như chân dung editorial"
    - "**Want Les Essentiels** — Cùng nhịp điệu catalog bảo tàng với bảng màu bề mặt đơn sắc, navigation chrome tối giản, và ảnh lifestyle đặt đồ vật trong tay và khung cảnh thiên nhiên"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-ink: #1c1717;
          --color-paper: #ffffff;
          --color-bone: #f0f0f0;
          --color-eucalyptus-mist: #a9aea9;
        
          /* Typography — Font Families */
          --font-sohne-web: 'Sohne Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-circularxxmonoweb: 'CircularXXMonoWeb', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.35;
          --tracking-caption: 0.33px;
          --text-body-lg: 14px;
          --leading-body-lg: 1.45;
          --tracking-body-lg: 0.21px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.45;
          --tracking-heading-sm: 0.27px;
          --text-heading: 20px;
          --leading-heading: 1.15;
          --tracking-heading: 0.3px;
          --text-display: 32px;
          --leading-display: 1.15;
          --tracking-display: 0.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-90: 90px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 80-120px;
          --card-padding: 12px;
          --element-gap: 5-8px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-modals: 0px;
          --radius-banners: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #f0f0f0;
          --surface-eucalyptus-mist: #a9aea9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-ink: #1c1717;
          --color-paper: #ffffff;
          --color-bone: #f0f0f0;
          --color-eucalyptus-mist: #a9aea9;
        
          /* Typography */
          --font-sohne-web: 'Sohne Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-circularxxmonoweb: 'CircularXXMonoWeb', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.35;
          --tracking-caption: 0.33px;
          --text-body-lg: 14px;
          --leading-body-lg: 1.45;
          --tracking-body-lg: 0.21px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.45;
          --tracking-heading-sm: 0.27px;
          --text-heading: 20px;
          --leading-heading: 1.15;
          --tracking-heading: 0.3px;
          --text-display: 32px;
          --leading-display: 1.15;
          --tracking-display: 0.48px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-90: 90px;
          --spacing-120: 120px;
        }