2_ag___style_reference:
  info: "> Hiệu thuốc lâm sàng dưới ánh sáng teal — một thương hiệu wellness có tính đo lường, kê đơn, xử lý ảnh sản phẩm như một tiêu bản mẫu."

  theme: "light"

  info: "2.AG mang phong cách hiệu thuốc lâm sàng kết hợp với thương hiệu khoa học hiện đại: nền gần trắng, bề mặt cấu trúc teal đậm, và một điểm nhấn mint tươi sáng kích hoạt các CTA và dữ liệu nổi bật. Inter Tight được thắt chặt để tạo giọng điệu dược phẩm — tracking hơi âm ở các kích thước display, tracking rộng rãi trên small caps cho danh sách thành phần và badge. Các component thiên về bo tròn lớn dạng pill (30–50px) cho button và bo góc mềm 12–20px trên card, báo hiệu một thương hiệu chính xác về liều lượng nhưng ấm áp trên cơ thể. Các section teal đậm (header Rapid Relief Cream, stat block) neo trang web vào thẩm quyền lâm sàng, trong khi dấu câu xanh lá tươi sáng tạo điểm nhấn năng lượng, gần giống như kệ thuốc. Layout chia đôi, thoáng rộng, tập trung vào sản phẩm: hero ghép một nửa editorial tối với một nửa sản phẩm sáng, các section xen kẽ trắng và teal, reviews/stats tạo thành lưới card dày đặc nhưng thoáng khí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|-------|"
    info: "| Deep Teal | `#244d54` | `--color-deep-teal` | Màu cấu trúc chính — nền hero tối, bề mặt stat block, icon strokes, navigation wordmark, viền secondary button. Một teal gần xám đọc như mực hơn là đại dương, giúp định vị thương hiệu mà không trở nên lâm sàng-lạnh lẽo |"
    info: "| Mint Pulse | `#2ecea0` | `--color-mint-pulse` | Màu hành động chính — nền CTA dạng filled, badge fills, active dots, announcement bar, review star highlights. Xanh lá tươi sáng pha cyan, khiến mọi phần tử tương tác trông như được bật lên và mang tính sinh học |"
    info: "| Soft Teal | `#6dddbd` | `--color-soft-teal` | Teal text accent cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp lên màu CTA chính |"
    info: "| Carbon | `#000000` | `--color-carbon` | Body text, hairline borders, icon strokes, input borders. Màu trung tính cấu trúc chiếm ưu thế — hầu hết viền trên site là đen tuyền, tạo khung hình editorial sắc nét cho UI |"
    info: "| Ink | `#151515` | `--color-ink` | Heading text chính và secondary borders. Mềm hơn đen tuyền cho headline lớn khi Carbon đọc quá nặng |"
    info: "| Graphite | `#4d4d4d` | `--color-graphite` | Subhead text, button text trên nền sáng, muted labels |"
    info: "| Slate | `#858585` | `--color-slate` | Body text muted, helper copy, disabled labels, secondary icon strokes. Màu trung tính chủ lực cho bất cứ thứ gì cần lùi lại |"
    info: "| Fog | `#999999` | `--color-fog` | Input borders, placeholder color, low-priority surface accents |"
    info: "| Mist | `#e5e7eb` | `--color-mist` | Card và section dividers, viền nhẹ trên nền trắng, separator giữa các review card |"
    info: "| Bone | `#f0f1f2` | `--color-bone` | Bề mặt card và list sáng nhất — cao hơn trắng tuyền một bước để tạo elevation nhẹ trên page canvas |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, button text, input fills. Bề mặt sáng chiếm ưu thế |"

  tokens___typography:

    inter_tight___kiểu_chữ_thương_hiệu_chính_cho_heading__body__button__badge_và_ui__phiên_bản_tighter_tùy_chỉnh_thắt_chặt_nhịp_điệu_headline_và_mang_lại_cho_small_caps_cảm_giác_dược_phẩm__nhãn_kê_đơn_____font_inter_tight:
      - "**Thay thế:** Inter (variable), Manrope"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 10px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 30px, 36px, 45px, 62px"
      - "**Line height:** 1.00–1.86 (tight 1.0 cho caps, 1.21–1.25 cho display, 1.5 cho body, 1.86 cho metadata lỏng lẻo)"
      - "**Letter spacing:** -0.042em ở kích thước display, 0.005em mặc định, 0.02–0.03em trên body, 0.09–0.10em trên small uppercase labels"
      - "**OpenType features:** `\"kern\"`"
      - "**Vai trò:** Kiểu chữ thương hiệu chính cho heading, body, button, badge và UI. Phiên bản tighter tùy chỉnh thắt chặt nhịp điệu headline và mang lại cho small caps cảm giác dược phẩm, nhãn kê đơn."

    inter___kiểu_chữ_phụ_dùng_cho_stat_block_numerals_và_một_vài_kích_thước_display_sản_phẩm_lớn__inter_xử_lý_các_stat_gradient_rất_lớn_với_chữ_số_sạch__gradient_fill_gọn_gàng_____font_inter:
      - "**Thay thế:** Inter Tight, system-ui"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 16px, 18px, 28px, 48px"
      - "**Line height:** 1.10, 1.20"
      - "**Letter spacing:** -0.042em"
      - "**Vai trò:** Kiểu chữ phụ dùng cho stat block numerals và một vài kích thước display sản phẩm lớn. Inter xử lý các stat gradient rất lớn với chữ số sạch, gradient-fill gọn gàng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.86 | 1px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.08px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | 0.4px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.3 | 0.6px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.25 | 0.72px | `--text-heading` |"
      info: "| heading-lg | 45px | 1.21 | 0.9px | `--text-heading-lg` |"
      info: "| stat-numeral | 48px | 1.1 | -2px | `--text-stat-numeral` |"
      info: "| display | 62px | 1 | 1.24px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 12-20px |"
      info: "| badges | 50px (pill) |"
      info: "| inputs | 5px |"
      info: "| buttons | 30-50px (pill) |"
      info: "| hero-cta | 250px |"

    layout:

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

  components:

    announcement_bar:
      vai_trò: "Dải quảng cáo đầu trang"

      info: "Dải full-width màu mint #2ecea0 với text Inter Tight trắng 12–14px, thường có icon xe tải + cam kết giao hàng. Chiều cao ~40px, một dòng, không viền, nằm sát phía trên nav."

    top_navigation:
      vai_trò: "Header chính của site"

      info: "Thanh trắng, cao ~64px, với wordmark 2.AG màu đen bên trái, 3–5 text link (Shop, Science, Contact) ở 16px Inter Tight 500 với padding ngang 15–30px, icon search và icon bag (có chấm đen 8px hiển thị số lượng) căn phải. Không đổ bóng, viền dưới hairline #e5e7eb."

    hero_panel___dark_half:
      vai_trò: "Hero editorial bên trái"

      info: "Nền full-height #244d54 với hình người wireframe 3D hiển thị các khớp phát sáng. Headline ở Inter Tight 62px / 500, trắng, letter-spacing ~1.2px, căn trái ở độ rộng 50–60%. Pill CTA bên dưới với nền trong suốt, viền 1px mint #2ecea0, text trắng, radius 50px, padding 14px 48px."

    hero_panel___product_half:
      vai_trò: "Hero sản phẩm bên phải"

      info: "Nền xám nhạt/trắng với ảnh chụp bokeh hình tròn/bong bóng phía sau ống sản phẩm. Ảnh sản phẩm ~60% chiều rộng panel, căn giữa. Không có text chồng lên."

    pill_cta___outlined_mint:
      vai_trò: "Nút hành động chính trên nền tối"

      info: "Nền trong suốt, viền 1px #2ecea0, text trắng 16px Inter Tight 500, border-radius 50px, padding 14px 48px. Dùng cho lời kêu gọi 'Get Relief' trong hero. Tracking chặt — gần như không có letter-spacing."

    pill_cta___filled_mint:
      vai_trò: "Hành động chính trên nền sáng"

      info: "Nền solid #2ecea0, text trắng, radius 30–50px, padding dọc 12–16px và ngang 24–48px. Dùng cho 'Add to bag' và CTA nhắc nhở review."

    pill_badge___mint:
      vai_trò: "Thẻ liều lượng và tính năng"

      info: "Radius 30–50px, padding 8px 16px, nền #2ecea0, text trắng 12–14px Inter Tight 600. Dùng cho '10,000 MG', '1000 MG' và active filter chips."

    product_card:
      vai_trò: "Trình bày ảnh sản phẩm và hộp trên PDP"

      info: "Panel nền trắng #f0f1f2, border-radius 20px, padding trong 20–24px, viền hairline 1px #e5e7eb. Chứa ống kem + hộp bên ngoài trên nền sáng. Không đổ bóng — dựa vào viền để tạo cạnh."

    ingredient_feature_row:
      vai_trò: "Danh sách thuộc tính được làm nổi bật bên trong PDP"

      info: "Các hàng xếp chồng, mỗi hàng cao ~56px, cách nhau bằng viền hairline 1px #e5e7eb. Giá trị lớn 18–20px Inter Tight 500 màu Deep Teal #244d54 ('2 cannabinoids', '5 key ingredients'), text muted 12–13px màu #858585 cho mô tả bên dưới."

    review_card:
      vai_trò: "Ô testimonial của khách hàng"

      info: "Card trắng trên nền #f0f1f2, radius 12–20px, viền 1px #e5e7eb, padding 20–24px. 5 ngôi sao mint ở trên, quote 18–20px Inter Tight 500 màu Ink #151515, tên người đánh giá 12–13px Slate #858585 kèm icon checkmark mint nhỏ cho người mua đã xác minh."

    video_review_card:
      vai_trò: "Testimonial khách hàng có thể phát"

      info: "Cùng kích thước và kiểu dáng với Review Card nhưng chứa poster video dọc 9:16 với nút play hình tròn trắng căn giữa, viền 1px mint. Thay thế quote text bằng thumbnail."

    stat_block:
      vai_trò: "Điểm chứng minh số lớn"

      info: "Nền Deep Teal #244d54, radius 20px, padding 40–60px. Chữ số headline 48–62px trong gradient dọc từ Soft Teal #6dddbd đến Mint #2ecea0, áp dụng dưới dạng CSS background-clip text fill. Dấu phần trăm 24–30px màu trắng, nằm ở góc trên bên phải của chữ số."

    input_field:
      vai_trò: "Input form"

      info: "Nền trắng, viền 1px #999999, radius 5px, padding 12–16px, text 14–16px Inter Tight 400 màu Carbon #000000. Placeholder màu #999999. Không có visible focus ring trong dữ liệu trích xuất — dựa vào viền dày lên hoặc thay đổi trạng thái."

    review_marquee_row:
      vai_trò: "Dải đánh giá đã xác minh tự động cuộn"

      info: "Một hàng ngang duy nhất ở đầu section reviews, header 5 sao căn trái, sau đó là các quote người đánh giá nội tuyến ở Inter Tight 14–15px, 500, Carbon — cách nhau bằng dấu chấm tròn, tất cả caps, tracking ~0.05em."

    nav_text_link:
      vai_trò: "Mục navigation cấp cao nhất"

      info: "16px Inter Tight 500 Carbon #000000, không gạch chân, padding ngang 15–30px, padding dọc 7px. Trạng thái active sẽ chuyển sang Deep Teal #244d54."

  do_s_and_don_ts:

    nên:
      - "Sử dụng Inter Tight weight 500 cho tất cả headline và CTA; dành weight 600 cho badge và active filter chips"
      - "Chỉ áp dụng Mint #2ecea0 cho filled actions, active dots và dosage badges — không bao giờ dùng làm body text trên nền trắng"
      - "Sử dụng Deep Teal #244d54 làm nền cho bất kỳ section nào giới thiệu proof point, statistic hoặc tuyên bố khoa học"
      - "Đặt tất cả primary action buttons ở pill radii từ 30px đến 50px — độ tròn báo hiệu danh mục chăm sóc cơ thể"
      - "Áp dụng letter-spacing 0.09–0.10em trên tất cả uppercase labels và ingredient callouts ở 10–12px để có nhịp điệu nhãn kê đơn"
      - "Chỉ sử dụng gradient dọc #6dddbd-to-#2ecea0 qua background-clip text trên stat numerals lớn (48px+); không bao giờ dùng trên body copy"
      - "Giữ section backgrounds xen kẽ giữa Paper #ffffff và Deep Teal #244d54 để duy trì nhịp quét trang lâm sàng, có nhịp điệu"

    không_nên:
      - "Không thêm màu sắc mới — hệ thống cố tình chỉ có hai tông (Deep Teal + Mint) trên thang trung tính"
      - "Không sử dụng radius sắc 0–4px trên button hoặc badge; sự mềm mại của thương hiệu được thể hiện qua hình dạng pill"
      - "Không đặt text Mint trên nền trắng ở kích thước body dưới 16px — độ tương phản giảm xuống dưới ngưỡng accessibility"
      - "Không sử dụng box shadow nặng cho elevation; design system dựa vào hairline borders #e5e7eb hoặc #000000 và sự thay đổi màu bề mặt"
      - "Không trộn Inter và Inter Tight trong cùng một dòng text — chọn một kiểu chữ cho mỗi khối nội dung"
      - "Không sử dụng letter-spacing chặt hơn -0.05em ở kích thước dưới 24px — tracking chặt ở kích thước nhỏ sẽ làm glyph va chạm nhau"
      - "Không thêm trang trí ngoài bảng màu hiện tại (không tím, đỏ hoặc trung tính ấm); hệ thống teal lạnh là thương hiệu"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Page Canvas | `#ffffff` | Nền body mặc định và khu vực nội dung chính |"
    info: "| 2 | Soft Card | `#f0f1f2` | Elevation nhẹ cho review list rows và nhóm card phụ |"
    info: "| 3 | Structural Dark | `#244d54` | Panel trái hero, stat blocks, section editorial sâu |"
    info: "| 4 | Highlight Wash | `#2ecea0` | Announcement bar và pill badge fills để nhấn mạnh trạng thái active |"

  elevation:

    info: "Design system cố tình tránh box shadow. Tất cả chiều sâu được truyền đạt qua hairline borders 1px (#e5e7eb trên nền trắng, #000000 trên nền trung tính) và các bước tông bề mặt từ Paper #ffffff đến Bone #f0f1f2 đến Deep Teal #244d54. Đây là một thẩm mỹ phẳng, lâm sàng — sản phẩm làm phần việc nặng nhọc, chrome đứng sang một bên."

  imagery:

    info: "Hình ảnh thưa thớt và do sản phẩm dẫn dắt. Hero kết hợp hình người wireframe 3D với các nút đau phát sáng (sân khấu deep teal, điểm nhấn mint glow) cùng ảnh chụp sản phẩm với bokeh bong bóng/huyết thanh trên nền trắng. PDP sử dụng ảnh chụp sản phẩm sạch trên nền trắng của ống kem và hộp bìa cứng, không có bối cảnh lối sống. Không có ảnh chụp lối sống con người; sơ đồ khoa học và ảnh vật thể là những ngôn ngữ hình ảnh duy nhất. Phong cách icon là đơn sắc nét mảnh 1px stroke, chủ yếu là trắng trên teal hoặc đen trên trắng. Các trường sao trang trí trong stat blocks không mang thêm hình ảnh nào — các chữ số gradient lớn làm công việc thị giác."

  layout:

    info: "Container căn giữa max-width 1280px, với hero split tối/sáng full-bleed là section duy nhất phá vỡ bố cục. Hero là split 50/50: panel editorial teal đậm bên trái, panel sản phẩm sáng bên phải. Các section tiếp theo xen kẽ Paper #ffffff và Deep Teal #244d54 trong các dải ngang. Content blocks sử dụng 2 cột bất đối xứng (ảnh trái, copy phải) cho sản phẩm, và lưới card 4–5 cột cho reviews, với một ô được thay bằng card video dọc. Stats section là lưới 3 cột gồm các chữ số gradient lớn trên nền deep teal. Nhịp dọc rộng rãi — ~64px giữa các section chính, ~24px trong card. Không có sidebar; navigation là một thanh trên cùng duy nhất. Review marquee dưới cùng cuộn ngang phía trên lưới card."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #000000 (body) / #151515 (headings) / #858585 (muted)"
    - "background: #ffffff (canvas) / #f0f1f2 (soft card) / #244d54 (structural dark)"
    - "border: #e5e7eb (hairline trên nền sáng) / #000000 (structural) / #999999 (input)"
    - "accent: #2ecea0 Mint Pulse"
    - "primary action: #2ecea0 (filled action)"
    - "gradient text: linear-gradient #6dddbd → #2ecea0 cho stat numerals"

    ví_dụ_component_prompts:

    - "Xây dựng một hero section. Split 50/50: nửa trái #244d54 với hình người wireframe 3D; headline 'A breakthrough in topical cannabinoids' ở Inter Tight 500, 62px, trắng, letter-spacing 1.2px. Bên dưới là pill CTA với nền trong suốt, viền 1px #2ecea0, text trắng 16px, radius 50px, padding 14px 48px. Nửa phải trắng với bokeh hình tròn và ống sản phẩm căn giữa ở 60% chiều rộng panel."

    - "Xây dựng một stat row. 3 cột stat blocks trên nền #244d54, radius 20px, padding 48px. Mỗi cột hiển thị một chữ số (93%, 99%, 0%) ở 62px Inter weight 500 với gradient dọc #6dddbd→#2ecea0 qua background-clip text, dấu phần trăm 24px trắng ở góc trên bên phải, caption trắng 12px bên dưới ở caps tracking 0.09em."

    - "Xây dựng một review card. Nền trắng #ffffff, radius 12px, viền 1px #e5e7eb, padding 20px. Năm ngôi sao #2ecea0 ở 14px, sau đó quote 18px Inter Tight 500 màu #151515, sau đó tên người đánh giá 12px #858585 kèm icon checkmark mint nhỏ để chỉ đã xác minh."

    - "Xây dựng một dosage badge. Nền #2ecea0, radius 50px, padding 8px 16px, text trắng '10,000 MG' ở 12px Inter Tight 600 với tracking 0.05em."

    - "Xây dựng một product PDP section. Cột trái: panel trắng #f0f1f2, radius 20px, padding 24px, chứa ảnh ống kem căn giữa. Cột phải: tên sản phẩm 36px Inter Tight 500 màu #151515, 5 ngôi sao mint + số lượng review, một dosage badge Mint Pulse, body 16px màu #000000, sau đó danh sách tính năng xếp chồng với divider hàng 1px #e5e7eb và text tính năng 20px Inter Tight 500 màu #244d54."

  similar_brands:

    - "**Athletic Greens / AG1** — Cùng ngôn ngữ wellness lâm sàng: nền trắng, bề mặt cấu trúc teal-xanh đậm, CTA xanh lá tươi sáng, button hình pill và hệ thống phân cấp ingredient-badge"
    - "**Hilma** — Thương hiệu gần với dược phẩm với uppercase tracked labels, điểm nhấn teal đậm và hero editorial split"
    - "**Care/of** — Wellness DTC với sans-serif sạch sẽ, bề mặt card mềm mại và một điểm nhấn sáng duy nhất cho dosage và CTA"
    - "**Cuup** — Hero tối giản do sản phẩm dẫn dắt với pill CTA cỡ lớn, split panel editorial và editorial uppercase tracked labels"
    - "**Recess** — Cảm giác hiệu thuốc hiện đại với màu thương hiệu lạnh đậm, khoảng trắng rộng rãi và metadata tracked uppercase nhỏ"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-teal: #244d54;
          --color-mint-pulse: #2ecea0;
          --color-soft-teal: #6dddbd;
          --color-carbon: #000000;
          --color-ink: #151515;
          --color-graphite: #4d4d4d;
          --color-slate: #858585;
          --color-fog: #999999;
          --color-mist: #e5e7eb;
          --color-bone: #f0f1f2;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.86;
          --tracking-caption: 1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.08px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.4px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.6px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: 0.72px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.21;
          --tracking-heading-lg: 0.9px;
          --text-stat-numeral: 48px;
          --leading-stat-numeral: 1.1;
          --tracking-stat-numeral: -2px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: 1.24px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 50px;
          --radius-full-2: 250px;
        
          /* Named Radii */
          --radius-cards: 12-20px;
          --radius-badges: 50px (pill);
          --radius-inputs: 5px;
          --radius-buttons: 30-50px (pill);
          --radius-hero-cta: 250px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-soft-card: #f0f1f2;
          --surface-structural-dark: #244d54;
          --surface-highlight-wash: #2ecea0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-teal: #244d54;
          --color-mint-pulse: #2ecea0;
          --color-soft-teal: #6dddbd;
          --color-carbon: #000000;
          --color-ink: #151515;
          --color-graphite: #4d4d4d;
          --color-slate: #858585;
          --color-fog: #999999;
          --color-mist: #e5e7eb;
          --color-bone: #f0f1f2;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.86;
          --tracking-caption: 1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.08px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.4px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.6px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: 0.72px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.21;
          --tracking-heading-lg: 0.9px;
          --text-stat-numeral: 48px;
          --leading-stat-numeral: 1.1;
          --tracking-stat-numeral: -2px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: 1.24px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-full: 50px;
          --radius-full-2: 250px;
        }