tech_barcelona___style_reference:
  info: "> Editorial tech manifesto trên nền marble trắng"

  theme: "mixed"

  info: "Tech Barcelona vận hành bằng ngôn ngữ typography-first: một font neo-grotesque độc quyền (FavoritPro) với weight 400 cực nhẹ chi phối toàn bộ giao diện, để scale và khoảng trắng đảm nhận vai trò cấu trúc thay vì độ tương phản weight. Canvas chủ yếu là trắng và tĩnh lặng, với một màu cobalt xanh lam đậm (#0075ff) duy nhất dành riêng cho hành động — nó xuất hiện một lần dưới dạng button filled trong nav và không trang trí ở nơi nào khác. Màu gần đen #090707 dùng cho headline và nội dung hình ảnh, tạo độ tương phản mạnh với bề mặt trắng. Hero band đảo ngược mối quan hệ này: canvas đen, type trắng, logo hình học cỡ lớn. Các component phẳng và tối giản — hairline borders, không shadow, không gradient — để nhiếp ảnh và type tỷ lệ lớn gánh vác trọng lượng thị giác. Nhịp điệu tổng thể mang phong cách editorial: khoảng trắng dọc rộng rãi, display size cỡ lớn lên đến 80px, letter-spacing chặt kéo các headline lớn thành những khối đậm đặc, tự tin."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, điểm nhấn màu duy nhất trong toàn bộ giao diện — một xanh lam rực rỡ trên nền trung tính đơn sắc, dùng có chừng mực để báo hiệu hành động mà không cạnh tranh với nội dung |"
    info: "| Ink Black | `#090707` | `--color-ink-black` | Màu headline, border ảnh, display text cỡ lớn — gần đen với chút ấm nhẹ, chọn thay vì đen thuần để tạo cảm giác in ấn thay vì kỹ thuật số |"
    info: "| Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — màu trung tính làm việc cho interface chrome và đoạn văn bản dễ đọc |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, text trên hero tối và nền logo tối — thiết lập nền light-mode và tất cả bề mặt nội dung |"
    info: "| Hairline Gray | `#cccccc` | `--color-hairline-gray` | Divider mờ và border phụ — đường kẻ mảnh trên bề mặt sáng nơi #212529 sẽ quá nặng |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Border tối và separator cho bề mặt elevated và UI inverted. |"
    info: "| Shadow Whisper | `#eeeeee` | `--color-shadow-whisper` | Màu shadow ambient gần như vô hình cho button states — một lớp 1px 1px mờ đến mức hầu như không thấy, dùng thay vì drop-shadow đầy đủ |"

  tokens___typography:

    favoritpro_light___hệ_thống_type_một_font_duy_nhất_dùng_cho_mọi_element_giao_diện___nav__body__buttons__headlines_và_display_80px__weight_400_xuyên_suốt_là_lựa_chọn_đặc_trưng__hệ_thống_dựa_vào_bước_nhảy_scale_14px_body___50px_subhead___80px_display_thay_vì_bold_weights_để_thiết_lập_hierarchy__mang_lại_cho_toàn_bộ_site_nhịp_điệu_editorial_tinh_tế____font_favoritpro_light:
      - "**Thay thế:** Inter, Neue Haas Grotesk, hoặc Helvetica Neue Light ở weight tương ứng"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 50px, 80px"
      - "**Line height:** 1.00–1.59"
      - "**Letter spacing:** -0.045em ở display sizes (50–80px), -0.01em ở body, +0.08em và +0.09em dành riêng cho label tracked-out và uppercase nhỏ"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Hệ thống type một font duy nhất dùng cho mọi element giao diện — nav, body, buttons, headlines và display 80px. Weight 400 xuyên suốt là lựa chọn đặc trưng: hệ thống dựa vào bước nhảy scale (14px body → 50px subhead → 80px display) thay vì bold weights để thiết lập hierarchy, mang lại cho toàn bộ site nhịp điệu editorial tinh tế"

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | -0.45px | `--text-caption` |"
      info: "| body | 14px | 1.5 | -0.14px | `--text-body` |"
      info: "| subheading | 18px | 1.33 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.2 | -0.22px | `--text-heading-sm` |"
      info: "| heading | 50px | 1 | -2.25px | `--text-heading` |"
      info: "| display | 80px | 1 | -3.6px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 143 | 143px | `--spacing-143` |"

    border_radius:

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

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(238, 238, 238) 1px 1px 0px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 50-80px"
      - "**Card padding:** 16px"
      - "**Element gap:** 4-10px"

  components:

    primary_action_button:
      vai_trò: "Button chromatic filled duy nhất trong hệ thống"

      info: "Background #0075ff, text #ffffff, không border, 0px radius (góc vuông), padding dọc 10–16px, padding ngang 15px. FavoritPro 400 ở 14–16px. Màu xanh lam rực rỡ trên nền trắng tạo focal hierarchy ngay lập tức. Dùng một lần trong nav ('Join Us') và cho các thời điểm chuyển đổi chính."

    ghost_button:
      vai_trò: "Hành động phụ hoặc cấp ba trên bề mặt sáng"

      info: "Background trong suốt, border 1px màu #212529 hoặc #cccccc, text #212529, 0px radius, padding 10–16px. FavoritPro 400 ở 14px. Dùng cho 'Discover how we can help you' và các CTA khám phá tương tự nơi trọng lượng thị giác không nên cạnh tranh với màu xanh chính."

    top_navigation_bar:
      vai_trò: "Header cố định trên tất cả trang"

      info: "Background trắng hoặc trong suốt, chiều cao 40–48px, nav links ngang bằng FavoritPro 400 ở 13–14px màu #212529. Primary blue button neo ở góc trên bên phải. Search icon và language selector (EN ↗) nằm bên phải nav links với divider mảnh. Không drop-shadow hoặc border trên thanh bar."

    hero_block:
      vai_trò: "Dải mở đầu tối full-bleed"

      info: "Background #000000, full viewport width. Logo hình học cỡ lớn (mark pixel-art hình vuông trắng) ở 300–400px bên trái, display headline lớn màu trắng #ffffff ở 50–80px weight 400 với tracking -3.6px, đặt bên phải logo. Stats ticker bar bên dưới trong một dải mảnh với text trắng trên nền tối."

    stats_ticker_bar:
      vai_trò: "Dải bằng chứng số ngang"

      info: "Dải hẹp full-width (chiều cao 40–60px) với text trắng trên nền đen #000000. Cặp label-số ('COMPANIES', 'PARTNERS', 'AUDIENCE', 'MEMBERS') bằng FavoritPro 400 với tracking +0.08em và xử lý uppercase. Đóng vai trò cầu nối thị giác giữa hero tối và các section nội dung sáng."

    full_bleed_image_block:
      vai_trò: "Section nhiếp ảnh editorial"

      info: "Full viewport width, không border-radius, không padding quanh ảnh. Ảnh chụp mang tính môi trường/kiến trúc (tòa nhà gạch, cảnh quan thành phố) với màu sắc tự nhiên. Thường dùng làm divider section hoặc context setter giữa các khối text."

    story_card:
      vai_trò: "Tile xem trước nội dung cho bài viết/tin tức"

      info: "Background trắng, 0px radius, border 1px màu #cccccc hoặc #212529. Title bằng FavoritPro 400 ở 16–18px màu #090707, metadata label phía trên ở dạng uppercase có tracking. Category tag nhỏ bên dưới. Không shadow, không góc bo tròn — dựa vào hairline border và type hierarchy."

    section_divider:
      vai_trò: "Đường kẻ dọc hoặc ngang giữa các khối nội dung"

      info: "Đường kẻ 1px màu #cccccc hoặc #212529, full container width. Dùng thay vì thay đổi background-color để phân cách các dải nội dung trong khi giữ canvas trắng không bị gián đoạn."

    language_switcher:
      vai_trò: "Nút chuyển đổi ngôn ngữ trong nav"

      info: "Element text nhỏ gọn hiển thị locale hiện tại ('EN') với mũi tên chỉ báo, FavoritPro 400 ở 13px màu #212529. Không background, không border, không chevron icon — chỉ text và một glyph."

    category_tag:
      vai_trò: "Label nhỏ cho taxonomy nội dung"

      info: "Không background, không border, chỉ text. FavoritPro 400 ở 10–12px màu #212529, thường có tracking +0.08em và uppercase. Nằm cạnh hoặc bên dưới card title để chỉ loại nội dung."

  do_s_and_don_ts:

    do:
      - "Dùng FavoritPro 400 ở mọi size và weight — không dùng bold hoặc medium weights; hierarchy đến từ scale đơn thuần"
      - "Dùng #0075ff độc quyền cho primary action buttons filled — không bao giờ dùng làm background surface, icon fill, hoặc decorative accent"
      - "Đặt headline letter-spacing ở -0.045em từ 50px trở lên để nén display type thành những khối đậm đặc, tự tin"
      - "Dùng 0px border-radius trên tất cả component — buttons, cards, inputs và images đều có góc sắc để duy trì kỷ luật editorial"
      - "Duy trì ít nhất 50px khoảng trắng dọc giữa các section nội dung chính để typography lớn có không gian thở"
      - "Chỉ dùng letter-spacing +0.08em và +0.09em cho uppercase labels và metadata có tracking, không bao giờ dùng trên body text dạng câu thường"
      - "Để hero band tối (#000000) xuất hiện một lần mỗi trang; tất cả section sau đó nên chuyển về canvas trắng #ffffff"

    don_t:
      - "Không dùng shadow hoặc hiệu ứng elevation — hệ thống cố tình phẳng với hairline borders duy nhất"
      - "Không thêm màu chromatic bổ sung — màu xanh lam/cobalt là accent duy nhất và sức mạnh của nó phụ thuộc vào tính đơn nhất"
      - "Không dùng bold (600+) hoặc semibold weights — toàn bộ giao diện nói ở weight 400 và weights nặng hơn sẽ phá vỡ giọng điệu"
      - "Không áp dụng rounded corners (border-radius) cho bất kỳ element nào — hình học góc vuông là yếu tố chịu lực"
      - "Không thêm gradient, texture hoặc background pattern lên bất kỳ bề mặt nào — mọi bề mặt là một màu phẳng thuần"
      - "Không dùng #ffffff làm background button filled cho hành động — màu filled action duy nhất là #0075ff; mọi thứ khác là ghost hoặc text-link"
      - "Không nén line-height dưới 1.0 ở display sizes — tracking chặt kết hợp với letterforms hình học đã tạo mật độ thị giác"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Hero Canvas | `#000000` | Hero band tối với logo trắng cỡ lớn và display headline |"
    info: "| 2 | Page Canvas | `#ffffff` | Bề mặt sáng mặc định cho tất cả section nội dung bên dưới hero |"
    info: "| 3 | Accent Surface | `#0075ff` | Bề mặt filled dùng có chừng mực cho primary action buttons duy nhất |"

  elevation:

    info: "Hệ thống cố tình tránh tất cả trừ shadow ambient mờ nhất. Một lớp 1px 1px 0px duy nhất màu #eeeeee xuất hiện trên một button state. Các component được xác định bằng hairline 1px borders màu #cccccc hoặc #212529, không phải bằng drop-shadows. Độ phẳng củng cố tính chất editorial, lấy cảm hứng từ in ấn của thiết kế type-first — nó đọc như được dàn trang thay vì được lắp ráp."

  imagery:

    info: "Nhiếp ảnh mang tính môi trường và kiến trúc: mặt tiền gạch, tòa nhà thành phố, biển hiệu Tech Barcelona vật lý gắn trên tường thật. Ảnh có tông màu ấm với ánh sáng ban ngày tự nhiên, không có người trong sinh hoạt, không gradient trừu tượng. Trình bày full-bleed với không border-radius, thường dùng làm divider section giữa các khối text. Hình ảnh phi nhiếp ảnh duy nhất là mark logo pixel-art hình học — một lưới hình vuông trắng tạo thành monogram 'TC' trừu tượng trên hero tối. Mật độ hình ảnh từ thấp đến trung bình: hầu hết section là text-dominant, với ảnh chụp xuất hiện dưới dạng ngắt full-width thay vì minh họa nội tuyến."

  layout:

    info: "Mô hình trang là một chuỗi các dải ngang full-width: hero tối → stats ticker → section nội dung sáng với ảnh full-bleed → footer. Không có container max-width ràng buộc layout — mọi dải trải dài toàn bộ viewport. Hero là bố cục chia đôi với logo cỡ lớn bên trái và display headline lớn bên phải, cả hai đều căn giữa dọc trên canvas đen. Bên dưới hero, nội dung chuyển sang canvas trắng với khoảng trắng dọc rộng rãi (section gaps 50–80px) và ảnh full-bleed đóng vai trò dấu câu thị giác giữa các khối text. Navigation là top bar mảnh (40–48px) không có hành vi sticky. Nhịp điệu tổng thể mang phong cách editorial: type lớn, hình ảnh full-width, hairline dividers và lề trắng rộng tạo nhịp điệu giống tạp chí thay vì UI sản phẩm dày đặc."

  agent_prompt_guide:

    primary_action: "#0075ff (filled action)"
    tạo_primary_action_button: "background #0075ff, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng xử lý filled này cho CTA chính."
  quick_color_reference:
    - "Text (primary): #090707"
    - "Text (body): #212529"
    - "Background (page): #ffffff"
    - "Background (hero): #000000"
    - "Border (hairline): #cccccc"
    - "Accent: #0075ff (primary action)"

  example_component_prompts:
    - "**Dark Hero Band**: Full-viewport-width background #000000. Logo pixel-art cỡ lớn (hình vuông trắng #ffffff) ở 360px, đặt bên trái. Display headline 'Empowering Barcelona's digital ecosystem' ở 80px FavoritPro 400 #ffffff, letter-spacing -3.6px, đặt bên phải logo."

    - "**Primary CTA Button**: Background #0075ff, text #ffffff, 0px border-radius, padding 12px 16px. Label 'Join Us' bằng FavoritPro 400 ở 14px. Đây là element chromatic filled duy nhất."

    - "**Ghost Outline Button**: Background trong suốt, border 1px solid #212529, 0px border-radius, padding 10px 16px. Label 'Discover how we can help you' bằng FavoritPro 400 ở 14px #212529."

    - "**Stats Ticker Bar**: Dải full-width chiều cao 48px, background #000000. Hàng ngang các cặp label-giá trị bằng FavoritPro 400 ở 14px #ffffff với tracking +0.08em, labels uppercase."

    - "**Full-Bleed Photo Section**: 100% viewport width, 0px border-radius, margin dọc 60–80px phía trên và dưới. Không overlay text, không caption — để ảnh đứng một mình như một khoảng dừng thị giác giữa các dải text."

  similar_brands:

    - "**MIT Media Lab** — Cùng cách tiếp cận editorial type-first với headline light-weight cỡ lớn và chrome tối giản"
    - "**IDEO** — Cùng kỷ luật white-canvas với một accent color duy nhất và ảnh full-bleed làm ngắt section"
    - "**Arc'teryx** — Cùng triết lý typography neo-grotesque một weight và xử lý tương phản trắng/đen rõ rệt"
    - "**New York Review of Books** — Cùng nhịp điệu print-editorial: display type light-weight cỡ lớn, khoảng trắng rộng rãi, hairline dividers, nhiếp ảnh làm content divider"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cobalt-action: #0075ff;
          --color-ink-black: #090707;
          --color-graphite: #212529;
          --color-pure-white: #ffffff;
          --color-hairline-gray: #cccccc;
          --color-pure-black: #000000;
          --color-shadow-whisper: #eeeeee;
        
          /* Typography — Font Families */
          --font-favoritpro-light: 'FavoritPro-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: -0.45px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.14px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.22px;
          --text-heading: 50px;
          --leading-heading: 1;
          --tracking-heading: -2.25px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-23: 23px;
          --spacing-25: 25px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-50: 50px;
          --spacing-143: 143px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 50-80px;
          --card-padding: 16px;
          --element-gap: 4-10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Shadows */
          --shadow-subtle: rgb(238, 238, 238) 1px 1px 0px 0px;
        
          /* Surfaces */
          --surface-hero-canvas: #000000;
          --surface-page-canvas: #ffffff;
          --surface-accent-surface: #0075ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cobalt-action: #0075ff;
          --color-ink-black: #090707;
          --color-graphite: #212529;
          --color-pure-white: #ffffff;
          --color-hairline-gray: #cccccc;
          --color-pure-black: #000000;
          --color-shadow-whisper: #eeeeee;
        
          /* Typography */
          --font-favoritpro-light: 'FavoritPro-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: -0.45px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.14px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.22px;
          --text-heading: 50px;
          --leading-heading: 1;
          --tracking-heading: -2.25px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-23: 23px;
          --spacing-25: 25px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-50: 50px;
          --spacing-143: 143px;
        
          /* Shadows */
          --shadow-subtle: rgb(238, 238, 238) 1px 1px 0px 0px;
        }