ferrari___style_reference:
  info: "> Phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, để những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh."

  theme: "mixed"

  info: "Sự hiện diện kỹ thuật số của Ferrari là một phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, nơi những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh, còn bản thân UI giữ kỷ luật với các tông đen, trắng và xám thuần túy. Layout mang phong cách editorial: hero cinematic tối full-bleed với tiêu đề all-caps căn giữa, xen kẽ với các section nội dung trắng có khoảng thở rộng rãi và nhịp điệu text-trái/image-phải cứng nhắc. Ngôn ngữ thị giác kiềm chế và đầy tự tin — CTA mũi tên tròn mảnh, navigation uppercase letter-spacing rộng, border siêu mảnh, không có điểm nhấn màu sắc, và không có gradient trang trí. Mọi quyết định bề mặt đều nhường chỗ cho bức ảnh: giao diện không bao giờ được cạnh tranh với chiếc xe."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, nền section sáng, bề mặt card, chữ trên nền tối |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Hero và feature section tối full-bleed, thanh navigation sâu, chữ chính trên nền sáng |"
    info: "| Carbon Black | `#181818` | `--color-carbon-black` | Bề mặt tối thứ cấp, card tối, nền footer — cao hơn pure black một bậc |"
    info: "| Graphite | `#303030` | `--color-graphite` | Bề mặt tối nâng cao, border tối, cấu trúc dark-mode tinh tế — sáng hơn Carbon một bậc |"
    info: "| Steel Gray | `#8f8f8f` | `--color-steel-gray` | Chữ phụ trợ muted, icon stroke thứ cấp, metadata nhẹ nhàng trên cả nền sáng và tối |"

  tokens___typography:

    body_font___body_font___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_body_font:
      - "**Weights:** 400"
      - "**Sizes:** 9px, 11px, 12px, 13px"
      - "**Line height:** 1.27, 1.5, 1.78, 2"
      - "**Letter spacing:** 0.015, 0.022, 0.028, 0.083, 0.091"
      - "**Vai trò:** Body-Font — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    ferrari_custom_sans_serif___typeface_một_weight_400_dùng_cho_mọi_thứ___navigation__headline__body__label__headline_và_nav_all_caps_với_tracking_dương_mạnh_0_083_0_091em_là_signature_move__body_copy_dùng_tracking_gần_bằng_0_hoặc_hơi_dương_0_015_0_028em__việc_không_có_weight_bold_light_là_một_lựa_chọn_editorial_có_chủ_đích__hierarchy_được_tạo_ra_bằng_kích_thước_và_tracking__không_bao_giờ_dùng_weight_contrast_____font_ferrari_custom_sans_serif:
      - "**Thay thế:** Inter, Helvetica Neue, hoặc Neue Haas Grotesk — chọn font có dạng hình học sạch sẽ và phân bố weight đồng đều ở 400"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.27–2.00"
      - "**Letter spacing:** 0.0150em đến 0.0910em — rộng nhất trên nav/label text uppercase nhỏ (0.083–0.091em), tight trên body copy"
      - "**Vai trò:** Typeface một weight 400 dùng cho mọi thứ — navigation, headline, body, label. Headline và nav all-caps với tracking dương mạnh (0.083–0.091em) là signature move; body copy dùng tracking gần bằng 0 hoặc hơi dương (0.015–0.028em). Việc không có weight bold/light là một lựa chọn editorial có chủ đích: hierarchy được tạo ra bằng kích thước và tracking, không bao giờ dùng weight contrast."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.78 | — | `--text-caption` |"
      info: "| body-sm | 12px | 1.78 | — | `--text-body-sm` |"
      info: "| body | 13px | 1.78 | — | `--text-body` |"

  tokens___spacing___shapes:

    density: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 55 | 55px | `--spacing-55` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 123 | 123px | `--spacing-123` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px — góc sắc, không bo tròn trên ảnh hoặc content cards |"
      info: "| images | 0px — ảnh full-bleed không làm mềm góc |"
      info: "| inputs | 0px |"
      info: "| buttons | 9999px — pill/button tròn hoàn hảo |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-120px"
      - "**Element gap:** 10-16px"

  components:

    dark_cinematic_hero:
      vai_trò: "Section mở đầu full-bleed — thiết lập mood thương hiệu qua nhiếp ảnh"

      nền: "#000000. Ảnh xe hơi phủ kín viewport edge-to-edge, không border, không radius. Label uppercase nhỏ (Racing) ở ~11px, #ffffff, letter-spacing 0.091em, đặt phía trên headline. Display headline (SCUDERIA FERRARI) ở ~32-42px, weight 400, #ffffff, all caps, letter-spacing ~0.05em, căn giữa. Bên dưới headline: ghost text link với nút mũi tên tròn. Không padding — nội dung nằm trên ảnh, không có container hay surface treatment."

    navigation_bar:
      vai_trò: "Navigation chính của site"

      nền: "#181818. Chiều cao ~60px. Logo ngựa chồm Ferrari ở ngoài cùng bên trái. Nav items: RACING, SPORTS CARS, COLECCIONES, EXPERIENCIAS, ABOUT US — tất cả ở ~11px, weight 400, #ffffff, uppercase, letter-spacing 0.091em, khoảng cách rộng giữa các item. Không dropdown, không background, không border — text nổi trên thanh tối."

    circular_arrow_cta:
      vai_trò: "Nút call-to-action chính và phụ"

      border: "1px solid #ffffff, tròn hoàn toàn (border-radius: 9999px). Đường kính ~40px. Chứa icon mũi tên mảnh hướng phải ở giữa. Không background fill — kiểu ghost/outlined. Đi kèm với uppercase text link (DESCUBRIR, LEER MÁS) ở #ffffff hoặc #000000, ~11px, letter-spacing 0.091em, đặt bên trái vòng tròn. Text và vòng tròn căn chỉnh theo chiều ngang, baseline-matched."

    light_content_section:
      vai_trờ: "Khối nội dung bài viết hoặc tin tức trên canvas trắng"

      nền: "#ffffff. Layout chia đôi: cột trái ~45% chứa text, cột phải ~55% chứa ảnh. Heading all caps, weight 400, ~24-32px, #000000, letter-spacing tight. Body text ở ~13px, weight 400, #181818, line-height rộng 2.0. Ảnh bên phải: edge-to-edge, không radius, không border, không shadow. Căn giữa theo chiều dọc giữa text và ảnh. Section padding: ~80-100px trên và dưới."

    text_only_ghost_link:
      vai_trò: "Navigation phụ hoặc inline action"

      info: "Không background, không border, không underline. Uppercase text ở ~11-12px, #000000 hoặc #181818, letter-spacing 0.083-0.091em. Có thể đi kèm với circular arrow CTA. Dùng cho các hành động VER TODAS LAS NOTICIAS, LEER MÁS, DESCUBRIR."

    carousel_pagination_dots:
      vai_trò: "Chỉ báo vị trí slide"

      info: "Hàng ngang các chấm tròn nhỏ (~8px đường kính). Chấm active: filled #d40000 hoặc #000000 (màu đỏ Ferrari có thể xuất hiện ở đây như ngoại lệ màu sắc duy nhất). Chấm inactive: hollow hoặc low-opacity #8f8f8f. Các chấm cách nhau ~10px, căn giữa bên dưới nội dung. Không số, không progress bar."

    full_bleed_editorial_image:
      vai_trò: "Trưng bày nội dung nhiếp ảnh"

      info: "Đặt edge-to-edge với 0px border-radius. Không shadow, không border, không caption overlay. Ảnh luôn tối, có bầu không khí, và độ tương phản cao — được chụp trong studio hoặc môi trường điện ảnh. Ảnh chính là bề mặt; giao diện không cung cấp khung."

    two_column_split_section:
      vai_trò: "Layout nội dung tiêu chuẩn ghép text và ảnh"

      chia_50_50_hoặc_45_55__bên_trái: "khối text với headline + body + CTA, bên phải: ảnh. Gutter rộng ~40-60px giữa các cột. Trên mobile, xếp chồng theo chiều dọc với ảnh bên dưới text. Không thay đổi màu nền giữa các section — dòng chảy seamless trắng sang trắng, nhịp điệu được tạo ra chỉ bằng spacing."

    footer_navigation_block:
      vai_trò: "Link toàn site và thông tin pháp lý"

      nền: "#181818 hoặc #000000. Link text ở ~9-11px, #ffffff hoặc #8f8f8f, uppercase, letter-spacing rộng 0.091em. Link được sắp xếp theo cột hoặc nhóm ngang. Hairline 1px border-top ở #303030 để phân cách với nội dung. Social/legal text ở scale caption 9px."

    slide_navigation_arrows:
      vai_trò: "Điều khiển trái/phải carousel"

      info: "Chevron arrows tối giản (‹ ›) đặt ở giữa chiều dọc trên cạnh trái và phải của vùng carousel. Không background, không hình dạng nút. Màu: #000000 trên section sáng, #ffffff trên section tối. Kích thước ~20px, stroke mảnh. Vô hình cho đến khi hover."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng màu achromatic — đen, trắng và xám — trên toàn bộ giao diện. Để nhiếp ảnh cung cấp toàn bộ năng lượng màu sắc."
      - "Đặt tất cả navigation, label và headline ở dạng ALL CAPS với letter-spacing từ 0.083em đến 0.091em — tracking rộng này là signature chính của hệ thống."
      - "Chỉ dùng một typeface ở weight 400. Tạo hierarchy thông qua kích thước và tracking, không bao giờ dùng weight contrast bold/light."
      - "Dùng nút mũi tên outlined tròn (9999px radius) cho tất cả CTA — vòng tròn border 1px với icon mũi tên mảnh bên trong, không bao giờ dùng hình chữ nhật filled."
      - "Để ảnh tràn ra mép với 0px border-radius. Không frame, không shadow, không bo góc trên ảnh."
      - "Duy trì vertical rhythm rộng rãi: 80-120px giữa các section, 10-16px giữa các element liên quan, 15-20px horizontal padding trong khối text."
      - "Dùng #000000 cho dark stage full-bleed và #181818 cho lớp bề mặt tối lùi một bậc — tạo chiều sâu qua grayscale, không qua shadow."

    don_t:
      - "Không bao giờ đưa màu UI chromatic — không nút đỏ, không link xanh, không badge màu. Hệ thống cố tình 0% màu sắc."
      - "Không bao giờ dùng weight bold hoặc semibold. Weight 400 là weight duy nhất trong hệ thống; hierarchy đến từ kích thước."
      - "Không bao giờ thêm border-radius vào ảnh, card hoặc bề mặt nội dung. Tất cả cạnh đều là góc sắc 0px."
      - "Không bao giờ dùng nút hình chữ nhật filled. Tất cả CTA đều là ghost circular arrow buttons hoặc plain text links."
      - "Không bao giờ thêm drop shadows hoặc box-shadows. Chiều sâu được truyền tải qua grayscale layering, không bao giờ dùng hiệu ứng elevation."
      - "Không bao giờ dùng gradient trang trí. Hệ thống flat — không chuyển màu, không glow, không hiệu ứng blur."
      - "Không bao giờ làm layout chật chội. Tín hiệu xa xỉ của Ferrari là khoảng thở — nếu một section cảm thấy dày đặc, hãy thêm 30% không gian."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Canvas White | `#ffffff` | Nền trang chủ đạo cho content sections |"
    info: "| 1 | Pure Black Stage | `#000000` | Hero và feature section cinematic full-bleed — ảnh xe hơi sống ở đây |"
    info: "| 2 | Carbon Surface | `#181818` | Navigation bar, dark cards, chiều sâu footer |"
    info: "| 3 | Graphite Surface | `#303030` | Element tối nâng cao, cấu trúc tinh tế trong dark sections |"

  elevation:

    info: "Hệ thống cố tình tránh hoàn toàn drop shadows và box-shadows. Chiều sâu được truyền tải qua grayscale surface layering: #000000 (sâu nhất) → #181818 (bề mặt tối) → #303030 (tối nâng cao) → #ffffff (canvas sáng). Cách tiếp cận flat này giữ toàn bộ sự chú ý vào nhiếp ảnh và củng cố cảm giác gallery editorial — shadow sẽ có vẻ trang trí hơn là cấu trúc trong hệ thống này."

  imagery:

    info: "Nhiếp ảnh là toàn bộ thương hiệu thị giác. Ảnh luôn tối, độ tương phản cao, cinematic — xe được chụp trong studio, đường hầm, đường đua và môi trường có bầu không khí với ánh sáng kịch tính. Treatment: full-bleed, edge-to-edge, 0px border-radius, không frame, không overlay, không duotone. Không có ảnh lifestyle hoặc con người chiếm ưu thế — chiếc xe LÀ chủ thể. Không có illustration, không icon ngoài mũi tên navigation stroke mảnh tối thiểu, không 3D render, không product mockup. Ảnh mang 80%+ trọng lượng thị giác trên hầu hết các trang; text là thứ yếu, hỗ trợ bức ảnh thay vì cạnh tranh với nó."

  layout:

    info: "Mô hình trang full-bleed không có max-width container hiển thị trên hero sections — chúng trải dài edge-to-edge. Content sections dùng max-width ~1280px căn giữa. Màn hình đầu tiên luôn là dark cinematic hero: ảnh xe hơi full-viewport với label nhỏ căn giữa → headline all-caps lớn → ghost arrow CTA. Các section tiếp theo xen kẽ: khối nội dung trắng với split text-trái/image-phải theo tỷ lệ 45/55, cách nhau bằng khoảng trống dọc rộng 80-120px. Carousel dùng full width với chevron arrows đặt ở mép và dot pagination căn giữa. Navigation là một thanh tối duy nhất (60px) với logo ngựa chồm bên trái và uppercase text links trải rộng. Nhịp điệu cố tình chậm và editorial — hai hoặc ba section mỗi scroll, không bao giờ dày đặc thông tin."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 trên section sáng, #ffffff trên section tối"
    - "Background: #ffffff (section sáng), #000000 (hero tối), #181818 (bề mặt tối)"
    - "Border: #303030 trên tối, #000000 trên sáng"
    - "Muted text/icons: #8f8f8f"
    - "Accent: không — hệ thống hoàn toàn achromatic"
    - "primary action: không có màu CTA riêng biệt"

  3_5_example_component_prompts:

    - "**Dark Hero Section**: Nền #000000 full-bleed với ảnh xe hơi độ tương phản cao phủ kín viewport. Label uppercase nhỏ 'Racing' ở 11px, weight 400, #ffffff, letter-spacing 1px. Display headline 'SCUDERIA FERRARI' ở 42px, weight 400, #ffffff, all caps, letter-spacing 2px, căn giữa. Bên dưới: ghost text link 'DESCUBRIR' ở 11px, #ffffff, letter-spacing 1px, đi kèm với nút outlined tròn 40px (1px solid #ffffff, border-radius 9999px) chứa icon mũi tên phải."

    - "**Navigation Bar**: Chiều cao 60px, nền #181818. Logo ngựa chồm Ferrari ở 24px ngoài cùng bên trái. Nav items (RACING, SPORTS CARS, COLECCIONES) ở 11px, weight 400, #ffffff, all caps, letter-spacing 1px, cách nhau 30px. Không background, không border, không dropdown."

    - "**News Content Block**: Nền trắng (#ffffff), max-width 1280px căn giữa. Hai cột chia: trái 45% text, phải 55% ảnh. Heading 'FERRARI AT IMOLA' ở 28px, weight 400, #000000, all caps, letter-spacing 1.5px. Body text ở 13px, weight 400, #181818, line-height 2.0. Cột phải: ảnh tối full-bleed, 0px border-radius, không border hoặc shadow. Bên dưới text: ghost link 'LEER MÁS' ở 11px với nút mũi tên tròn 36px (1px solid #000000)."

    - "**Carousel Pagination**: Ba chấm nhỏ (8px đường kính) căn giữa theo chiều ngang. Chấm active: filled #000000. Chấm inactive: fill #8f8f8f. Khoảng cách 10px giữa các chấm. Không số, không progress bar."

    - "**Footer Block**: Nền #181818, full-width. Link trong cột ở 9px, weight 400, #ffffff, all caps, letter-spacing 0.8px. Border-top 1px ở #303030. Icon social dạng line icon stroke mảnh ở #8f8f8f."

  similar_brands:

    - "**Aston Martin** — Cùng cách tiếp cận website xe hơi xa xỉ editorial — hero cinematic tối full-bleed, navigation all-caps, control outlined ghost, UI đơn sắc để ảnh xe hơi chiếm ưu thế"
    - "**Porsche** — Cùng ngôn ngữ giao diện monochrome tối giản với khoảng trắng rộng rãi, uppercase tracked navigation và content blocks ưu tiên nhiếp ảnh"
    - "**Lamborghini** — Cùng pattern hero tối + content section trắng, ảnh full-bleed góc sắc, bảng màu kiềm chế nhường chỗ cho màu sắc của chính chiếc xe"
    - "**Bang & Olufsen** — Thương hiệu xa xỉ rút gọn giao diện xuống chỉ còn đen và trắng thuần túy, không có điểm nhấn màu sắc, dùng ảnh sản phẩm làm nguồn màu thị giác duy nhất"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-pure-black: #000000;
          --color-carbon-black: #181818;
          --color-graphite: #303030;
          --color-steel-gray: #8f8f8f;
        
          /* Typography — Font Families */
          --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.78;
          --text-body-sm: 12px;
          --leading-body-sm: 1.78;
          --text-body: 13px;
          --leading-body: 1.78;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-50: 50px;
          --spacing-54: 54px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-123: 123px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-120px;
          --element-gap: 10-16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px — góc sắc, không bo tròn trên ảnh hoặc content cards;
          --radius-images: 0px — ảnh full-bleed không làm mềm góc;
          --radius-inputs: 0px;
          --radius-buttons: 9999px — pill/button tròn hoàn hảo;
        
          /* Surfaces */
          --surface-canvas-white: #ffffff;
          --surface-pure-black-stage: #000000;
          --surface-carbon-surface: #181818;
          --surface-graphite-surface: #303030;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-pure-black: #000000;
          --color-carbon-black: #181818;
          --color-graphite: #303030;
          --color-steel-gray: #8f8f8f;
        
          /* Typography */
          --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.78;
          --text-body-sm: 12px;
          --leading-body-sm: 1.78;
          --text-body: 13px;
          --leading-body: 1.78;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-50: 50px;
          --spacing-54: 54px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-123: 123px;
        }