7shifts___style_reference:
  info: "> không gian quầy bar ấm áp với điểm nhấn phấn neon — một quầy bar sáng sủa nơi nút indigo, gạch chân vẽ tay màu cam, và vệt highlight xanh chanh nổi bật trên bề mặt trắng tinh và kem ấm, thỉnh thoảng có các dải đen làm cho màu sắc phát sáng."

  theme: "light"

  info: "7shifts là một canvas SaaS nhẹ nhàng, thoáng đãng với một màu indigo mạnh mẽ duy nhất làm call-to-action và một nhóm nhỏ các điểm nhấn ấm áp đảm nhận phần tạo cá tính. Trang web mang phong cách như một quầy bar sạch sẽ: bề mặt trắng, panel phụ kem ấm, các biến thể card pastel mềm mại, và đôi khi là dải đen full-bleed làm mọi thứ xung quanh trở nên sáng hơn. Màu cam là điểm nhấn đặc trưng — nó gạch chân các từ hero bằng nét vẽ tay, tràn ngập nền feature, và đánh dấu nội dung tab — trong khi xanh chanh đóng vai trò highlight text trong các phần tối. Các component rộng rãi và bo tròn (pill buttons, card 20px, hero plates 40px) với nhịp điệu dọc gọn nhẹ. Font script duy nhất, Nanum Pen Script, chỉ xuất hiện như một điểm nhấn cá tính bên dưới hero copy và không bao giờ dùng cho body hay UI controls."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Indigo Bolt | `#4570ff` | `--color-indigo-bolt` | Màu hành động violet cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi quan trọng. |"
    info: "| Ember Orange | `#ff6808` | `--color-ember-orange` | Điểm nhấn cam cho viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ |"
    info: "| Lime Highlighter | `#c6ff94` | `--color-lime-highlighter` | Điểm nhấn text xanh cho links, tags, và các cụm từ ngắn được nhấn mạnh. |"
    info: "| Lavender Mist | `#ebdcff` | `--color-lavender-mist` | Bề mặt card mềm, nền section nhẹ nhàng — biến thể pastel để phá vỡ canvas trắng mà không thêm nhiễu |"
    info: "| Ice Blue | `#d6e0ff` | `--color-ice-blue` | Bề mặt card pastel mát, section wash — kết hợp với indigo để củng cố màu thương hiệu chính ở cường độ thấp |"
    info: "| Lilac Bloom | `#c293f1` | `--color-lilac-bloom` | Nền card đậm trong feature card grid — pastel mạnh hơn, một trong bốn biến thể card màu luân phiên nhau trên các hàng feature |"
    info: "| Deep Navy | `#193f78` | `--color-deep-navy` | Blue wash cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. Không nâng cấp nó thành màu CTA chính |"
    info: "| Forest Sage | `#244f47` | `--color-forest-sage` | Biến thể card teal trầm — điểm đối trọng đất, ấm áp trong vòng quay bốn màu card |"
    info: "| Warm Bone | `#f1f0ec` | `--color-warm-bone` | Canvas phụ, nền section mềm, viền action trung tính — màu trắng ngà giúp trang không bị vô trùng |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, button fills, body text trên các phần tối |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Text chính, feature sections tối, comparison cards tối đầy — tạo các dải đen ấn tượng làm màu sắc nổi bật |"
    info: "| Hairline | `#e5e7eb` | `--color-hairline` | Borders, dividers, table rules, input borders — nét trung tính làm việc chính |"
    info: "| Stone | `#d1d5db` | `--color-stone` | Nét xám trung bình, divider tinh tế, nền icon mờ |"
    info: "| Smoke | `#6e6d6c` | `--color-smoke` | Body text phụ, helper text, caption mờ |"
    info: "| Graphite | `#555555` | `--color-graphite` | Text cấp ba, button labels trên nút trung tính |"

  tokens___typography:

    regular___regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_regular:
      - "**Weights:** 400"
      - "**Sizes:** 11px, 12px, 14px, 16px, 18px, 36px, 64px"
      - "**Line height:** 1, 1.11, 1.14, 1.2, 1.3, 1.33, 1.38, 1.4, 1.5, 1.56"
      - "**Letter spacing:** -0.05, -0.03, -0.025, -0.022, -0.02"
      - "**Vai trò:** Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    một_geometric_grotesque_sans_serif_được_custom_marketed_làm_font_chính_của_site___inter__manrope__hoặc_dm_sans_là_các_lựa_chọn_thay_thế_gần_nhất___tất_cả_ui__body__navigation__và_headings__weight_500_dùng_cho_buttons__nav_links__và_sub_headings__weight_400_dùng_cho_body_copy__weight_700_dành_riêng_cho_eyebrow_labels_với_tracking_mở__dải_đầy_đủ_từ_caption_11px_đến_display_headings_150px_biến_hệ_thống_này_thành_một_single_family_system_làm_mọi_thứ_____font_a_geometric_grotesque_sans_serif_custom_marketed_as_the_site_font_inter_manrope_or_dm_sans_are_close_substitutes:
      - "**Thay thế:** Inter (gần nhất với các dạng hình học và tracking chặt), Manrope, DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 11, 12, 14, 16, 18, 24, 28, 36, 40, 48, 64, 120, 150"
      - "**Line height:** 0.75–1.56 tùy kích thước; chặt nhất ở display sizes (0.75–0.93), tiêu chuẩn ở body (1.4–1.5)"
      - "**Letter spacing:** Negative tracking chặt xuyên suốt: -0.05em ở display 120–150px, -0.03em ở heading 48–64px, -0.02em đến -0.025em ở sub-heading 24–40px, gần như bằng 0 ở body 14–18px. Eyebrow caps weight 700 ở 14px dùng +0.025em (tracking mở) để đọc như một label, không phải body."
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Tất cả UI, body, navigation, và headings. Weight 500 dùng cho buttons, nav links, và sub-headings; weight 400 dùng cho body copy; weight 700 dành riêng cho eyebrow labels với tracking mở. Dải đầy đủ từ caption 11px đến display headings 150px biến hệ thống này thành một single-family system làm mọi thứ."

    nanum_pen_script___điểm_nhấn_cá_tính_vẽ_tay___chỉ_xuất_hiện_bên_dưới_hero_copy_gạch_chân_màu_cam__actually_work__và_các_khoảnh_khắc_đặc_trưng_tương_tự__không_bao_giờ_dùng_cho_body__ui__hay_navigation__đây_là_động_thái_typographic_đặc_biệt_nhất_của_thương_hiệu__một_script_nói_rằng__chúng_tôi_là_con_người__không_phải_phần_mềm_doanh_nghiệp_____font_nanum_pen_script:
      - "**Thay thế:** Caveat, Kalam, Permanent Marker"
      - "**Weights:** 400, 500"
      - "**Sizes:** 28, 30"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** -0.0300em"
      - "**Vai trò:** Điểm nhấn cá tính vẽ tay — chỉ xuất hiện bên dưới hero copy (gạch chân màu cam 'actually work') và các khoảnh khắc đặc trưng tương tự. Không bao giờ dùng cho body, UI, hay navigation. Đây là động thái typographic đặc biệt nhất của thương hiệu: một script nói rằng 'chúng tôi là con người, không phải phần mềm doanh nghiệp'."

    medium___medium___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_medium:
      - "**Weights:** 500"
      - "**Sizes:** 11px, 12px, 14px, 16px, 18px, 24px, 28px, 36px, 40px, 48px, 64px, 120px, 150px"
      - "**Line height:** 0.75, 0.9, 0.93, 1, 1.1, 1.11, 1.33, 1.4, 1.43, 1.5"
      - "**Letter spacing:** -0.03, -0.02, -0.018, -0.012"
      - "**Vai trò:** Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    bold___bold___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_bold:
      - "**Weights:** 700"
      - "**Sizes:** 14px"
      - "**Line height:** 1.14"
      - "**Letter spacing:** 0.025"
      - "**Vai trò:** Bold — đượ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 | 11px | 1.4 | -0.2px | `--text-caption` |"
      info: "| body | 14px | 1.5 | -0.28px | `--text-body` |"
      info: "| body-lg | 16px | 1.5 | -0.32px | `--text-body-lg` |"
      info: "| subheading | 18px | 1.4 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.9px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.14 | -1.2px | `--text-heading-lg` |"
      info: "| display | 64px | 1.11 | -1.92px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 92 | 92px | `--spacing-92` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 16px |"
      info: "| hero | 40px |"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| icons | 8px |"
      info: "| inputs | 12px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    primary_pill_button:
      vai_trò: "Main call-to-action — 'Get your free trial', demo requests"

      info: "Filled #4570ff indigo, text trắng, radius 9999px (true pill), padding dọc 12px × ngang 24px, weight 500 ở 16px. Single shadow hoặc không. Đây là filled chromatic button duy nhất trong hệ thống."

    outlined_orange_button:
      vai_trò: "Secondary action trên hero hoặc feature sections"

      info: "Transparent fill, border 2px #ff6808, text #ff6808, radius 9999px, padding 10px × 20px. Mang phong cách năng lượng, không hung hăng."

    ghost_nav_button:
      vai_trò: "Navigation link với hover affordance"

      info: "Transparent fill, text #555555 ở 16px weight 500, padding dọc 8px × ngang 12px, radius 16px. Chuyển thành filled #f1f0ec khi hover."

    login_pill_button:
      vai_trò: "Utility action ít nhấn mạnh trong header"

      info: "Filled #f1f0ec warm bone, text #000000, radius 9999px, padding 10px × 20px. Nằm cạnh CTA indigo chính để tạo cặp yên tĩnh/chủ động."

    content_card:
      vai_trò: "Feature cards, testimonial cards, product modules"

      info: "Bề mặt trắng, radius 20px, padding 20–24px, tùy chọn border 1px #e5e7eb hairline. Không shadow mặc định — ngữ cảnh dải tối hoặc màu nền tạo độ cao."

    colored_feature_card:
      vai_trò: "Biến thể card pastel/navy/forest luân phiên trong feature grids"

      info: "Một trong bốn màu nền — #ebdcff lavender, #d6e0ff ice blue, #c293f1 lilac, #193f78 navy, hoặc #244f47 sage. Radius 20px, padding 20–24px, text trắng hoặc đen tùy độ sáng nền. Vòng quay này là một thiết bị đặc trưng để thêm đa dạng mà không phá vỡ hệ thống."

    dark_comparison_card:
      vai_trò: "Phía 'With 7shifts' của split before/after"

      info: "Filled #000000, text trắng, radius 20px, padding 24px. Ghép cặp với card bone sáng cùng radius để tạo khối tương phản side-by-side."

    hero_plate:
      vai_trò: "Hero container full-width và case-study band"

      info: "Ảnh trắng hoặc tối full-bleed, radius 40px ở cạnh trên hoặc dưới khi chuyển tiếp vào card grid. Chứa headline căn giữa ở 48–64px weight 500 với điểm nhấn gạch chân cam Nanum Pen Script."

    tabbed_feature_section:
      vai_trò: "Product feature showcase với các tab có thể chuyển đổi"

      info: "Nền trắng, heading căn giữa ở 36–48px, hàng tab với tab đang hoạt động được đánh dấu bằng gạch chân indigo và weight 500. Nội dung bên dưới chia thành panel feature màu (cam hoặc pastel) bên trái và panel text trắng bên phải, cả hai đều radius 20px."

    pill_tag___case_study_chip:
      vai_trò: "Case study links, category tags, small badges"

      info: "Filled #ffffff hoặc #f1f0ec, text #000000 ở 12–14px weight 400, radius 9999px, padding 4px × 12px. Nằm bên dưới logo grids."

    logo_grid:
      vai_trò: "Customer trust strip — logo chuỗi nhà hàng"

      info: "Hàng ngang logo thương hiệu trên nền ảnh tối, mỗi logo có chip 'Case study' pill trắng bên dưới. Không có card containers; logo nằm trực tiếp trên bề mặt ảnh."

    comparison_check___cross_list:
      vai_trò: "Danh sách lợi ích dạng bullet bên trong comparison cards"

      info: "Mỗi item là label 16px weight 500 với dấu check tròn (#000000 filled, check trắng) hoặc cross (#000000 với × trắng) phía trước. Các item xếp chồng với row gap 8px bên trong card padding."

    hand_drawn_underline_accent:
      vai_trò: "Điểm nhấn cá tính bên dưới hero hoặc section keywords"

      info: "Nanum Pen Script ở 28–30px với màu #ff6808, đặt bên dưới một từ khóa duy nhất trong headline. Không bao giờ dùng cho nhiều hơn một từ mỗi heading, và chỉ trên hero/feature sections — không dùng trên body copy."

  do_s_and_don_ts:

    do:
      - "Dùng #4570ff độc quyền cho primary actions — pill button ở radius 9999px, padding 12px × 24px, text trắng 16px weight 500"
      - "Dùng #ff6808 (Ember Orange) cho các điểm nhấn cá tính đặc trưng: gạch chân hero, nền feature section, outlined buttons — không bao giờ dùng cho body text hoặc UI trung tính"
      - "Áp dụng radius 20px cho tất cả cards, 9999px cho tất cả buttons và tags, 40px cho hero plates và cạnh section full-bleed"
      - "Đặt display headings (64px trở lên) ở letter-spacing -0.05em; thắt chặt dần đến -0.02em ở 24px và gần như bằng 0 ở body 14px"
      - "Chỉ ghép Nanum Pen Script với hero hoặc section-level headings, và chỉ bên dưới một từ khóa duy nhất — nó là dấu câu, không phải style chạy"
      - "Xen kẽ các dải đen full-bleed với các section warm bone (#f1f0ec) để tạo nhịp điệu tương phản làm cho các điểm nhấn pastel và lime trở nên sống động"
      - "Dùng bốn biến thể card pastel (#ebdcff, #d6e0ff, #c293f1, #193f78, #244f47) luân phiên trong feature grids để thêm đa dạng màu sắc mà không giới thiệu token mới"

    don_t:
      - "Không fill buttons với #ff6808 — cam là điểm nhấn, không phải hành động; màu action filled duy nhất là #4570ff"
      - "Không áp dụng Nanum Pen Script cho body copy, navigation, buttons, hoặc bất cứ thứ gì dưới heading level — nó mất đi cá tính khi bị lạm dụng"
      - "Không dùng shadows hoặc elevation nặng để phân tách cards — hệ thống dựa vào tương phản fill (trắng trên bone, pastel trên trắng, đen trên ảnh), không phải drop shadows"
      - "Không giới thiệu màu bão hòa mới cho UI — bảng màu cố tình hẹp: một indigo, một cam, một lime, và bốn biến thể pastel"
      - "Không đặt body text dưới 14px hoặc trên 18px — dải đọc được hẹp và negative tracking được hiệu chỉnh cho nó"
      - "Không dùng #c6ff94 (Lime Highlighter) làm nền bên ngoài các phần tối hoặc ảnh — trên nền trắng nó đọc như low-contrast và bị rửa trôi"
      - "Không áp dụng +0.025em opened tracking cho bất cứ thứ gì khác ngoài eyebrow labels 14px weight 700 — nó dành riêng cho style label all-caps cụ thể đó"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang chính |"
    info: "| 1 | Warm Bone Section | `#f1f0ec` | Canvas phụ, dải nội dung lớn, nền section mềm |"
    info: "| 2 | Card Surface | `#ffffff` | Product cards, content cards nằm trên nền bone |"
    info: "| 3 | Dark Band | `#000000` | Section tối full-bleed, comparison cards ấn tượng, photo overlays |"
    info: "| 4 | Pastel Wash | `#d6e0ff / #ebdcff` | Biến thể card và section tinted mềm cho nhịp điệu thị giác |"

  elevation:

    info: "Hệ thống cố tình tránh drop shadows. Elevation được thể hiện qua tương phản fill — card trắng trên bề mặt warm bone, card pastel trên trắng, card đen trên nền ảnh — và qua các dải đen ấn tượng hoạt động như separator full-bleed. Việc không có shadows là một lựa chọn có chủ đích giúp trang luôn phẳng, hiện đại, và đồ họa, để các điểm nhấn cam và lime làm phần nâng đỡ thị giác thay vì shadow stacks."

  imagery:

    info: "Imagery thưa thớt và có mục đích. Bức ảnh full-bleed duy nhất là nội thất nhà hàng tối, ánh sáng ấm (tông gỗ, ánh sáng xung quanh) được dùng như một trust/case-study band duy nhất — nó neo thương hiệu vào bối cảnh nhà hàng mà không lấn át. Product screenshots xuất hiện bên trong device frames viền tối với app UI được ghép lên ảnh, hiển thị phần mềm thực tế thay vì minh họa. Không có illustrations, không 3D renders, không đồ họa trừu tượng. Icons tối thiểu: filled circles đơn giản cho dấu check/cross trong comparison lists. Trọng lượng thị giác chủ yếu là typographic và layout-driven, với màu sắc (không phải imagery) làm công việc trang trí."

  layout:

    info: "Trang được căn giữa với content well max-width 1200px trên canvas trắng tinh. Hero là một khối text căn giữa — headline lớn 48–64px weight 500, điểm nhấn gạch chân cam Nanum Pen Script, một CTA pill indigo duy nhất — không có hero image. Trang xen kẽ giữa bốn hình dạng nội dung: (1) khối text căn giữa + CTA trên nền trắng, (2) comparison cards side-by-side trong grid 2 cột với card bone sáng ghép cặp với card đen, (3) dải ảnh tối full-bleed cho social proof, và (4) tabbed feature sections với panel màu + panel text trắng. Feature grids dùng layout card 3–4 cột với các màu nền card pastel luân phiên. Section gaps chạy 64–80px, với card padding 20–24px và element gaps 8–12px. Navigation là một top bar: logo trái, 6 nav links giữa, CTA indigo + login pill bone phải. Mật độ tổng thể compact nhưng có khoảng thở rộng rãi xung quanh các dải tối, hoạt động như divider full-bleed giữa các section nội dung yên tĩnh khác."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "primary action: #4570ff (filled action)"
    - "Accent / personality: #ff6808 (Ember Orange)"
    - "Highlight on dark: #c6ff94 (Lime)"
    - "Text primary: #000000"
    - "Text secondary: #6e6d6c (Smoke)"
    - "Surface base: #ffffff (Paper White)"
    - "Surface secondary: #f1f0ec (Warm Bone)"
    - "Border: #e5e7eb (Hairline)"

    info: "Example Component Prompts:"

    - "Tạo một hero section trên nền trắng: headline căn giữa 64px weight 500 màu #000000 với từ 'actually' (hoặc một từ khóa) được gạch chân bằng #ff6808 dùng Nanum Pen Script ở 28px. Subhead 18px weight 400 màu #6e6d6c. Một CTA pill indigo duy nhất ở radius 9999px, fill #4570ff, text trắng 16px weight 500, padding 12px × 24px. Section vertical padding 80px."

    - "Tạo một before/after comparison: hai card cạnh nhau radius 20px. Card trái fill #f1f0ec, padding 24px, heading 36px weight 500 màu #000000, ba list items với row gap 8px, mỗi item có prefix là filled black circle với dấu × trắng. Card phải cấu trúc giống hệt nhưng fill #000000, text trắng, và filled black circle với dấu check trắng."

    - "Tạo một feature grid gồm 4 card trong một hàng: mỗi card radius 20px, padding 24px, các màu nền pastel khác nhau — #ebdcff, #d6e0ff, #c293f1, #193f78. Heading 24px weight 500, body 14px weight 400. Màu text chuyển sang trắng trên #193f78 và #244f47, giữ nguyên #000000 trên các pastel sáng hơn."

    - "Tạo một tabbed product feature: section nền trắng, heading căn giữa 36px weight 500. Hàng tab bên dưới với 5 tab labels ở 16px weight 400 #6e6d6c; tab đang hoạt động là 16px weight 500 #000000 với gạch chân 2px #4570ff. Nội dung bên dưới: nửa trái là panel cam #ff6808 (radius 20px, padding 20px) chứa product screenshot frame; nửa phải là panel trắng (radius 20px, padding 20px) với heading 24px weight 500 và body text 14px."

    - "Tạo một case study logo band: nền ảnh nhà hàng tối full-bleed, radius trên 40px. Hàng 6 logo nhà hàng màu trắng, cách đều nhau. Bên dưới mỗi logo, một pill tag trắng (radius 9999px, fill #ffffff, text 12px weight 400 #000000, padding 4px × 12px) ghi 'Case study'."

  similar_brands:

    - "**Toast** — Cùng playbook SaaS ngành nhà hàng: canvas trắng, một màu CTA mạnh mẽ, biến thể card pastel ấm áp, và pill buttons rộng rãi"
    - "**Linear** — Cùng negative tracking chặt trên geometric sans-serif headings và một màu action bão hòa duy nhất trên nền interface gần như đơn sắc"
    - "**Calendly** — Cùng pattern centered-hero-on-white với một pill CTA duy nhất, các section so sánh sáng/tối xen kẽ, và card 20px bo tròn"
    - "**Webflow** — Cùng sự pha trộn giữa UI đơn sắc yên tĩnh với các mảng màu bùng nổ dùng làm nền section và điểm nhấn script/viết tay cho cá tính"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-indigo-bolt: #4570ff;
          --color-ember-orange: #ff6808;
          --color-lime-highlighter: #c6ff94;
          --color-lavender-mist: #ebdcff;
          --color-ice-blue: #d6e0ff;
          --color-lilac-bloom: #c293f1;
          --color-deep-navy: #193f78;
          --color-forest-sage: #244f47;
          --color-warm-bone: #f1f0ec;
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-hairline: #e5e7eb;
          --color-stone: #d1d5db;
          --color-smoke: #6e6d6c;
          --color-graphite: #555555;
        
          /* Typography — Font Families */
          --font-regular: 'Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-a-geometric-grotesque-sans-serif-custom-marketed-as-the-site-font-inter-manrope-or-dm-sans-are-close-substitutes: 'A geometric grotesque sans-serif (custom-marketed as the site font — Inter, Manrope, or DM Sans are close substitutes)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanum-pen-script: 'Nanum Pen Script', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-medium: 'Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bold: 'Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: -0.2px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.28px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.6px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.2px;
          --text-display: 64px;
          --leading-display: 1.11;
          --tracking-display: -1.92px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 20-24px;
          --element-gap: 8-12px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 16px;
          --radius-hero: 40px;
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-icons: 8px;
          --radius-inputs: 12px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-warm-bone-section: #f1f0ec;
          --surface-card-surface: #ffffff;
          --surface-dark-band: #000000;
          --surface-pastel-wash: #d6e0ff / #ebdcff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-indigo-bolt: #4570ff;
          --color-ember-orange: #ff6808;
          --color-lime-highlighter: #c6ff94;
          --color-lavender-mist: #ebdcff;
          --color-ice-blue: #d6e0ff;
          --color-lilac-bloom: #c293f1;
          --color-deep-navy: #193f78;
          --color-forest-sage: #244f47;
          --color-warm-bone: #f1f0ec;
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-hairline: #e5e7eb;
          --color-stone: #d1d5db;
          --color-smoke: #6e6d6c;
          --color-graphite: #555555;
        
          /* Typography */
          --font-regular: 'Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-a-geometric-grotesque-sans-serif-custom-marketed-as-the-site-font-inter-manrope-or-dm-sans-are-close-substitutes: 'A geometric grotesque sans-serif (custom-marketed as the site font — Inter, Manrope, or DM Sans are close substitutes)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nanum-pen-script: 'Nanum Pen Script', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-medium: 'Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bold: 'Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: -0.2px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.28px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.6px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.2px;
          --text-display: 64px;
          --leading-display: 1.11;
          --tracking-display: -1.92px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 9999px;
        }