lunch___style_reference:
  info: "> velvet runway on warm parchment"

  theme: "mixed"

  info: "LUNCH CONCEPT mang phong cách một ấn phẩm thời trang in ấn được đưa lên web: một hero ảnh tối full-bleed với brand wordmark xuất hiện dưới dạng chữ chrome 3D cỡ lớn, tiếp theo là một product gallery nhẹ nhàng, giống catalogue trên nền warm parchment. Trang web luân phiên giữa sự đối đầu điện ảnh và sự kiềm chế tĩnh lặng — hero tấn công thị giác, phần body thì thì thầm. Một màu lavender nhẹ duy nhất chỉ xuất hiện trên announcement bar, trạng thái 'Sold Out' và footer, đóng vai trò như một dấu chấm câu thương hiệu hơn là một tiếng hét. Typography chủ yếu là một custom sans-serif duy nhất (Good Sans) ở kích thước khiêm tốn, với hero wordmark là khoảnh khắc typographic đặc sắc duy nhất. Tương tác chỉ là text-link: không có filled buttons, không gradient, không chrome trang trí ngoài 3D logotype ở hero."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Lilac Veil | `#b8aad0` | `--color-lilac-veil` | Lớp phủ tím nhạt cho highlight backgrounds, decorative bands và soft emphasis phía sau nội dung |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Tất cả body text, navigation text, link borders, card borders và badge borders — đường nét cấu trúc của toàn bộ giao diện |"
    info: "| Warm Parchment | `#f4f1e4` | `--color-warm-parchment` | Page và section backgrounds trong khu vực editorial/product — canvas tĩnh lặng để ảnh sản phẩm đặt lên |"
    info: "| Ivory Mist | `#fcfaf1` | `--color-ivory-mist` | Navigation text color trên hero tối, subtle surface variant và hairline borders — một giải pháp ấm hơn so với trắng tinh cho dark-section UI |"

  tokens___typography:

    good_sans___kiểu_chữ_làm_việc_duy_nhất_cho_navigation__body_copy__product_metadata__links_và_tất_cả_ui_text__hệ_thống_dual_weight_regular_400_cho_body_labels__bold_700_cho_brand_names__giá_và_emphasis_tạo_hierarchy_mà_không_cần_tăng_kích_thước__letter_spacing_gần_như_bằng_0_giữ_phong_cách_editorial_thay_vì_geometric_____font_good_sans:
      - "**Thay thế:** Söhne, Inter hoặc Untitled Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 12px, 16px, 24px, 32px"
      - "**Line height:** 1.00 (nav), 1.80 (body)"
      - "**Letter spacing:** 0.0050em đến 0.0130em, tăng nhẹ ở kích thước lớn hơn"
      - "**Vai trò:** Kiểu chữ làm việc duy nhất cho navigation, body copy, product metadata, links và tất cả UI text. Hệ thống dual-weight (regular 400 cho body/labels, bold 700 cho brand names, giá và emphasis) tạo hierarchy mà không cần tăng kích thước. Letter-spacing gần như bằng 0 giữ phong cách editorial thay vì geometric."

    redaction___chỉ_dùng_cho_hero_wordmark___một_display_face_custom_cho_chữ_chrome_3d__lunch__làm_neo_cho_hero_full_bleed__chỉ_dùng_đúng_một_lần_mỗi_trang__đây_là_chữ_ký_typographic__không_phải_component_tái_sử_dụng_____font_redaction:
      - "**Thay thế:** GT Sectra Display Bold, Domaine Display Bold hoặc Editorial New Bold"
      - "**Weights:** 700"
      - "**Kích thước:** 72px"
      - "**Line height:** 1.80"
      - "**Letter spacing:** 0.0020em"
      - "**Vai trò:** Chỉ dùng cho hero wordmark — một display face custom cho chữ chrome 3D 'LUNCH' làm neo cho hero full-bleed. Chỉ dùng đúng một lần mỗi trang; đây là chữ ký typographic, không phải component tái sử dụng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1 | 0.6px | `--text-caption` |"
      info: "| body | 16px | 1.8 | 0.08px | `--text-body` |"
      info: "| subheading | 24px | 1.8 | 0.12px | `--text-subheading` |"
      info: "| heading | 32px | 1.8 | 0.16px | `--text-heading` |"
      info: "| display | 72px | 1.8 | 0.144px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 60-80px"
      - "**Element gap:** 20-30px"

  components:

    announcement_bar:
      vai_trò: "Dải thông báo trên cùng toàn trang"

      info: "Nền #b8aad0 full-width, text #000000 căn giữa ở 12-16px Good Sans regular, line-height 1.8. Không padding trên/dưới — bản thân dải màu là container. Thường là một câu ngắn về trạng thái cửa hàng hoặc lời cảm ơn."

    primary_navigation:
      vai_trò: "Site header navigation"

      thanh_text_link_ngang: "LUNCH CONCEPT (trái, weight 700), sau đó ABOUT, SHOP, JOURNAL, SEARCH dàn đều về bên phải. Text màu #fcfaf1 trên hero tối, chuyển sang #000000 trên các section sáng. Không background, không borders, không icons. Khoảng cách giữa các item khoảng 20-30px."

    hero_with_3d_wordmark:
      vai_trò: "Full-bleed opening viewport"

      info: "Ảnh photographic full-viewport-width (model, sản phẩm hoặc cảnh editorial) với brand wordmark được render dưới dạng chữ kim loại/chrome 3D cỡ lớn phủ ngang toàn bộ chiều rộng. Wordmark dùng Redaction ở 72px nhưng với xử lý 3D extrusion và reflective material. Text trải dài edge-to-edge, cắt một phần vào chủ thể ảnh."

    intro_text_block:
      vai_trò: "Brand statement / about paragraph"

      info: "Đoạn văn căn giữa trên nền Warm Parchment (#f4f1e4), max-width khoảng 600-700px. Body text ở 16px Good Sans regular, line-height 1.8. Theo sau là link 'Find Out More' căn giữa, gạch chân, ở 12px uppercase."

    text_link_underline:
      vai_trò: "Interactive element chính"

      info: "12-16px Good Sans, weight 400, #000000, với underline 1px #000000 cách baseline 2-4px. Không fill, không border, không radius. Uppercase cho navigational links (FIND OUT MORE), mixed case cho inline links (Learn more)."

    product_card:
      vai_trò: "Grid item trong product gallery"

      info: "Zero radius. Ảnh sản phẩm/lookbook theo tỷ lệ gốc trên panel phẳng #fcfaf1 hoặc trắng. Bên dưới ảnh: brand name ở 12px Good Sans bold (#000000), product name ở 12px regular, price ở 12px bold, tiếp theo là 'Sold Out' ở 12px Lilac Veil (#b8aad0) khi hết hàng. Không card border, không shadow, không padding wrapper — ảnh CHÍNH LÀ card."

    product_grid:
      vai_trò: "Layout gallery cho sản phẩm và editorial looks"

      info: "Grid 4-5 cột, gap khoảng 5px giữa các cột. Ảnh sát nhau — không gutters, không padding giữa các card. Grid chạy full-width đến page max-width ~1280px."

    sold_out_status:
      vai_trò: "Chỉ báo tình trạng còn hàng trên product cards"

      info: "Inline text 'Sold Out' ở 12px Good Sans, màu #b8aad0 (Lilac Veil). Xuất hiện ngay sau price. Không background, không badge shape, không border — chỉ là text được tô màu accent thương hiệu."

    cookie_consent_banner:
      vai_trò: "Thông báo tiện ích ở góc dưới bên phải"

      info: "Thẻ trắng nhỏ với text đen, đặt ở góc dưới bên phải. Body text ở 12px với link 'Learn more.' gạch chân. Tối thiểu close affordance."

    footer_band:
      vai_trò: "Dải branding kết thúc trang"

      info: "Nền #b8aad0 (Lilac Veil) full-width, có thể có navigation căn giữa hoặc brand text màu #000000. Phản chiếu announcement bar để đóng khung trang bằng màu thương hiệu."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng bốn-token palette: #000000 cho tất cả text và lines, #f4f1e4 cho content backgrounds, #fcfaf1 cho hero-context UI và surface variant, #b8aad0 cho brand whisper (announcement, footer, Sold Out)."
      - "Đặt tất cả text bằng Good Sans; dùng weight (400 vs 700) để tạo hierarchy trước khi tăng kích thước."
      - "Làm interactive elements thành text links với underline 1px, không phải filled buttons — đây là giao diện dẫn dắt bằng text, không phải bằng button."
      - "Để ảnh sản phẩm và editorial photography là trọng lượng thị giác; UI là khung, không phải người biểu diễn."
      - "Dùng hero wordmark như khoảnh khắc typographic đặc sắc duy nhất — một instance Redaction lớn mỗi trang, không gì khác ở display scale."
      - "Kết hợp ảnh tối full-bleed với Warm Parchment product sections để tạo nhịp điệu editorial."
      - "Giữ cạnh card và ảnh sắc nét (0px radius mọi nơi) — hệ thống dựa trên bố cục flush, kiểu gallery."

    không_nên_làm:
      - "Không thêm filled buttons, pill shapes hoặc rounded corners — hệ thống là 0px radius trên tất cả components."
      - "Không dùng #b8aad0 làm CTA background hoặc call-to-action fill — nó là brand whisper chỉ dành cho announcement bar, footer và trạng thái 'Sold Out'."
      - "Không thêm gradients, drop shadows hoặc glassmorphism — hệ thống dùng flat surfaces và photographic depth."
      - "Không scale body text trên 32px ngoài hero wordmark — Good Sans là workhorse, không phải display face."
      - "Không đặt colored borders hoặc chromatic UI elements; tất cả structural lines đều là #000000."
      - "Không chia brand color thành light/dark variants — Lilac Veil là một flat tone duy nhất, dùng như dấu câu."
      - "Không thêm decorative iconography, badges hoặc UI ornamentation — product photography và wordmark là những người biểu diễn thị giác duy nhất."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Editorial Canvas | `#f4f1e4` | Page background cho intro, product grid và tất cả nội dung sau hero |"
    info: "| 1 | Hero Void | `#000000` | Nền tối full-bleed cho photographic spread mở đầu và wordmark phủ lên |"
    info: "| 2 | Brand Whisper | `#b8aad0` | Announcement bar và footer — các dải lilac đánh dấu câu đóng khung nội dung |"

  imagery:

    info: "Editorial fashion photography chiếm ưu thế: ảnh model tối full-bleed, độ tương phản cao cho hero (ánh sáng studio u ám, phong cách avant-garde — áo corset da đỏ, tartan, tạo dáng kịch tính) và ảnh sản phẩm/lookbook sạch sẽ trên nền trung tính phẳng cho grid (model và items được chụp trên nền xám nhạt/trắng, không có bối cảnh lifestyle). Ảnh có cạnh sắc nét, zero radius, và nằm sát nhau trong grid. Hero image tràn ra cả bốn cạnh của viewport với 3D chrome wordmark phủ lên chủ thể. Ảnh product grid duy trì tỷ lệ chiều cao/chiều rộng đồng nhất trên toàn hàng. Không illustrations, không icons ngoài text-based navigation tối giản. Ngôn ngữ thị giác là: chụp thật tốt, đóng khung thật chặt, để photography gánh vác thương hiệu."

  layout:

    info: "Max-width ~1280px căn giữa cho các content sections; hero là full-bleed edge-to-edge. Nhịp điệu trang là: hero tối full-bleed (viewport height) → intro text căn giữa trên Warm Parchment → product grid 4-5 cột trên cùng nền parchment → Lilac Veil footer band. Navigation nằm dưới dạng thanh text mảnh trên hero (text sáng trên nền tối) và phía trên intro (text tối trên nền sáng). Product grid là layout flush với gutter 5px chặt chẽ, không có card padding hoặc phân cách thị giác giữa các ảnh. Intro section là cột hẹp căn giữa (~600-700px) với khoảng trống dọc rộng rãi (60-80px) phía trên và dưới. Mật độ tổng thể: rộng rãi ở các editorial sections, nén chặt ở product grid."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #f4f1e4"
    - "surface variant: #fcfaf1"
    - "border: #000000"
    - "accent: #b8aad0 (Lilac Veil — announcement bar, footer, Sold Out only)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    - "**Announcement Bar**: Dải nền #b8aad0 full-width, text 12-16px Good Sans regular #000000, căn giữa, một dòng. Không padding wrapper, không border."

    - "**Product Card**: Ảnh flush (zero radius) trên panel #fcfaf1. Bên dưới: brand name 12px Good Sans weight 700 #000000, product name 12px weight 400 #000000, price 12px weight 700 #000000. Nếu hết hàng, thêm 'Sold Out' ở 12px #b8aad0."

    - "**Hero Wordmark**: Ảnh tối full-bleed lấp đầy viewport. Phủ ngang toàn bộ chiều rộng: từ 'LUNCH' ở 72px Redaction weight 700 với xử lý 3D metallic chrome material, cắt một phần vào chủ thể ảnh."

    - "**Text Link**: 12px Good Sans weight 400 #000000 với underline 1px #000000 cách baseline 4px. Không background, không border, không radius. Uppercase cho navigational links."

    - "**Intro Text Block**: Cột căn giữa, max-width 640px, trên nền #f4f1e4. 16px Good Sans regular #000000, line-height 1.8. Theo sau là 'FIND OUT MORE' text link căn giữa 12px uppercase gạch chân."

  similar_brands:

    - "**SSENSE** — Cùng hero editorial tối full-bleed kịch tính với brand wordmark cỡ lớn, tiếp theo là product grid đơn sắc kiềm chế"
    - "**Farfetch** — Fashion concept-store identity với ảnh sản phẩm cạnh sắc nét trên nền trung tính ấm và navigation chỉ text-link"
    - "**Dover Street Market** — Ngôn ngữ editorial concept-store: một khoảnh khắc typographic hoặc photographic đậm nét ở đầu, sau đó là product cataloging tĩnh lặng"
    - "**Toteme** — Bề mặt warm parchment/ivory với text đen, ảnh sản phẩm flush zero-radius và sans-serif typography tối giản"
    - "**Need Supply Co.** — Cửa hàng designer độc lập được tuyển chọn với text-link navigation, status indicators một accent và product grids kiểu gallery"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lilac-veil: #b8aad0;
          --color-ink-black: #000000;
          --color-warm-parchment: #f4f1e4;
          --color-ivory-mist: #fcfaf1;
        
          /* Typography — Font Families */
          --font-good-sans: 'Good Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction: 'Redaction', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.8;
          --tracking-body: 0.08px;
          --text-subheading: 24px;
          --leading-subheading: 1.8;
          --tracking-subheading: 0.12px;
          --text-heading: 32px;
          --leading-heading: 1.8;
          --tracking-heading: 0.16px;
          --text-display: 72px;
          --leading-display: 1.8;
          --tracking-display: 0.144px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 60-80px;
          --element-gap: 20-30px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-editorial-canvas: #f4f1e4;
          --surface-hero-void: #000000;
          --surface-brand-whisper: #b8aad0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lilac-veil: #b8aad0;
          --color-ink-black: #000000;
          --color-warm-parchment: #f4f1e4;
          --color-ivory-mist: #fcfaf1;
        
          /* Typography */
          --font-good-sans: 'Good Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction: 'Redaction', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.8;
          --tracking-body: 0.08px;
          --text-subheading: 24px;
          --leading-subheading: 1.8;
          --tracking-subheading: 0.12px;
          --text-heading: 32px;
          --leading-heading: 1.8;
          --tracking-heading: 0.16px;
          --text-display: 72px;
          --leading-display: 1.8;
          --tracking-display: 0.144px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        }