toggl_track___style_reference:
  info: "> Plum theater marquee — một sân khấu màu aubergine đậm, nơi một từ duy nhất trong spotlight màu magenta thắp sáng mỗi headline."

  theme: "mixed"

  info: "Toggl Track vận hành trên duotone plum-và-kem: một sân khấu aubergine đậm cho hero và footer bands, màu trắng kem ấm cho nội dung sản phẩm, và một màu magenta-pink rực rỡ duy nhất chiếm lấy các từ đơn lẻ bên trong headline — được đặt trong kiểu chữ nghiêng rotalic — khiến cho copy mang cảm giác sân khấu kịch. Màu pink được dùng có chừng mực; nó xuất hiện dưới dạng các từ nhấn mạnh, pill CTA đã được tô màu, và các chấm icon nhỏ, không bao giờ tràn lan. Các bề mặt vẫn phẳng; chiều sâu đến từ sự tương phản giữa các dải tối và sáng, không phải từ bóng đổ hay gradient. Các component có kích thước lớn và bo tròn rộng rãi: 26px cho primary buttons, 200px cho pill tags và nav chips, 10px cho content cards. Typography kết hợp sự mềm mại hình học của GT Haptik (display) với tính trung lập của Inter (body), cả hai đều được đặt dày ở line-height 1.1–1.25 trên các kích thước lớn nhất để headline có cảm giác đậm đặc và tự tin thay vì thoáng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Plum | `#2c1338` | `--color-plum` | Hero, header, và footer canvases; nền brand mark. Màu aubergine gần như đen, được xem là màu tối đặc trưng của thương hiệu |"
    info: "| Heather | `#412a4c` | `--color-heather` | Primary headings và UI text trên nền sáng; secondary dark surface khi Plum quá nặng. Màu tím làm việc chính |"
    info: "| Magenta | `#e57cd8` | `--color-magenta` | Filled CTA buttons, emphasis words bên trong headline, selected nav state, star ratings, và decorative dots. Màu sắc rực rỡ duy nhất — được dùng có chừng mực, một từ hoặc một control trên mỗi màn hình |"
    info: "| Lavender Smoke | `#564260` | `--color-lavender-smoke` | Body copy và link text trên nền trắng kem nơi Heather có vẻ quá nặng. Mang sắc thái thương hiệu vào văn bản chạy |"
    info: "| Dusty Mauve | `#6b5a74` | `--color-dusty-mauve` | Secondary body text, mô tả, helper text, và muted icon strokes trên nền sáng. Đủ độ bão hòa thấp để lùi về phía sau các heading |"
    info: "| Stone Violet | `#817187` | `--color-stone-violet` | Borders và dividers trên nền sáng; button borders cho outlined variants; disabled hoặc placeholder text |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text và high-contrast borders trên nền sáng; footer text trên nền Plum tối |"
    info: "| Bone | `#fefbfa` | `--color-bone` | Nền trang cho tất cả content sections, card surfaces, và text color trên Plum header tối |"
    info: "| Silver | `#d5d0d7` | `--color-silver` | Hairline borders, list separators, và input outlines trên các card và bảng. Lưới trung tính cấu trúc |"
    info: "| Fog | `#c0b8c3` | `--color-fog` | Subtle borders và dividers nơi Silver đọc quá tối; secondary placeholder text trên inputs |"
    info: "| Blush | `#fdeae2` | `--color-blush` | Lớp phủ ấm nhẹ cho icon fills, decorative card backgrounds, và nav hover states. Màu nền ấm nhất |"
    info: "| Petal | `#fcf1f8` | `--color-petal` | Elevated card và modal surfaces phía trên Bone. Mang một chút hồng mà không cạnh tranh với Magenta |"
    info: "| Orchid Mist | `#fae5f7` | `--color-orchid-mist` | Highlighted card background cho featured hoặc selected content blocks |"
    info: "| Bubblegum Wash | `#f7d8f3` | `--color-bubblegum-wash` | Nền hồng nhạt cho secondary buttons, tag backgrounds, và lớp nền pha màu thương hiệu nhẹ nhàng nhất |"
    info: "| Amber | `#ffde91` | `--color-amber` | Màu hành động vàng cho filled buttons, selected navigation states, và các khoảnh khắc chuyển đổi tập trung. |"

  tokens___typography:

    inter___tất_cả_body_copy__navigation_links__ui_labels__table_data__và_secondary_headings__tính_trung_lập_của_inter_giữ_cho_nội_dung_bình_tĩnh_trong_khi_gt_haptik_thể_hiện_trên_các_headline__weight_500_cho_nav_và_buttons__700_cho_subheadings__800_cho_compact_stat_callouts_____font_inter:
      - "**Thay thế:** system-ui"
      - "**Weights:** 400, 500, 700, 800"
      - "**Kích thước:** 12, 13, 14, 15, 16, 18, 22, 24, 32px"
      - "**Line height:** 1.25–1.70"
      - "**Vai trò:** Tất cả body copy, navigation links, UI labels, table data, và secondary headings. Tính trung lập của Inter giữ cho nội dung bình tĩnh trong khi GT Haptik thể hiện trên các headline. Weight 500 cho nav và buttons, 700 cho subheadings, 800 cho compact stat callouts."

    gt_haptik___display_headlines_và_large_section_titles__sự_ấm_áp_hình_học_của_gt_haptik_với_các_đầu_bo_tròn_mang_đến_cho_thương_hiệu_một_giọng_nói_thân_thiện__không_doanh_nghiệp__weight_700_ở_43_69px_với_line_height_1_1_dày_tạo_ra_các_hero_đậm_đặc__tự_tin__thay_thế__inter_tight__manrope__hoặc_outfit_____font_gt_haptik:
      - "**Thay thế:** Inter Tight"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 32, 43, 60, 69px"
      - "**Line height:** 1.10–1.25"
      - "**Vai trò:** Display headlines và large section titles. Sự ấm áp hình học của GT Haptik với các đầu bo tròn mang đến cho thương hiệu một giọng nói thân thiện, không doanh nghiệp; weight 700 ở 43–69px với line-height 1.1 dày tạo ra các hero đậm đặc, tự tin. Thay thế: Inter Tight, Manrope, hoặc Outfit."

    gt_haptik_rotalic___từ_được_tô_sáng_duy_nhất_bên_trong_mỗi_hero_và_section_headline___được_hiển_thị_bằng_magenta_e57cd8_với_độ_nghiêng_italic_về_bên_phải__đây_là_chữ_ký_sân_khấu_của_thương_hiệu__một_từ_trong_mỗi_headline_nhận_được_spotlight__thay_thế__inter_tight_italic_với_skew_thủ_công__hoặc_manrope_italic_____font_gt_haptik_rotalic:
      - "**Thay thế:** Inter Tight Italic"
      - "**Weights:** 400"
      - "**Kích thước:** 43, 60, 69px"
      - "**Line height:**"
      - "**Vai trò:** Từ được tô sáng duy nhất bên trong mỗi hero và section headline — được hiển thị bằng Magenta (#e57cd8) với độ nghiêng italic về bên phải. Đây là chữ ký sân khấu của thương hiệu: một từ trong mỗi headline nhận được spotlight. Thay thế: Inter Tight Italic với skew thủ công, hoặc Manrope Italic."

    gt_haptik_medium_rotalic___gt_haptik_medium_rotalic___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_gt_haptik_medium_rotalic:
      - "**Weights:** 400"
      - "**Kích thước:** 43px, 60px, 69px"
      - "**Line height:** 1.1, 1.2, 1.25"
      - "**Vai trò:** GT Haptik Medium Rotalic — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.55 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.35 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 43px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 60px | 1.15 | — | `--text-display` |"
      info: "| display-xl | 69px | 1.1 | — | `--text-display-xl` |"

  tokens___spacing___shapes:

    mật_độ: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 75 | 75px | `--spacing-75` |"
      info: "| 90 | 90px | `--spacing-90` |"
      info: "| 113 | 113px | `--spacing-113` |"
      info: "| 170 | 170px | `--spacing-170` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 200px |"
      info: "| cards | 10px |"
      info: "| pills | 200px |"
      info: "| inputs | 10px |"
      info: "| buttons | 26px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 75px"
      - "**Card padding:** 30px"
      - "**Element gap:** 10px"

  components:

    primary_filled_button_magenta:
      vai_trò: "Main call-to-action cho hero và section CTAs"

      info: "Nền Magenta (#e57cd8), chữ Bone (#fefbfa), border-radius 26px, padding 14px 28px, Inter weight 500 ở 15–16px. Không border. Bán kính 26px rộng rãi nhưng không phải pill — nó báo hiệu 'hình tròn thân thiện' trong khi vẫn giữ hình dáng button. Một CTA duy nhất trên mỗi hero zone."

    ghost_button_outlined_on_dark:
      vai_trò: "Secondary action trên Plum hero bands"

      info: "Nền trong suốt, border 1px Bone (#fefbfa), chữ Bone, radius 26px, padding 14px 28px, Inter weight 500. Nằm cạnh Magenta primary trong hero. Biến thể có icon prefix sử dụng một vòng tròn mũi tên phát nhỏ."

    try_for_free_pill_button:
      vai_trò: "Persistent top-right nav CTA"

      info: "Nền Blush (#fdeae2), chữ Plum (#2c1338), border-radius 200px (full pill), padding 8px 18px, Inter weight 500 ở 14px. Hình dạng pill phân biệt điểm truy cập dùng thử luôn sẵn sàng với các CTA theo ngữ cảnh."

    nav_link_header:
      vai_trò: "Primary navigation items"

      info: "Chữ Bone (#fefbfa) trên Plum header, Inter weight 500 ở 15px, không gạch chân. Dropdown caret qua icon chevron nhỏ màu Dusty Mauve. Active/hover state nâng opacity lên 100% với underline Magenta 2px."

    feature_card_bone:
      vai_trò: "Content cards trong feature grids và product showcases"

      info: "Nền Bone (#fefbfa), border 1px Silver (#d5d0d7), border-radius 10px, padding 30px, không shadow. Chứa một icon nhỏ trong vòng tròn Blush, Inter heading-sm cho tiêu đề, body text Dusty Mauve. Phẳng và ưu tiên nội dung."

    highlighted_feature_card_petal:
      vai_trò: "Elevated hoặc selected feature card"

      info: "Nền Petal (#fcf1f8), border 1px Fog (#c0b8c3), radius 10px, padding 30px. Được sử dụng cho các card cần nổi bật trên lưới các card Bone mà không cần dùng shadow."

    pill_tag___tab:
      vai_trò: "Filter pills, tab selectors, category tags"

      info: "Nền Bubblegum Wash (#f7d8f3) hoặc Blush (#fdeae2), chữ Plum hoặc Heather, border-radius 200px, padding 6px 14px, Inter weight 500 ở 13px. Active state chuyển sang nền Magenta với chữ Bone."

    star_rating_badge:
      vai_trò: "Social proof và review aggregates"

      info: "Hàng năm sao Amber (#ffde91), Inter weight 700 ở 16px cho điểm số, Dusty Mauve ở 13px cho số lượng đánh giá. Sao phẳng, đã tô màu, với khoảng cách 2px giữa các sao. Nằm trên nền Bone không có border container."

    mega_menu_panel:
      vai_trò: "Product và Solutions dropdown navigation"

      info: "Nền Bone, radius 10px, padding 30px, shadow khuếch tán mềm ở 0 8px 24px rgba(44,19,56,0.12). Bố cục bốn cột: Product, Use Cases, Features, Help. Tiêu đề cột ở Inter weight 700 ở 14px Heather; links ở Inter weight 400 ở 14px Dusty Mauve với row gap 10px."

    data_table_card:
      vai_trò: "Product UI preview — time entries, reports"

      info: "Nền Bone, radius 10px, border 1px Silver trên row separators, row padding 16px. Tiêu đề cột ở Inter weight 700 ở 12px uppercase Dusty Mauve. Active/selected rows nhận nền Petal. Cột Duration căn phải ở Inter weight 500."

    calendar_week_card:
      vai_trò: "Calendar view product UI preview"

      info: "Nền Bone, radius 10px, border 1px Silver, thanh tiêu đề với ba chấm traffic-light kiểu macOS màu Magenta/Heather/Fog. Week navigation pill với nền Blush. Day cells có internal padding 8px."

    integration_icon_cluster:
      vai_trò: "Social proof cho 100+ integrations"

      info: "Cụm logo thương hiệu grayscale trong các vòng tròn 40px, được sắp xếp trong một lưới lỏng lẻo. Mỗi icon trên nền Bone không có border. Kèm theo nhãn '100+ INTEGRATIONS' ở Inter weight 800 ở 14px, letter-spacing 0.5px, uppercase Heather."

    brand_wordmark:
      vai_trò: "Logo lockup trong header và footer"

      info: "'toggl' trong custom lowercase geometric mark, theo sau là 'track' ở Inter weight 400 nhẹ hơn với x-height phù hợp. Mark 'toggle' là một ligature tùy chỉnh nơi hai chữ o kết nối với nhau. Màu sắc thích ứng: Blush + Bone trên Plum, Plum + Heather trên Bone."

    hero_headline_display:
      vai_trò: "Above-the-fold hero copy trên Plum"

      info: "GT Haptik weight 700 ở 60–69px, chữ Bone, line-height 1.1–1.15, căn giữa. Chứa một hoặc hai từ được hiển thị bằng GT Haptik Rotalic weight 400 ở kích thước tương ứng màu Magenta (#e57cd8) — chữ ký sân khấu. Subhead ở Inter weight 400 ở 18px Dusty Mauve, max-width 640px."

  do_s_and_don_ts:

    nên_làm:
      - "Hiển thị mỗi hero hoặc section headline với chính xác một từ nhấn mạnh Magenta được đặt trong GT Haptik Rotalic — đây là động tác đặc trưng của thương hiệu."
      - "Sử dụng border-radius 26px cho tất cả primary action buttons và nav controls; chỉ dành 200px cho pills, tags, và trial CTAs."
      - "Đặt kích thước display (43px+) với line-height ở hoặc dưới 1.2 — leading dày làm cho GT Haptik có cảm giác đậm đặc và tự tin."
      - "Xây dựng chiều sâu thông qua sự tương phản dải Plum-to-Bone, không phải bóng đổ. Cards nhận border 1px Silver trên bề mặt Bone."
      - "Sử dụng Inter cho mọi thứ bên dưới fold: body, labels, table cells, nav. Dành GT Haptik cho display và section headlines."
      - "Giữ trang trên Bone (#fefbfa) cho content sections và Plum (#2c1338) cho hero/header/footer — đây là hai màu canvas duy nhất."
      - "Hạn chế Magenta ở một element trên mỗi màn hình: một CTA, một từ nhấn mạnh, một selected state, hoặc một decorative dot. Không bao giờ hai."

    không_nên_làm:
      - "Không sử dụng drop shadows trên cards, buttons, hoặc modals — ngôn ngữ thiết kế là phẳng với sự tương phản màu nền thay vào đó."
      - "Không đặt từ nhấn mạnh màu hồng ở GT Haptik thẳng đứng — nó phải ở biến thể Rotalic để mang ý nghĩa sân khấu."
      - "Không sử dụng Magenta như một background wash, gradient, hoặc large surface fill. Nó chỉ xuất hiện trên filled buttons, emphasis words, và small dots."
      - "Không giới thiệu một màu nhấn thứ hai. Hệ thống là đơn sắc tím với một spotlight pink — thêm teal, green, hoặc orange sẽ phá vỡ duotone."
      - "Không sử dụng màu trắng tinh khiết (#ffffff) cho nền — Bone (#fefbfa) là canvas. Màu trắng tinh khiết đọc là lạnh và không có thương hiệu so với các tông màu ấm."
      - "Không áp dụng corner radii nhỏ hơn 10px hoặc lớn hơn 200px. Hệ thống có ba: 10px (cards/inputs), 26px (buttons), 200px (pills)."
      - "Không đặt display headlines trên line-height 1.25 — leading lỏng lẻo làm cho GT Haptik có cảm giác thoáng và làm suy yếu giọng nói đậm đặc, tự tin."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Bone | `#fefbfa` | Base page canvas cho tất cả content sections |"
    info: "| 1 | Petal | `#fcf1f8` | Elevated card và modal surfaces |"
    info: "| 2 | Blush | `#fdeae2` | Warm decorative card backgrounds và icon fills |"
    info: "| 3 | Orchid Mist | `#fae5f7` | Featured/selected content highlights |"
    info: "| 4 | Heather | `#412a4c` | Dark surface phía trên light content |"
    info: "| 5 | Plum | `#2c1338` | Hero, header, và footer dark stage |"

  elevation:

    info: "Chiều sâu đến từ sự tương phản màu sắc giữa các dải tối Plum và dải sáng Bone, không phải từ drop shadows. Cards, modals, và elevated surfaces dựa vào border 1px Silver tinh tế và các màu nền ấm (Petal, Blush) thay vì các chồng shadow. Hiệu ứng giống shadow duy nhất là trên dropdown menus và mega-nav panels, sử dụng ánh sáng khuếch tán mềm ở rgba(44,19,56,0.12)."

  imagery:

    info: "Product screenshots là hình ảnh chủ đạo: các bản chụp UI thực tế của ứng dụng Toggl Track (calendar views, data tables, team activity feeds) được hiển thị với khung trình duyệt và ba chấm traffic-light kiểu macOS màu Magenta/Heather/Fog. Các ảnh chụp màn hình này nằm trên sân khấu Plum hero dưới dạng các card nổi chồng lên nhau, tạo cảm giác 'sản phẩm đang được trưng bày'. Không có ảnh chụp lối sống, không có hình ảnh stock, không có hình minh họa trừu tượng. Yếu tố minh họa duy nhất là một cụm nhỏ các logo tích hợp grayscale trong lưới vòng tròn 40px như social proof. Iconography phẳng, một trọng lượng, và đơn sắc — mark power-button trong wordmark là glyph tùy chỉnh duy nhất; mọi thứ khác là standard outline UI icons màu Dusty Mauve hoặc Blush."

  layout:

    info: "Full-bleed Plum hero band (headline căn giữa, subtext, hàng CTA hai nút, sau đó các card ảnh chụp sản phẩm chồng lên nhau bên dưới fold) chuyển tiếp vào Bone content section. Content sections theo một nhịp điệu lặp lại: khối headline căn giữa (max-width 720px), sau đó các hàng 2 cột xen kẽ với text-left/visual-right hoặc text-right/visual-left. Feature lists sử dụng lưới card 3 cột. Footer trở lại Plum với bố cục mega-nav 4 cột phía trên brand band 'the toggl company'. Container căn giữa max-width 1200px cho tất cả nội dung. Navigation là một thanh sticky top duy nhất với logo bên trái, primary nav ở giữa, utility links và pill CTA bên phải. Section gaps rộng rãi (75px) để cho phép các chuyển tiếp dải tối-sáng được thở."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text (primary on light): #000000"
    - "text (on dark Plum): #fefbfa"
    - "text (muted/body on light): #6b5a74"
    - "text (headings on light): #412a4c"
    - "background (light canvas): #fefbfa"
    - "background (dark stage): #2c1338"
    - "border (hairline): #d5d0d7"
    - "accent / emphasis: #e57cd8 (Magenta)"
    - "primary action: #e57cd8 (filled action)"

    3_ví_dụ_component_prompts:

    - "Tạo một Primary Action Button: nền #e57cd8, chữ #000000, radius 9999px, padding pill nhỏ gọn. Sử dụng filled treatment này cho CTA chính."

    - "*Feature card grid:* Ba card trên nền #fefbfa, padding 30px, border-radius 10px, border 1px #d5d0d7. Mỗi card có một vòng tròn icon 40px Blush (#fdeae2) với một monochrome outline icon, sau đó heading Inter weight 700 ở 22px #412a4c, sau đó body text Inter weight 400 ở 16px #6b5a74, với vertical gap 15px giữa các element."

  similar_brands:

    - "**Notion** — Cùng hệ thống card phẳng, dựa trên border không có shadow; corner radii rộng rãi trên buttons và inputs; canvas trắng kem ấm thay vì trắng tinh khiết."
    - "**Linear** — Cùng cách tiếp cận single-accent hạn chế — một màu sắc rực rỡ xuất hiện trên emphasis words và primary CTAs trên nền tối; leading chặt chẽ trên kích thước display."
    - "**Figma** — Cùng duotone brand stage (hero tối, nội dung sáng) với product UI screenshots làm hero visuals; button radii bo tròn nhưng không phải pill; canvas trung tính ấm."
    - "**Calendly** — Cùng cách sử dụng một từ tô sáng duy nhất bên trong headline bằng màu nhấn rực rỡ; cards phẳng với hairline borders; các feature section 2 cột xen kẽ."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-plum: #2c1338;
          --color-heather: #412a4c;
          --color-magenta: #e57cd8;
          --color-lavender-smoke: #564260;
          --color-dusty-mauve: #6b5a74;
          --color-stone-violet: #817187;
          --color-ink: #000000;
          --color-bone: #fefbfa;
          --color-silver: #d5d0d7;
          --color-fog: #c0b8c3;
          --color-blush: #fdeae2;
          --color-petal: #fcf1f8;
          --color-orchid-mist: #fae5f7;
          --color-bubblegum-wash: #f7d8f3;
          --color-amber: #ffde91;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik: 'GT Haptik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik-rotalic: 'GT Haptik Rotalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik-medium-rotalic: 'GT Haptik Medium Rotalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.55;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.35;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.2;
          --text-display: 60px;
          --leading-display: 1.15;
          --text-display-xl: 69px;
          --leading-display-xl: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-75: 75px;
          --spacing-90: 90px;
          --spacing-113: 113px;
          --spacing-170: 170px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 75px;
          --card-padding: 30px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 26px;
          --radius-full: 200px;
        
          /* Named Radii */
          --radius-tags: 200px;
          --radius-cards: 10px;
          --radius-pills: 200px;
          --radius-inputs: 10px;
          --radius-buttons: 26px;
        
          /* Surfaces */
          --surface-bone: #fefbfa;
          --surface-petal: #fcf1f8;
          --surface-blush: #fdeae2;
          --surface-orchid-mist: #fae5f7;
          --surface-heather: #412a4c;
          --surface-plum: #2c1338;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-plum: #2c1338;
          --color-heather: #412a4c;
          --color-magenta: #e57cd8;
          --color-lavender-smoke: #564260;
          --color-dusty-mauve: #6b5a74;
          --color-stone-violet: #817187;
          --color-ink: #000000;
          --color-bone: #fefbfa;
          --color-silver: #d5d0d7;
          --color-fog: #c0b8c3;
          --color-blush: #fdeae2;
          --color-petal: #fcf1f8;
          --color-orchid-mist: #fae5f7;
          --color-bubblegum-wash: #f7d8f3;
          --color-amber: #ffde91;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik: 'GT Haptik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik-rotalic: 'GT Haptik Rotalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-haptik-medium-rotalic: 'GT Haptik Medium Rotalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.55;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.35;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.2;
          --text-display: 60px;
          --leading-display: 1.15;
          --text-display-xl: 69px;
          --leading-display-xl: 1.1;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-75: 75px;
          --spacing-90: 90px;
          --spacing-113: 113px;
          --spacing-170: 170px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 26px;
          --radius-full: 200px;
        }