cos___style_reference:
  info: "> phòng trưng bày thời trang tường trắng"

  theme: "light"

  info: "COS sử dụng ngôn ngữ thị giác của một phòng trưng bày nghệ thuật đương đại: những bức tường trắng rộng lớn, ảnh đơn sắc khổ lớn, và typography không cản trở người mẫu. Giao diện gần như không màu — 97% achromatic — dùng màu gần đen (#080808) trên nền trắng tinh (#ffffff) làm điểm tương phản cấu trúc duy nhất, với một điểm đỏ duy nhất (#c80000) dành riêng làm điểm nhấn nhẹ nhàng cho những khoảnh khắc cần sự khẩn trương nhưng không ồn ào. Khoảng cách rộng rãi và mang phong cách editorial, section padding lên tới 135px, và các component hòa vào trang: đường viền siêu mảnh (hairline) màu #dadada, không đổ bóng, không gradient, không bo góc. Typography (SuisseIntl) là vật trang trí duy nhất — một họ grotesque duy nhất xuyên suốt từ micro-label 12px đến category statement 35px, tracking hơi dương để tạo cảm giác như bảng chỉ dẫn in ấn trong gallery."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Bề mặt nền sáng cho các nền phụ và phân cách section. Không dùng làm màu CTA chính |"
    info: "| Ink Black | `#080808` | `--color-ink-black` | Text chính, icon, link, navigation type, viền button, logo, footer text — mềm hơn đen tuyền để ảnh không bị chói khi đặt cạnh |"
    info: "| True Black | `#000000` | `--color-true-black` | Text overlay trên ảnh tối, body copy, label button — màu đen tuyền dành cho những khoảnh khắc typography tương phản cao nhất |"
    info: "| Mist Gray | `#dadada` | `--color-mist-gray` | Đường viền hairline, gạch chân input, divider nhẹ, outline trạng thái disabled — màu trung tính nhẹ nhất, chỉ thấy được nhờ những gì nó phân cách |"
    info: "| Signal Red | `#c80000` | `--color-signal-red` | Điểm nhấn đỏ hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp |"

  tokens___typography:

    suisseintl___kiểu_chữ_duy_nhất_trên_toàn_bộ_giao_diện___dùng_cho_navigation__body__headline__button_và_product_copy__tracking_dương_0_01_0_04em_khác_thường_đối_với_màn_hình_và_củng_cố_cảm_giác_catalogue_in_ấn__weight_700_dành_cho_category_statement__500_cho_navigation_và_button__400_cho_mọi_thứ_còn_lại__cam_kết_một_họ_duy_nhất_và_dải_kích_thước_nhỏ_12_35px_là_dấu_ấn___chữ_không_bao_giờ_la_hét_____font_suisseintl:
      - "**Thay thế:** Neue Haas Grotesk Display, Inter, Helvetica Neue"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 12, 13, 16, 35"
      - "**Line height:** 1.0 (micro-label), 1.4 (small body), 1.45 (body), 1.5 (hero/headline)"
      - "**Letter spacing:** 0.01em ở 12px → 0.02em ở 13px → 0.03em ở 16px → 0.04em ở 35px"
      - "**Vai trò:** Kiểu chữ duy nhất trên toàn bộ giao diện — dùng cho navigation, body, headline, button và product copy. Tracking dương (0.01–0.04em) khác thường đối với màn hình và củng cố cảm giác catalogue in ấn; weight 700 dành cho category statement, 500 cho navigation và button, 400 cho mọi thứ còn lại. Cam kết một họ duy nhất và dải kích thước nhỏ (12–35px) là dấu ấn — chữ không bao giờ la hét."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | 0.12px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.48px | `--text-body` |"
      info: "| heading | 35px | 1 | 1.4px | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 135 | 135px | `--spacing-135` |"

    border_radius:

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

    layout:

      - "**Section gap:** 135px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    editorial_hero___split_frame:
      vai_trò: "Brand statement phía trên fold cho category landing (Mujer / Hombre)"

      info: "Full-viewport chia 50/50 giữa hai chân dung editorial lớn. Không overlay chrome, không card container. Phần tử giao diện duy nhất là một label category viết hoa toàn bộ bằng SuisseIntl 35px weight 700, letter-spacing 0.04em, màu #ffffff, neo ở góc dưới-bên trái của ảnh bên trái (Mujer) — text nổi, photography đứng yên."

    utility_announcement_bar:
      vai_trò: "Dải quảng cáo phía trên cùng trang, nằm trên logo"

      info: "Một dải đen mảnh duy nhất màu #080808, full-bleed, chứa text SuisseIntl 12px weight 400 màu #ffffff với padding trên/dưới 1px. Cuộn kiểu marquee. Không có nút đóng mặc định."

    centered_logo_navigation:
      vai_trò: "Header chính của site"

      info: "Nền trắng tinh (#ffffff), wordmark COS căn giữa bằng SuisseIntl 16px weight 500, letter-spacing 0.03em, màu #080808. Bộ chọn ngôn ngữ (Locale selector) căn phải cùng weight/kích thước. Không có thanh category ngang trên landing frame — navigation mang tính biểu tượng và tối giản."

    ghost_button___outlined:
      vai_trò: "Các hành động phụ và CTA tạo tài khoản"

      info: "Nền trong suốt, viền 1px solid #080808, góc vuông (0px radius), padding dọc 15px / ngang 24px. Label bằng SuisseIntl 12px weight 500, letter-spacing 0.01em, viết hoa, màu #080808. Không đổi màu nền khi hover — ghost vẫn là ghost, chỉ có độ dày viền là tín hiệu."

    newsletter_modal___slide_in:
      vai_trò: "Thu thập email lần đầu truy cập"

      info: "Bề mặt card trắng (#ffffff) neo ở góc dưới-phải, rộng ~360px, không viền, không đổ bóng — chỉ được phân cách với trang bằng khoảng trống xung quanh. Tiêu đề bằng SuisseIntl 13px weight 700, body bằng 12px weight 400, cả hai màu #080808. Icon đóng ở góc trên-phải. Ghost button có viền (#080808) là hành động duy nhất."

    primary_nav_link:
      vai_trò: "Link category và utility trong header"

      info: "Text nội tuyến, không gạch chân, không nền. SuisseIntl 13–16px weight 400–500, màu #080808, letter-spacing 0.02–0.03em. Trạng thái active được thể hiện bằng chuyển weight lên 500 — không đổi màu, không gạch chân, không pill."

    product_card:
      vai_trò: "Các mục trong grid category và product listing"

      ảnh_vuông_hoặc_tỷ_lệ_3: "4 phủ kín card từ mép này sang mép kia (không padding, không viền). Tên sản phẩm và giá nằm ngay dưới ảnh bằng SuisseIntl 13px weight 400, #080808, line-height 1.45. Không badge, không hover overlay, không quick-add — card là một bản in, không phải một tile."

    footer:
      vai_trò: "Thư mục link toàn site và thông tin pháp lý"

      info: "Bề mặt tối đảo ngược (#080808), padding dọc rộng rãi (~135px trên/dưới). Tiêu đề cột bằng SuisseIntl 12px weight 700 viết hoa #ffffff, danh sách link bằng 13px weight 400 #ffffff. Không có divider giữa các cột — whitespace là yếu tố phân cách duy nhất, nhất quán với toàn bộ hệ thống."

    locale_selector:
      vai_trò: "Bộ chọn khu vực/ngôn ngữ ở góc trên-phải"

      info: "Trigger dạng text thuần (ví dụ 'ES/ES') bằng SuisseIntl 12px weight 400, #080808, kèm chevron nhỏ. Không icon cờ, không chrome trang trí. Mở ra menu chỉ có text."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng border-radius 0px trên mọi button, card, input và modal — hình vuông là hình học của thương hiệu."
      - "Chỉ dùng #c80000 cho dưới 2% pixel trên bất kỳ màn hình nào; nó phải đọc như dấu câu, không phải vật trang trí."
      - "Dùng SuisseIntl weight 700 chỉ cho category statement và section title, weight 500 cho navigation và button, weight 400 cho body — thang weight là toàn bộ hệ thống phân cấp."
      - "Áp dụng padding section 135px trên/dưới cho các editorial band chính, 8–24px cho nhịp điệu trong component."
      - "Phân cách bề mặt bằng whitespace và hairline 1px #dadada, không bao giờ dùng box-shadow hoặc color fill."
      - "Để ảnh chảy full-bleed từ mép này sang mép kia; không bao giờ bọc product imagery trong card có padding và viền."
      - "Đặt letter-spacing dương: 0.01em ở 12px, tăng dần lên 0.04em ở 35px — tracking rộng hơn ở kích thước lớn làm cho headline có cảm giác như text trên tường gallery."

    không_nên_làm:
      - "Không thêm gradient, drop shadow hoặc hiệu ứng blur trên bất kỳ component nào — hệ thống flat theo thiết kế."
      - "Không bo góc button, input hoặc card — 0px radius là bất di bất dịch."
      - "Không dùng điểm nhấn đỏ cho CTA chính, hover state hoặc button fill — nó chỉ dành cho khoảnh khắc lỗi/khuyến mãi nhẹ nhàng."
      - "Không thêm họ chữ thứ hai; chỉ SuisseIntl phải đảm nhận cả label 12px và headline 35px."
      - "Không đặt text bên trong card có viền và nền; text nổi trực tiếp trên nền trắng hoặc trực tiếp trên ảnh."
      - "Không thêm icon, badge hoặc quick-action overlay vào product card — ảnh chính là sản phẩm."
      - "Không dùng nền bão hòa cho footer hoặc modal; đảo ngược với #080808 và để #ffffff làm toàn bộ công việc."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang, nền trắng full-bleed |"
    info: "| 1 | Ink Plane | `#080808` | Các section đảo ngược (footer, promotional bar, đôi khi là dải tối) nơi type đảo thành trắng |"

  elevation:

    info: "Elevation cố tình không có. Hệ thống hoàn toàn dựa vào scale, whitespace và hairline border màu #dadada để phân cách các mặt phẳng. Bất kỳ bóng nào cũng sẽ phá vỡ phép ẩn dụ gallery-wall — bề mặt nằm trên trang như một bản in nằm trong matte, không phải như một card nổi phía trên nó."

  imagery:

    info: "Ảnh editorial thời trang khổ lớn chiếm ưu thế trên trang — chân dung full-bleed và ảnh người mẫu 3/4 trong studio có kiểm soát ánh sáng, chủ yếu là trung tính và giảm bão hòa với tông ấm chọn lọc. Ảnh được crop sát, lấp đầy container từ mép này sang mép kia, không bo góc, không mask trang trí, không khung overlay. Khung hero hai ảnh (MUJER / HOMBRE) là mẫu đặc trưng: hai chân dung có trọng lượng ngang nhau đặt cạnh nhau, mỗi ảnh được neo bằng một label category ở góc dưới-bên trái. Photography được xử lý như một bản in gallery — ưu tiên đối tượng, bỏ bối cảnh, tỷ lệ con người, thiên về đơn sắc. Không cảnh sinh hoạt, không đạo cụ, không nền texture."

  layout:

    info: "Mô hình trang full-bleed — canvas trải dài từ mép này sang mép kia không có container max-width, và nội dung được neo bởi tỷ lệ chia ảnh và whitespace thay vì một cột căn giữa. Hero là chia dọc 50/50 của hai chân dung editorial cao full-viewport, một mẫu mạnh đến mức đóng vai trò như dấu ấn cấu trúc của thương hiệu. Bên dưới hero, các section xen kẽ giữa khối text nền trắng (căn giữa, một cột) và ảnh full-bleed bổ sung. Nhịp điệu dọc rộng rãi: padding section 135px tạo khoảng thở như tường bảo tàng giữa các band. Navigation là một dải trắng mảnh duy nhất với wordmark căn giữa và bộ chọn ngôn ngữ căn phải — không thanh category ngang, không mega-menu hiển thị trong frame chính. Mật độ thông tin thấp: một statement mỗi section, một ảnh mỗi ý tưởng."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "background: #ffffff"
    - "text: #080808"
    - "border: #dadada"
    - "accent: #c80000"
    - "inverted text on dark: #ffffff"
    - "primary action: không có màu CTA riêng biệt"

    3_5_ví_dụ_component_prompts:

    - "Xây dựng editorial split hero: 100vw × 100vh, hai phần tử con rộng 50% mỗi bên. Phần tử bên trái hiển thị chân dung người mẫu full-bleed với label ở góc dưới-bên trái bằng SuisseIntl 35px weight 700, letter-spacing 1.4px (0.04em), màu #ffffff, text 'MUJER'. Phần tử bên phải hiển thị chân dung người mẫu full-bleed thứ hai. Không viền, không padding, không bóng."

    - "Xây dựng ghost newsletter modal: rộng 360px, nền trắng (#ffffff), không viền, không radius, không bóng, neo ở góc dưới-phải với margin 24px. Tiêu đề bằng SuisseIntl 13px weight 700 #080808, copy hỗ trợ bằng 12px weight 400 #080808. Hành động là ghost button: viền 1px solid #080808, radius 0px, padding dọc 15px / ngang 24px, label 'CREAR CUENTA' bằng 12px weight 500 #080808."

    - "Xây dựng centered logo header: thanh trắng 100vw, cao ~60px, wordmark COS căn giữa bằng SuisseIntl 16px weight 500, letter-spacing 0.48px (0.03em), màu #080808. Text ngôn ngữ 'ES/ES' căn phải cùng type, 12px weight 400."

    - "Xây dựng product card: ảnh phủ kín card từ mép này sang mép kia không viền hoặc padding, tỷ lệ 3:4. Bên dưới ảnh, tên sản phẩm và giá xếp chồng dọc với gap 8px, cả hai bằng SuisseIntl 13px weight 400 #080808, line-height 1.45. Không hover state, không badge, không quick-add."

    - "Xây dựng footer: bề mặt #080808 full-width, padding trên và dưới 135px. Bốn cột link; tiêu đề cột bằng 12px weight 700 viết hoa #ffffff, mục link bằng 13px weight 400 #ffffff với spacing dọc 15px. Không divider giữa các cột, không đổi màu nền giữa các section."

  similar_brands:

    - "**Everlane** — Cùng landing thiên về editorial fashion photography với monochrome white canvas và text overlay tối giản"
    - "**Toteme** — Cùng sự kiềm chế Scandinavian: ảnh người mẫu full-bleed, không bo góc, gần đen trên trắng, một họ grotesque duy nhất"
    - "**Arket** — Thẩm mỹ bán lẻ tối giản cùng hệ với layout kiểu gallery, UI viền hairline, và cách tiếp cận ảnh như section divider"
    - "**The Row** — Bảng màu luxury yên tĩnh giống hệt: trắng tinh, không chrome, grotesque không chân, photography là vật trang trí duy nhất"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-ink-black: #080808;
          --color-true-black: #000000;
          --color-mist-gray: #dadada;
          --color-signal-red: #c80000;
        
          /* Typography — Font Families */
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.48px;
          --text-heading: 35px;
          --leading-heading: 1;
          --tracking-heading: 1.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-135: 135px;
        
          /* Layout */
          --section-gap: 135px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-ink-plane: #080808;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-ink-black: #080808;
          --color-true-black: #000000;
          --color-mist-gray: #dadada;
          --color-signal-red: #c80000;
        
          /* Typography */
          --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.12px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.48px;
          --text-heading: 35px;
          --leading-heading: 1;
          --tracking-heading: 1.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-135: 135px;
        }