champions4good___style_reference:
  info: "> Midnight sports broadside — poster câu lạc bộ cổ điển nổi bật trên nền tường màu mận tím"

  theme: "dark"

  info: "Champions4good là club poster theo phong cách dark-first: nền deep plum, một điểm nhấn lavender rực rỡ duy nhất, và display type ultra-condensed tràn đầy màn hình như một sports broadside cổ điển. Hệ thống phân cấp thị giác cực kỳ đơn giản — mọi thứ có màu sắc đều là lavender-pink (#e894ff) trên nền plum, và các điểm nhấn phụ (mint, amber) xuất hiện như những dấu câu chức năng nhỏ thay vì cạnh tranh sự chú ý. Các phần body text chuyển sang nền trắng với cùng display type condensed được render bằng màu đen đậm, tạo nhịp điệu tương phản cao giữa các section. Thái độ của typography là chống lại sự kiềm chế: Druk Condensed ở 200-300px với tracking chặt và line-height chặt đẩy display copy ra sát mép container, trong khi Neue Montreal xử lý UI chrome ở kích thước con người. Các component tối thiểu — pill toggles, một button lavender filled duy nhất, navigation thưa thớt — để typography và sự tương phản plum-to-trắng làm tất cả công việc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Deep Plum | `#23002b` | `--color-deep-plum` | Hero canvas, nền dark section, page-level ground — tạo tâm trạng câu lạc bộ đêm độc quyền |"
    info: "| Lavender Shock | `#e894ff` | `--color-lavender-shock` | Điểm nhấn hồng cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Espresso Brown | `#291900` | `--color-espresso-brown` | Màu gần-đen ấm cho nền card, bề mặt UI tối, border pha ấm — thêm hơi ấm tinh tế cho bảng màu lạnh |"
    info: "| Ink Teal | `#002629` | `--color-ink-teal` | Màu gần-đen lạnh cho body text, bề mặt card sâu, border lạnh — undertone teal phân biệt text tối với nền plum |"
    info: "| Slate | `#333333` | `--color-slate` | Body text chính trên light section, icon strokes, UI text đậm đặc |"
    info: "| Charcoal | `#121212` | `--color-charcoal` | Headline trên light section, khối text nặng, nhấn mạnh gần-đen |"
    info: "| Black | `#000000` | `--color-black` | Text tương phản tối đa trên white section, fill đặc cho display type condensed trong vùng sáng |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Light section canvas, reverse text trên dark plum, bề mặt card trong vùng sáng |"
    info: "| Mint Signal | `#93ffe4` | `--color-mint-signal` | Dấu câu nhấn mạnh: highlight washes, badge backgrounds, khoảnh khắc chức năng nhỏ — tương phản lạnh với lavender |"
    info: "| Amber Pulse | `#ffac47` | `--color-amber-pulse` | Dấu câu nhấn mạnh: khoảnh khắc highlight ấm, badge phụ, energy markers — tương phản ấm với bảng màu lạnh |"

  tokens___typography:

    druk_condensed_super_desktop___display_và_section_headings___condensed_bold_cực_đoan_lấp_đầy_container_từ_mép_này_sang_mép_kia__151_317px_cho_hero_scale_words__24_44px_cho_subheadings____font_druk_condensed_super_desktop:
      - "**Thay thế:** Oswald (700, condensed) hoặc Bebas Neue cho lựa chọn miễn phí; Anton là phương án cuối cùng"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 24px, 29px, 32px, 43px, 44px, 151px, 187px, 317px"
      - "**Line height:** 0.78, 0.85, 1.00"
      - "**Letter spacing:** +0.005em đến +0.008em — tracking dương nhẹ ngăn letterforms ultra-condensed cảm giác ngột ngạt ở kích thước display"
      - "**Vai trò:** Display và section headings — condensed bold cực đoan lấp đầy container từ mép này sang mép kia; 151-317px cho hero-scale words, 24-44px cho subheadings"

    neue_montreal___ui_body__navigation__buttons__supporting_copy___geometric_sans_serif_giữ_im_lặng_để_druk_có_thể_hét__58px_là_kích_thước_cầu_nối_giữa_ui_và_display____font_neue_montreal:
      - "**Thay thế:** Inter, Manrope, hoặc DM Sans"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 12px, 14px, 15px, 16px, 58px"
      - "**Line height:** 1.00, 1.10, 1.20, 1.30, 1.40, 1.43"
      - "**Letter spacing:** -0.022em — tracking âm siết chặt UI type thành một khối nhỏ gọn, tự tin, neo thị giác vững chắc trước display type trải rộng"
      - "**Vai trò:** UI body, navigation, buttons, supporting copy — geometric sans-serif giữ im lặng để Druk có thể hét; 58px là kích thước cầu nối giữa UI và display"

    arial___system_fallback_cho_body_text_rendering____font_arial:
      - "**Thay thế:** system-ui, sans-serif"
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.43"
      - "**Vai trò:** System fallback cho body text rendering"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.43 | -0.22px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.22px | `--text-body-sm` |"
      info: "| subheading | 24px | 1 | 0.05px | `--text-subheading` |"
      info: "| heading-sm | 32px | 0.85 | 0.05px | `--text-heading-sm` |"
      info: "| heading | 58px | 1.1 | -0.22px | `--text-heading` |"
      info: "| display | 187px | 0.85 | 0.05px | `--text-display` |"
      info: "| display-xl | 317px | 0.78 | 0.05px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 6px |"
      info: "| cards | 14px |"
      info: "| pills | 9999px |"
      info: "| buttons | 9999px |"
      info: "| special | 24px |"

    layout:

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

  components:

    hero_display_headline:
      vai_trò: "Full-bleed poster-scale word stack"

      info: "Druk Condensed 317px với line-height 0.78, màu Lavender Shock (#e894ff) trên nền Deep Plum (#23002b). Các chữ cái đẩy ra sát mép viewport với padding gần như bằng không. Không xuống dòng — mỗi từ là một element riêng biệt. Các từ kết nối phụ ('YOUR', 'OF') nằm ở Neue Montreal 58px weight 600, phá vỡ nhịp điệu display. Sự nén dọc cực đoan (line-height 0.78) khiến descender và ascender chồng lên các dòng liền kề, tạo hiệu ứng poster-stacked."

    sport_toggle_pill:
      vai_trò: "Bộ chọn hai tùy chọn cho loại thể thao (tennis/golf)"

      info: "Hình pill (9999px radius), khung 80×48px, nền Deep Plum (#23002b). Trạng thái active: fill Lavender Shock (#e894ff) với icon tối. Trạng thái inactive: outline với border Lavender Shock 1px trên nền trong suốt. Icon là hình vận động viên thể thao line-art đơn giản màu trắng ở trung tâm."

    filled_lavender_button:
      vai_trò: "Primary action — Join, Sign Up, CTA"

      info: "Hình pill (9999px radius), padding 12px 20px, nền Lavender Shock (#e894ff), text Deep Plum (#23002b), Neue Montreal 14px weight 500. Không border, không shadow. Khi hover: chuyển độ sáng nhẹ lên 100% saturation. Nhỏ gọn — đây là button một từ."

    navigation_bar:
      vai_trò: "Site navigation cấp cao nhất"

      info: "Trong suốt trên hero, cao 64px, ngang: logo trái, nav links giữa, action button phải. Links ở Neue Montreal 14px, Paper White (#ffffff) trên dark section, Slate (#333333) trên light section. Active link có underline hoặc chuyển màu Lavender Shock. Không có background bar — nav nổi trực tiếp trên section canvas."

    wordmark_logo:
      vai_trò: "Brand identity mark"

      logo_text_xếp_chồng: "'CHAMPIONS FOR GOOD CLUB' ba dòng, Druk Condensed weight 400 ở ~20px, Lavender Shock (#e894ff). Có icon mark nhỏ phía trước. Không tagline, không subtext — mark CHÍNH LÀ identity."

    light_section_display_block:
      vai_trò: "Headline blocks trên white canvas sections"

      info: "Druk Condensed 187px với line-height 0.85, fill Black (#000000) hoặc Charcoal (#121212), căn trái. Các từ xếp dọc với tracking chặt. White space chiếm ưu thế bên phải layout. Đây là khoảnh khắc 'poster' trên light section — cùng xử lý type như hero, màu khác."

    card_surface:
      vai_trò: "Content card trên nền tối hoặc sáng"

      info: "border-radius 14px, padding 20px, không shadow. Biến thể tối: nền Espresso Brown (#291900) với text Paper White (#ffffff). Biến thể sáng: nền Paper White với text Slate (#333333) và border hairline 1px màu #e5e5e5."

    badge___tag:
      vai_trò: "Label trạng thái hoặc danh mục nhỏ"

      info: "border-radius 6px, padding dọc 3-5px, padding ngang 8-10px. Fill Mint Signal (#93ffe4), Amber Pulse (#ffac47), hoặc Lavender Shock (#e894ff) với text tối. Neue Montreal 12px weight 500, có thể viết hoa."

    footer_link_list:
      vai_trò: "Navigation cuối trang"

      info: "Neue Montreal 14px, Paper White trên footer dark section, Slate trên light section. row-gap 8px giữa các link, cột căn trái. Không trang trí — chỉ type đậm đặc, dễ đọc."

  do_s_and_don_ts:

    do:
      - "Dùng Druk Condensed cho mọi display heading từ 58px trở lên — font này là brand voice, không phải trang trí"
      - "Đặt display type với line-height 0.78-0.85 để tạo hiệu ứng chồng poster-stacked"
      - "Dùng Lavender Shock (#e894ff) làm màu sắc DUY NHẤT trên section Deep Plum (#23002b) — để duotone làm việc"
      - "Áp dụng border-radius 9999px cho mọi button, tag, và pill element — không có góc nhọn trong UI"
      - "Phá vỡ nhịp điệu trang bằng section trắng (#ffffff) sau dark plum section — sự tương phản CHÍNH LÀ layout"
      - "Dùng Mint Signal (#93ffe4) và Amber Pulse (#ffac47) chỉ làm accent nhỏ dưới 20% viewport — chúng là dấu câu, không phải bề mặt"
      - "Giữ Neue Montreal ở 12-16px cho mọi UI chrome — nó phải đủ im lặng để Druk thống trị"

    don_t:
      - "Không dùng font nào khác ngoài Druk Condensed cho display type — system serifs hoặc regular sans-serifs ở 200px+ sẽ phá hủy năng lượng poster"
      - "Không đặt Lavender Shock (#e894ff) trên nền trắng hoặc sáng — độ tương phản được thiết kế chỉ cho dark plum"
      - "Không thêm box-shadows vào card hoặc button — thiết kế dùng flat color layering, không phải elevation"
      - "Không dùng line-height trên 1.0 cho display type — sự nén dọc chặt là signature"
      - "Không trộn accent colors (mint, amber) vào dark plum sections — chúng chỉ thuộc về light/transition zones"
      - "Không dùng border-radius nhỏ hơn 6px trên bất kỳ interactive element nào — hệ thống được xây dựng trên pills và góc mềm"
      - "Không căn giữa display headline — căn trái đẩy type ra mép viewport để tạo hiệu ứng broadside"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Deep Plum Ground | `#23002b` | Hero và dark section canvas — bề mặt brand chính |"
    info: "| 1 | Espresso Card | `#291900` | Bề mặt card tối, element nâng cao pha ấm trên nền plum |"
    info: "| 2 | Ink Teal Card | `#002629` | Bề mặt card pha lạnh và text sâu trên light section |"
    info: "| 3 | Paper White | `#ffffff` | Light section canvas, reverse text, break section tương phản cao |"

  imagery:

    info: "Iconography là ngôn ngữ thị giác chính: hình vận động viên thể thao line-art đơn giản (tennis player, golfer) được render dưới dạng outline một nét màu trắng hoặc lavender, dùng bên trong pill toggles. Không photography, không illustrations, không 3D renders. Bản thân display type là imagery — các từ condensed khổng lồ hoạt động như visual art trên canvas plum. Bất kỳ nội dung ảnh nào cũng cần là sports imagery được crop chặt với độ tương phản cao và background tối thiểu."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (trên nền tối) / #333333 (trên nền sáng)"
    - "background: #23002b (dark sections) / #ffffff (light sections)"
    - "border: rgba(255,255,255,0.2) trên nền tối / #e5e5e5 trên nền sáng"
    - "accent: #e894ff"
    - "signal: #93ffe4 (mint), #ffac47 (amber)"
    - "primary action: không có màu CTA riêng biệt"

    3_5_example_component_prompts:

    - "*Create a hero section:* Nền full-bleed Deep Plum (#23002b). Display headline ở Druk Condensed 317px weight 500, line-height 0.78, màu Lavender Shock (#e894ff), letter-spacing +0.008em. Từ phụ ở Neue Montreal 58px weight 600. Hai pill toggles (9999px radius, 80×48px) căn giữa phía trên headline, một cái filled Lavender Shock, một cái outlined với border Lavender Shock 1px."

    - "*Create a filled action button:* Hình pill (9999px radius), padding 12px 20px, nền Lavender Shock (#e894ff), text Deep Plum (#23002b), Neue Montreal 14px weight 500, không border, không shadow."

    - "*Create a light-section display block:* Nền trắng (#ffffff). Druk Condensed 187px weight 500, line-height 0.85, màu Black (#000000), căn trái, chiếm 60% viewport width. Padding trên 64px."

    - "*Create a card on dark ground:* border-radius 14px, padding 20px, nền Espresso Brown (#291900), body text Paper White (#ffffff) ở Neue Montreal 15px weight 400. Tùy chọn badge tag Mint Signal (#93ffe4) (radius 6px, padding 4px 10px) ở góc trên bên trái."

    - "*Create a navigation bar:* Nền trong suốt, cao 64px, padding ngang 20px. Logo trái (Druk Condensed 20px Lavender Shock), nav links giữa (Neue Montreal 14px Paper White với gap 32px), filled action button phải (pill Lavender Shock, padding 12px 20px)."

  similar_brands:

    - "**The Players' Tribune** — Cùng cách tiếp cận dark-canvas + ultra-condensed display type cho sports community branding"
    - "**On Running** — Condensed type đậm lấp đầy viewport, một accent color duy nhất trên nền tối, poster-scale typography"
    - "**WHOOP** — Dark-first interface với một accent bão hòa duy nhất (lavender/electric) trên nền deep neutral"
    - "**Gymshark** — Display type tương phản cao đẩy ra mép viewport, năng lượng club/community thông qua typographic scale"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-plum: #23002b;
          --color-lavender-shock: #e894ff;
          --color-espresso-brown: #291900;
          --color-ink-teal: #002629;
          --color-slate: #333333;
          --color-charcoal: #121212;
          --color-black: #000000;
          --color-paper-white: #ffffff;
          --color-mint-signal: #93ffe4;
          --color-amber-pulse: #ffac47;
        
          /* Typography — Font Families */
          --font-druk-condensed-super-desktop: 'Druk Condensed Super Desktop', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.22px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.22px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: 0.05px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 0.85;
          --tracking-heading-sm: 0.05px;
          --text-heading: 58px;
          --leading-heading: 1.1;
          --tracking-heading: -0.22px;
          --text-display: 187px;
          --leading-display: 0.85;
          --tracking-display: 0.05px;
          --text-display-xl: 317px;
          --leading-display-xl: 0.78;
          --tracking-display-xl: 0.05px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-tags: 6px;
          --radius-cards: 14px;
          --radius-pills: 9999px;
          --radius-buttons: 9999px;
          --radius-special: 24px;
        
          /* Surfaces */
          --surface-deep-plum-ground: #23002b;
          --surface-espresso-card: #291900;
          --surface-ink-teal-card: #002629;
          --surface-paper-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-plum: #23002b;
          --color-lavender-shock: #e894ff;
          --color-espresso-brown: #291900;
          --color-ink-teal: #002629;
          --color-slate: #333333;
          --color-charcoal: #121212;
          --color-black: #000000;
          --color-paper-white: #ffffff;
          --color-mint-signal: #93ffe4;
          --color-amber-pulse: #ffac47;
        
          /* Typography */
          --font-druk-condensed-super-desktop: 'Druk Condensed Super Desktop', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.22px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.22px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: 0.05px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 0.85;
          --tracking-heading-sm: 0.05px;
          --text-heading: 58px;
          --leading-heading: 1.1;
          --tracking-heading: -0.22px;
          --text-display: 187px;
          --leading-display: 0.85;
          --tracking-display: 0.05px;
          --text-display-xl: 317px;
          --leading-display-xl: 0.78;
          --tracking-display-xl: 0.05px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        }