san_rita___style_reference:
  info: "> field guide vùng núi cao trên giấy sage"

  theme: "mixed"

  info: "San Rita mang phong cách một cuốn nhật ký thực địa cho thương hiệu giày outdoor: ảnh phong cảnh rộng lớn, một điểm nhấn mint nhạt duy nhất nổi bật như bút highlight trên giấy topo, và một display face condensed tùy chỉnh biến các section opener thành những tuyên bố chắn ngang khung cảnh. Nhịp điệu thị giác xen kẽ giữa ảnh full-bleed sáng và các dải tối gần như đen (#161b13) nơi những bức ảnh kiểu Polaroid nghiêng rải rác khắp canvas như một cuốn nhật ký câu cá ruồi. Typography mang tính thực dụng và nhỏ cho mọi thứ ngoại trừ các khoảnh khắc display — mono caps xử lý UI chrome trong khi một dòng display khổng lồ 300px+ mang bản sắc của từng section. Các component vẫn phẳng và không trang trí: button outline mảnh, không đổ bóng, không bo góc để làm mềm các cạnh. Toàn bộ hệ thống giống như bản đồ địa hình kết hợp với tạp chí phiêu lưu — tự tin, chất outdoor, và cố tình thô mộc thay vì SaaS bóng bẩy."

  tokens___màu_sắc:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Highlighter Mint | `#e2ffcc` | `--color-highlighter-mint` | Điểm nhấn thương hiệu chính — display text, nav links, button labels, icon fills. Màu đặc trưng; đọc như bút highlight trên bản đồ topo |"
    info: "| Sage Stone | `#84907f` | `--color-sage-stone` | Điểm nhấn phụ trung tính — nền mờ nhẹ, UI elements nhẹ nhàng khi Highlighter Mint quá chói |"
    info: "| Carbon Ink | `#161b13` | `--color-carbon-ink` | Nền section tối — gần như đen với sắc xanh lá cực nhẹ, neo các dải tối của trang |"
    info: "| Forest Charcoal | `#2d3329` | `--color-forest-charcoal` | Text và border tối vừa trên nền sáng — mềm hơn đen thuần, giữ ấm áp xanh lá nhất quán |"
    info: "| Topo Gray | `#dde2e4` | `--color-topo-gray` | Nền section sáng, bề mặt card, hairlines — canvas nền cho các dải sáng |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Icon strokes, link underlines, điểm nhấn tương phản cao khi cần độ mạnh tối đa |"

  tokens___typography:

    f37stout___display_face_cho_section_openers_và_brand_wordmark__tỷ_lệ_condensed_cực_đoan_với_line_height_0_90_và_một_weight_duy_nhất_400_tạo_ra_headline_chắn_ngang_khung_cảnh__đọc_như_signage_đóng_dấu__không_phải_web_type__ở_366px_nó_lấp_đầy_viewport__ở_40_48px_nó_trở_thành_nhãn_section_chặt_chẽ_____font_f37stout:
      - "**Thay thế:** Bebas Neue, Anton, Oswald"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 40px, 48px, 366px"
      - "**Line height:** 0.90"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Display face cho section openers và brand wordmark. Tỷ lệ condensed cực đoan với line-height 0.90 và một weight duy nhất (400) tạo ra headline chắn ngang khung cảnh, đọc như signage đóng dấu, không phải web type. Ở 366px nó lấp đầy viewport; ở 40–48px nó trở thành nhãn section chặt chẽ."

    mono___tất_cả_ui_chrome__body_copy__nav__captions__buttons__footer_text__tracking__0_01em_và_line_height_1_20_chặt_chẽ_tạo_mật_độ_in_lụa__field_guide__weight_700_được_dùng_tiết_kiệm_để_nhấn_mạnh__weight_400_đảm_nhận_phần_lớn__xử_lý_all_caps_chiếm_ưu_thế___face_này_hoạt_động_như_máy_chữ_____font_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400, 700"
      - "**Cỡ chữ:** 10px, 12px, 16px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.01em"
      - "**Vai trò:** Tất cả UI chrome, body copy, nav, captions, buttons, footer text. Tracking -0.01em và line-height 1.20 chặt chẽ tạo mật độ in lụa, field-guide. Weight 700 được dùng tiết kiệm để nhấn mạnh; weight 400 đảm nhận phần lớn. Xử lý all-caps chiếm ưu thế — face này hoạt động như máy chữ."

    times___serif_accent_cho_inline_links__tạo_độ_tương_phản_báo_chí_biên_tập_với_mono_body__dùng_tiết_kiệm___một_hoặc_hai_link_moment_mỗi_trang_____font_times:
      - "**Thay thế:** Times New Roman, bất kỳ system serif nào"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 16px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Serif accent cho inline links, tạo độ tương phản báo chí/biên tập với mono body. Dùng tiết kiệm — một hoặc hai link moment mỗi trang."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | -0.01px | `--text-caption` |"
      info: "| body | 16px | 1.2 | -0.01px | `--text-body` |"
      info: "| subheading | 40px | 0.9 | — | `--text-subheading` |"
      info: "| heading | 48px | 0.9 | — | `--text-heading` |"
      info: "| display | 366px | 0.9 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 67 | 67px | `--spacing-67` |"
      info: "| 70 | 70px | `--spacing-70` |"
      info: "| 190 | 190px | `--spacing-190` |"

    border_radius:

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

    layout:

      - "**Section gap:** 67px"
      - "**Card padding:** 16px"
      - "**Element gap:** 24px"

  components:

    brand_wordmark:
      vai_trò: "Logo lockup ở góc trên bên trái"

      info: "Custom display face (tương đương F37stout) hiển thị 'San Rita' ở khoảng 40px. Màu là Highlighter Mint (#e2ffcc) trên section tối, Forest Charcoal (#2d3329) trên section sáng. Không icon, không container — chỉ wordmark như một con dấu trực tiếp."

    outlined_nav_button:
      vai_trò: "Primary navigation CTA trong header (ví dụ 'SHOW TRAILS')"

      info: "Border 1px solid màu text hiện tại, fill trong suốt, radius 0px, padding ngang 12–16px, mono caps ở 10–12px. Nằm sát phải trong header. Trên nền tối: border và text màu Highlighter Mint (#e2ffcc). Trên nền sáng: border và text màu Forest Charcoal (#2d3329)."

    display_headline:
      vai_trò: "Text mở section lấp đầy viewport"

      info: "F37stout ở 366px, line-height 0.90, letter-spacing normal, weight 400. Đặt màu Highlighter Mint (#e2ffcc) và chồng lên nền ảnh. Tỷ lệ cực lớn có nghĩa một dòng text chiếm toàn bộ chiều rộng — headline CHÍNH LÀ layout, không bị giới hạn trong nó."

    tilted_photo_card:
      vai_trò: "Cụm ảnh kiểu scrapbook trên section tối"

      info: "Ảnh rộng khoảng 280–360px, đặt ở các góc xoay khác nhau (khoảng -8°, +12°, +4°) để tạo hiệu ứng rải tay, như Polaroid vung vãi. Không border, không shadow, không radius — góc 0px thô. Chồng lấn và che một phần ảnh lân cận. Nằm trên nền Carbon Ink (#161b13)."

    circular_icon_badge:
      vai_trò: "Icon minh họa độc lập ghim vào section"

      info: "Badge tròn nhỏ (đường kính khoảng 40–48px) với stroke outline 1.5px màu Highlighter Mint (#e2ffcc), fill trong suốt. Chứa một line illustration đơn giản (ví dụ mũ, nhà, pin vị trí). Hoạt động như marker trang trí — không phải chrome tương tác."

    footer_caption_block:
      vai_trò: "Text vị trí/credit caps nhỏ ở góc dưới bên phải"

      info: "Mono 10–12px, line-height 1.20, letter-spacing -0.01em, màu Highlighter Mint (#e2ffcc) trên nền tối. All-caps. Hai đến ba dòng ngắn copy về địa lý/dòng dõi thương hiệu. Căn phải, nằm gần cạnh dưới với margin rộng (190px+ từ một cạnh)."

    section_band___dark:
      vai_trò: "Dải nội dung tối full-bleed"

      info: "Nền Carbon Ink (#161b13), kéo dài toàn bộ chiều rộng viewport, không giới hạn max-width. Chứa các tilted photo cards rải rác, icon badges, và text Highlighter Mint. Section padding khoảng 67–70px trên/dưới."

    section_band___light:
      vai_trò: "Dải nội dung sáng full-bleed"

      info: "Nền Topo Gray (#dde2e4) hoặc ảnh. Mono body text màu Forest Charcoal (#2d3329). Section padding 67–70px. Thường là dải trên cùng dưới hero ảnh full-bleed."

    inline_link:
      vai_trò: "Text links trong body copy"

      info: "Serif (Times) ở 16px, có underline, màu Forest Charcoal (#2d3329) trên nền sáng. Khoảnh khắc serif duy nhất trong hệ thống — đọc như editorial anchor text."

    scroll_cue_indicator:
      vai_trò: "Element cố định nhỏ gần cuối viewport"

      info: "Icon tròn hoặc lục giác nhỏ (khoảng 24px) với stroke 1px màu Forest Charcoal (#2d3329) hoặc Highlighter Mint (#e2ffcc). Gợi ý hướng cuộn xuống. Không fill, không chrome hoạt ảnh — một gợi ý hướng đi lặng lẽ."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng F37stout cho các khoảnh khắc display — để headline 366px chiếm viewport, không bao giờ thu nhỏ dưới 40px"
      - "Đặt tất cả display text màu Highlighter Mint (#e2ffcc) và để nó chồng lên nền ảnh"
      - "Giữ line-height ở 0.90 cho tất cả F37stout type — độ chặt cực đoan là đặc trưng"
      - "Dùng mono (system mono substitute) ở 10/12/16px cho tất cả UI, body, và caption text với tracking -0.01em"
      - "Đặt section gaps ở 67–70px và element gaps ở 24px — nhịp điệu đến từ base unit 6px được scale lên"
      - "Rải các tilted photo cards ở góc xoay khác nhau (-12° đến +12°) trên nền Carbon Ink (#161b13)"
      - "Giữ radius ở 0px cho tất cả component — góc sắc là bắt buộc, ngôn ngữ thiết kế là topo-map crisp"

    không_nên_làm:
      - "Đừng thêm border-radius vào buttons, cards, hoặc images — góc sắc là không thể thương lượng"
      - "Đừng dùng điểm nhấn màu thứ hai — Highlighter Mint là khoảnh khắc màu duy nhất mang thương hiệu"
      - "Đừng đặt F37stout ở cỡ trung gian (16–36px) — nó chỉ hoạt động ở display scale hoặc subheading scale (40–48px)"
      - "Đừng dùng Times cho body copy — nó chỉ là link accent, phần còn lại của hệ thống là mono"
      - "Đừng áp shadow hoặc elevation — bề mặt được định nghĩa hoàn toàn bằng màu sắc và lớp ảnh"
      - "Đừng căn giữa body text — mono UI copy nên căn trái hoặc căn phải, không bao giờ căn giữa"
      - "Đừng giới thiệu neutral thứ ba — thang năm tông (#dde2e4 → #84907f → #2d3329 → #161b13 → #000000) là dải tông hoàn chỉnh"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Topo Gray | `#dde2e4` | Canvas trang sáng và card base |"
    info: "| 1 | Highlighter Mint | `#e2ffcc` | Bề mặt điểm nhấn cho text blocks được highlight và nhấn mạnh tông |"
    info: "| 2 | Sage Stone | `#84907f` | Bề mặt trung tông cho các section nhẹ nhàng |"
    info: "| 3 | Forest Charcoal | `#2d3329` | Bề mặt UI sâu trên theme sáng |"
    info: "| 4 | Carbon Ink | `#161b13` | Nền section tối — dải trang thay thế |"

  elevation:

    info: "Không shadow, không drop shadow, không glow effects. Chiều sâu được tạo hoàn toàn thông qua lớp chồng lấn của các yếu tố ảnh trên nền màu đặc, và qua thang bề mặt từ Topo Gray đến Carbon Ink. Sự phẳng là có chủ đích — nó đọc như giấy in, không phải UI kỹ thuật số."

  imagery:

    info: "Nhiếp ảnh là nội dung thị giác chính — ảnh phong cảnh rộng lớn của hẻm núi, núi non, và môi trường câu cá ruồi, được xử lý như hero background full-bleed không qua color grading hay filter. Dải tông từ ấm golden-hour đến mát hoàng hôn. Hình ảnh thứ cấp xuất hiện dưới dạng ảnh chụp kiểu Polaroid rải rác, nghiêng tay (xoay -12° đến +12°) trên section tối, tạo thẩm mỹ scrapbook/zine. Không illustrations, không product renders, không abstract graphics. Hình ảnh phi nhiếp ảnh duy nhất là icon badges line-drawn đơn giản (mũ, nhà, marker vị trí) với stroke 1.5px. Nhiếp ảnh chiếm khoảng 60% tổng diện tích trang — nặng về ảnh, với text đánh dấu hơn là chiếm ưu thế."

  layout:

    info: "Layout full-bleed edge-to-edge không có max-width container — canvas kéo dài đến cạnh viewport trên tất cả section. Hero pattern: ảnh phong cảnh full-viewport với display headline khổng lồ chồng lên phần dưới của ảnh. Nhịp section xen kẽ giữa dải ảnh/sáng và dải tối đặc (#161b13), mỗi dải kéo dài toàn bộ chiều rộng. Section tối có cụm ảnh rải rác, bất đối xứng thay vì grid. Navigation là top bar tối giản — wordmark trái, một outlined button phải — không có sticky behavior rõ ràng. Sắp xếp nội dung cố tình phi grid: ảnh xoay và chồng lấn, text blocks nằm ở margin bất thường (67px, 70px, 190px quan sát được), tạo bố cục journal/zine thay vì SaaS dashboard. Không card grids, không pricing tables, không feature matrices. Khoảng thở rộng giữa các section (67–70px) nhưng spacing nội bộ chặt (12–24px)."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #2d3329 (trên nền sáng) / #e2ffcc (trên nền tối)"
    - "background: #dde2e4 (sáng) / #161b13 (tối)"
    - "border: #2d3329 (trên nền sáng) / #e2ffcc (trên nền tối)"
    - "accent: #e2ffcc (Highlighter Mint)"
    - "primary action: không có màu CTA riêng biệt"

  3_example_component_prompts:

    1__outlined_ghost_nav_button:
      tạo_một_nav_button: "border 1px solid #e2ffcc, fill trong suốt, radius 0px, padding 12px 16px. Text: 'SHOW TRAILS' mono 10px, weight 400, letter-spacing -0.01em, color #e2ffcc, all-caps. Không background fill — border CHÍNH LÀ affordance."

    2__display_headline_over_photography:
      info: "Tạo một section với ảnh phong cảnh full-bleed làm nền. Chồng lên nó một headline: F37stout (dùng Bebas Neue làm substitute) ở 366px, weight 400, line-height 0.90, color #e2ffcc, letter-spacing normal. Text nên lấp đầy chiều rộng viewport trên một dòng, neo ở một phần ba dưới của ảnh."

    3__tilted_photo_cluster_on_dark_band:
      tạo_một_section_tối: "background #161b13, padding 67px trên/dưới. Bên trong, đặt ba card ảnh (rộng 280–360px) ở góc xoay -8°, +12°, và +4°, với chồng lấn nhẹ. Ảnh: outdoor landscape/fly-fishing photography. Không border, không radius, không shadow. Thêm một circular icon badge nhỏ (stroke 1.5px #e2ffcc, đường kính 48px) nổi ở góc phần tư phía trên bên trái."

  photo_composition_rules:

    info: "Cụm ảnh nghiêng tuân theo các quy tắc sau:"
    - "Phạm vi xoay: -12° đến +12°, không bao giờ vượt quá"
    - "Cards chồng lấn khoảng 15–25% chiều rộng của chúng"
    - "Không có hai ảnh liền kề nào cùng góc"
    - "Tất cả ảnh chia sẻ cùng xử lý màu ấm — không có break đen trắng"
    - "Cụm luôn bất đối xứng — không bao giờ là stack cân bằng, căn giữa"
    - "Nền tối (#161b13) hiện rõ trong khoảng trống giữa các ảnh, định nghĩa negative space"

  similar_brands:

    - "**Topo Designs** — Cùng ảnh full-bleed outdoor brand, display type condensed, và chrome tối giản — cả hai xem website như lookbook hơn là cửa hàng"
    - "**Patagonia** — Hero imagery landscape-first với kể chuyện môi trường, nhưng San Rita thiên về zine-scrapbook hơn và ít editorial hơn"
    - "**Rumpl** — Cùng UI type mono thực dụng, section full-bleed ảnh, và ngôn ngữ thị giác topo/field-guide"
    - "**Poler** — Thẩm mỹ photo collage nghiêng tay, section tối-và-ảnh xen kẽ, thái độ outdoor brand casual hơn e-commerce bóng bẩy"
    - "**Snow Peak** — Nav chrome tối giản, ảnh phong cảnh chiếm ưu thế, và typography ưu tiên display moments hơn mật độ body text"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-highlighter-mint: #e2ffcc;
          --color-sage-stone: #84907f;
          --color-carbon-ink: #161b13;
          --color-forest-charcoal: #2d3329;
          --color-topo-gray: #dde2e4;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-f37stout: 'F37stout', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mono: 'mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: -0.01px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: -0.01px;
          --text-subheading: 40px;
          --leading-subheading: 0.9;
          --text-heading: 48px;
          --leading-heading: 0.9;
          --text-display: 366px;
          --leading-display: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-5: 5px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-67: 67px;
          --spacing-70: 70px;
          --spacing-190: 190px;
        
          /* Layout */
          --section-gap: 67px;
          --card-padding: 16px;
          --element-gap: 24px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-topo-gray: #dde2e4;
          --surface-highlighter-mint: #e2ffcc;
          --surface-sage-stone: #84907f;
          --surface-forest-charcoal: #2d3329;
          --surface-carbon-ink: #161b13;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-highlighter-mint: #e2ffcc;
          --color-sage-stone: #84907f;
          --color-carbon-ink: #161b13;
          --color-forest-charcoal: #2d3329;
          --color-topo-gray: #dde2e4;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-f37stout: 'F37stout', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mono: 'mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: -0.01px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: -0.01px;
          --text-subheading: 40px;
          --leading-subheading: 0.9;
          --text-heading: 48px;
          --leading-heading: 0.9;
          --text-display: 366px;
          --leading-display: 0.9;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-67: 67px;
          --spacing-70: 70px;
          --spacing-190: 190px;
        }