clutch_security___style_reference:
  info: "> Bảo tàng typography trên nền đá cẩm thạch trắng. Những bức tường gallery trắng tinh, nơi mỗi chữ là một hiện vật, và một nút xanh duy nhất là bức tranh duy nhất trong phòng."

  theme: "light"

  info: "Clutch Security vận hành theo phong cách minimalism gallery trắng: một canvas sáng, gần như giấy, nơi typography gánh toàn bộ trọng lượng thị giác và một màu xanh điện duy nhất đảm nhận mọi cuộc đối thoại về màu sắc. Điểm nhấn typography đặc trưng là headline display với font PP Radio Grotesk, nơi các từ khóa chuyển đổi giữa weight 400 và 600 trong cùng một câu, tạo ra nhịp điệu gọi-đáp như một cuộc trò chuyện hơn là một tuyên bố. Giao diện gần như phẳng — góc 6px, border 1px mảnh như sợi tóc màu xám lạnh, không có shadow trang trí — để những hình minh họa 3D orbital hay brand mark 3D thỉnh thoảng xuất hiện giống như một vật thể tìm thấy trên mặt bàn sạch sẽ. Mọi thứ đều căn giữa, rộng rãi và đầy tự tin; các khoảng cách section 80px và internal padding thoáng đãng cho mỗi phần tử đủ không gian để khẳng định bản thân mà không cần cạnh tranh."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Electric Cobalt | `#004dff` | `--color-electric-cobalt` | Primary action buttons, active states, điểm nhấn màu duy nhất tạo điểm nhấn cho toàn bộ hệ thống đơn sắc |"
    info: "| Periwinkle Wash | `#d9e4ff` | `--color-periwinkle-wash` | Bề mặt xanh nhạt cho vùng được tô sáng, nền mang tông màu thương hiệu nhẹ nhàng, fill accent mềm mại |"
    info: "| Lavender Veil | `#e6c5f7` | `--color-lavender-veil` | Bề mặt tím nhạt cho brand mark và vùng accent cấp ba, một chút hơi ấm giữa bảng màu lạnh |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Neutral form states, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp lên màu CTA chính |"
    info: "| Graphite | `#6e6e6e` | `--color-graphite` | Secondary text, link color, mô tả mờ, copy hỗ trợ lùi lại so với nội dung chính |"
    info: "| Stone | `#c9c9c9` | `--color-stone` | Tertiary surface fills, nền disabled state, phân biệt card rất nhẹ |"
    info: "| Ash | `#d9d9d9` | `--color-ash` | Drop shadow base ở độ mờ 16%, secondary dividers, phân tách bề mặt gần như vô hình |"
    info: "| Pewter | `#dfdfdf` | `--color-pewter` | Secondary borders, card edges, input field outlines, màu grid cấu trúc ở độ dày 1px |"
    info: "| Slate Mist | `#e5e7eb` | `--color-slate-mist` | Primary hairline borders, màu divider được dùng nhiều nhất, phân cách card, section và table rows |"
    info: "| Fog | `#f9fafb` | `--color-fog` | Lớp nâng nhẹ bề mặt trang, nền section xen kẽ, màu trắng ngà hơi ấm phá vỡ sự đơn điệu của trắng tinh |"
    info: "| Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, text trên nền tối, bề mặt chủ đạo nơi mọi thứ tọa lạc |"

  tokens___typography:

    pp_radio_grotesk___display_and_heading_typeface__kiểu_chữ_geometric_humanist_với_các_aperture_mở_đặc_trưng_đảm_nhận_mọi_headline__subhead__label_viết_hoa_và_brand_statement__kỹ_thuật_đặc_trưng_là_pha_trộn_weight_400_và_600_trong_cùng_một_câu_ví_dụ___every_identity__every_agent__every_secret__để_tạo_nhấn_mạnh_nhịp_nhàng_mà_không_cần_thay_đổi_màu_sắc_hay_kích_thước_____font_pp_radio_grotesk:
      - "**Thay thế:** Söhne Breit, PP Neue Montreal, hoặc Space Grotesk để có nét chữ gần nhất"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 10, 12, 13, 14, 20, 24, 26, 32, 38, 56, 68"
      - "**Line height:** 1.10, 1.20, 1.30, 1.40, 1.50"
      - "**Letter spacing:** Display 68px: -0.01em; Headings 56-32px: -0.01em; Labels 10-13px: 0.12-0.16em"
      - "**Vai trò:** Display and heading typeface. Kiểu chữ geometric-humanist với các aperture mở đặc trưng đảm nhận mọi headline, subhead, label viết hoa và brand statement. Kỹ thuật đặc trưng là pha trộn weight 400 và 600 trong cùng một câu (ví dụ: 'Every Identity. Every Agent. Every Secret.') để tạo nhấn mạnh nhịp nhàng mà không cần thay đổi màu sắc hay kích thước."

    inter___ui_and_body_typeface__xử_lý_mọi_text_giao_diện__navigation__button_labels__form_inputs_và_supporting_paragraph_copy__độ_tracking_âm_nhẹ_ở_kích_thước_body_giúp_text_ui_dày_đặc_trở_nên_gọn_gàng_mà_không_cảm_thấy_chật_chội_____font_inter:
      - "**Thay thế:** System UI sans (SF Pro Text, Segoe UI), hoặc DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 12, 14, 15, 16, 17"
      - "**Line height:** 1.30, 1.40, 1.50"
      - "**Letter spacing:** Body: -0.02em; Labels/uppercase: 0.12em"
      - "**Vai trò:** UI and body typeface. Xử lý mọi text giao diện, navigation, button labels, form inputs và supporting paragraph copy. Độ tracking âm nhẹ ở kích thước body giúp text UI dày đặc trở nên gọn gàng mà không cảm thấy chật chội."

    times___serif_hiếm_khi_dùng_cho_accent_editorial_một_lần__có_khả_năng_là_fallback_hoặc_thành_phần_kế_thừa___không_phải_yếu_tố_chính_của_design_system____font_times:
      - "**Weights:** 400"
      - "**Kích thước:** 16"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Serif hiếm khi dùng cho accent editorial một lần, có khả năng là fallback hoặc thành phần kế thừa — không phải yếu tố chính của design system"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.3 | 0.16px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.02px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.3 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.2 | -0.01px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.1 | -0.01px | `--text-heading-lg` |"
      info: "| display | 68px | 1.1 | -0.01px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 6px |"
      info: "| badges | 6px |"
      info: "| inputs | 6px |"
      info: "| buttons | 6px |"
      info: "| illustration | 80px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.16) 0px 2px 6px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button_filled_black:
      vai_trò: "Nút action chủ lực cho demo, đăng ký và các chuyển đổi chính"

      info: "Fill Obsidian (#000000), text Canvas (#ffffff) ở 14px Inter weight 500, border-radius 6px, padding dọc 10px và ngang 20px. Letter-spacing tối thiểu. Đây là kiểu mặc định cho 'Book a demo' — đậm nhưng nhẹ nhàng trên nền canvas trắng."

    brand_accent_button_electric_cobalt:
      vai_trò: "Dùng có chọn lọc cho một action chính trên mỗi trang nơi cần điểm nhấn xanh"

      info: "Fill Electric Cobalt (#004dff), text Canvas (#ffffff) ở 14px Inter weight 500, border-radius 6px, padding 10px/20px. Chỉ xuất hiện khi thương hiệu cần \"lóe sáng\" — hãy coi nó như tài nguyên giới hạn."

    outlined_action_button:
      vai_trò: "Secondary actions, CTA ít nhấn mạnh hơn như 'See Clutch in Action →'"

      info: "Fill trong suốt, border 1px Obsidian (#000000), text Obsidian, radius 6px, padding 10px/20px. Kèm glyph mũi tên (→) để gợi ý hướng đi."

    pill_connector_button:
      vai_trò: "Link/kết nối nhẹ giữa hai phần tử thị giác (ví dụ: 'Delegate to' giữa Human Identities và AI Agents)"

      info: "Fill Canvas, border 1px Pewter (#dfdfdf), text Obsidian, radius 6px, padding gọn ~6px/14px. Inter 14px nhỏ. Hoạt động như link quan hệ, không phải action chính."

    navigation_header:
      vai_trò: "Thanh navigation cố định đầu trang với logo, menu items và CTA"

      info: "Nền trắng Canvas, không border hay shadow. Bên trái: Clutch wordmark + mark màu Obsidian. Giữa: Inter 14px nav links (Platform, Solutions, Use Cases, Resources, Company) màu Obsidian với khoảng cách ngang rộng (24-32px gaps). Bên phải: Primary CTA Button (Filled Black)."

    display_headline_mixed_weight:
      vai_trò: "Thành phần typography đặc trưng cho hero và section headers"

      info: "PP Radio Grotesk ở 56-68px, line-height 1.10, letter-spacing -0.01em. Từ khóa ở weight 600, từ hỗ trợ ở weight 400, tất cả màu Obsidian. Kỹ thuật mixed-weight là giọng nói của thương hiệu — không bao giờ in đậm cả câu, luôn tạo nhịp điệu qua độ tương phản weight."

    comparison_card:
      vai_trò: "Khối so sánh hai cột tính năng (ví dụ: Human Identities vs AI Agents)"

      info: "Fill Canvas, border 1px Pewter (#dfdfdf), radius 6px, internal padding 24-32px. Chứa icon 3D ở trên cùng (~80-100px), heading PP Radio Grotesk ở 24-26px weight 600, status badge ('MANAGED' / 'MULTIPLYING') ở dưới cùng. Rất phẳng, rất có cấu trúc."

    status_badge___pill_label:
      vai_trò: "Label danh mục viết hoa trên card và section"

      info: "Nền Fog (#f9fafb), text Graphite (#6e6e6e), radius 6px, padding 4px/10px. Text là PP Radio Grotesk hoặc Inter ở 10-12px weight 500, viết hoa, letter-spacing 0.12-0.16em. Những badge này thì thầm chứ không hét to."

    split_section_text___visual:
      vai_trò: "Layout hai cột cho các section tính năng như 'Instant Setup, Immediate Impact'"

      cột_trái: "headline + sub-text + CTA button. Cột phải: visual trừu tượng (3D illustration, gradient page-fan, hoặc integration logos). Column gap 32-48px, căn chỉnh theo max-width 1200px. Các phần tử visual thường có internal padding rộng và cảm giác điêu khắc bên cạnh text phẳng."

    integration_logo_cluster:
      vai_trò: "Hiển thị độ tin cậy thương hiệu — logo của các đối tác tích hợp (Azure AD, CrowdStrike, 1Password, Splunk, Oracle)"

      info: "Logo màu Obsidian (#000000) ở các kích thước khác nhau (24-32px), sắp xếp trong một grid dọc hoặc so le lỏng lẻo ở bên phải của split section. Không border hay container — logo trôi nổi trên nền Canvas với khoảng trắng rộng rãi."

    3d_orbital_illustration:
      vai_trò: "Trung tâm thị giác hero — phép ẩn dụ hệ sinh thái danh tính"

      info: "Một khối cầu Obsidian tối (cái 'clutch') với brand mark 3D màu oải hương/tím nhạt trên đỉnh, được bao quanh bởi một quỹ đạo tròn gồm các icon token nhỏ trên badge tròn màu Canvas trắng với border Pewter. Quỹ đạo gợi ý sự kết nối và bao phủ. Đây là khoảnh khắc duy nhất hệ thống cho phép 3D rendering phức tạp."

    gradient_page_fan_visual:
      vai_trò: "Visual động cho section 'Instant Setup' hiển thị các trang xòe ra"

      info: "Linear gradient trừu tượng từ Obsidian đến Canvas (hoặc đen sang trắng ở ~110°) gợi ý một tài liệu hoặc trang đang mở ra. Một tia sáng/thanh xanh chạy xuyên qua bố cục. Không container — gradient hòa vào nền Canvas."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng PP Radio Grotesk cho mọi display và heading text từ 26px trở lên; không bao giờ thay thế bằng system font ở các kích thước này"
      - "Áp dụng kỹ thuật headline mixed-weight: weight 600 cho 1-2 từ khóa, weight 400 cho từ hỗ trợ, tất cả màu Obsidian"
      - "Giữ Electric Cobalt (#004dff) như accent dùng một lần trên mỗi trang — một CTA, một điểm nhấn, sau đó quay về đơn sắc"
      - "Dùng border 1px Slate Mist (#e5e7eb) hoặc Pewter (#dfdfdf) cho mọi cạnh card và container; không bao giờ dùng border dày 2px+"
      - "Đặt section gap ở 80px và để các phần tử thở; chống lại sự thôi thúc nén các section lại gần nhau"
      - "Kết hợp border-radius 6px nhất quán trên card, button và input — đó là ngôn ngữ góc của hệ thống"
      - "Dùng PP Radio Grotesk viết hoa ở 10-12px với letter-spacing 0.12-0.16em cho category labels và section eyebrows"

    không_nên_làm:
      - "Không in đậm toàn bộ headline — luôn tạo nhịp điệu bằng cách pha trộn weight 400 và 600 trong câu"
      - "Không dùng nhiều accent color; nếu Electric Cobalt đã có trên button, đừng thêm Periwinkle fills gần đó"
      - "Không áp dụng drop shadow ngoài pattern offset 6px duy nhất ở độ mờ 16%; hệ thống được thiết kế phẳng"
      - "Không dùng border-radius trên 6px cho phần tử UI (80px chỉ dành riêng cho phần tử 3D illustration)"
      - "Không căn giữa body text hoặc mô tả dài — chỉ display headline và CTA ngắn mới được căn giữa"
      - "Không giới thiệu typeface mới; PP Radio Grotesk cho display, Inter cho UI — không cần gì thêm"
      - "Không dùng section tối full-bleed; hệ thống giữ trong Canvas-trắng với chỉ button fill mới dùng Obsidian"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang, bề mặt chủ đạo |"
    info: "| 1 | Fog | `#f9fafb` | Nền section xen kẽ nhẹ nhàng, trắng ngà hơi ấm |"
    info: "| 2 | Periwinkle Wash | `#d9e4ff` | Bề mặt tô sáng mang tông thương hiệu, vùng accent mềm |"
    info: "| 3 | Obsidian | `#000000` | Bề mặt tối đảo ngược cho button fills, phần tử UI tối |"

  elevation:

    - "**Link hover state:** `rgba(0, 0, 0, 0.16) 0px 2px 6px 0px`"

  imagery:

    info: "Hình ảnh cực kỳ thưa thớt và có tác động cao. Ngôn ngữ thị giác chính là 3D rendered illustration: các khối cầu Obsidian tối với brand mark màu oải hương/Periwinkle, được bao quanh bởi các icon token tròn quay quanh quỹ đạo với border mảnh. Một pattern phụ sử dụng linear gradient trừu tượng (Obsidian đến Canvas) gợi ý các trang xòe ra với một tia sáng xanh cắt ngang. Khi logo thương hiệu thực tế xuất hiện (Azure AD, CrowdStrike, 1Password, Splunk, Oracle), chúng được render phẳng màu Obsidian ở 24-32px không có container. Không có photography, không có stock imagery, và không có nền trang trí — canvas trắng là anh hùng, và mọi phần tử hình ảnh đều xứng đáng với vị trí của nó."

  layout:

    info: "Trang tuân theo layout căn giữa, max-width 1200px với khoảng cách section 80px rộng rãi. Hero là một dải full-bleed Canvas-trắng với display headline căn giữa phía trên 3D orbital illustration chiếm khoảng 40% chiều cao viewport. Các section bên dưới theo một nhịp điệu nhất quán: một khối text căn giữa, sau đó các dải split-layout (text-trái/visual-phải hoặc text-phải/visual-trái) xen kẽ với column gap 32-48px. So sánh tính năng sử dụng grid card hai cột. Navigation là thanh top bar cố định tối giản với logo-trái, links giữa và CTA-phải. Mật độ tổng thể rộng rãi — mỗi section chiếm không gian dọc đầy đủ mà không chen chúc. Không sidebar, không mega-menu, không panel chồng lấn."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #000000 (Obsidian)"
    - "Secondary text: #6e6e6e (Graphite)"
    - "Page background: #ffffff (Canvas)"
    - "Border: #e5e7eb (Slate Mist)"
    - "Brand accent: #004dff (Electric Cobalt)"
    - "primary action: #004dff (filled action)"

    3_5_example_component_prompts:

    - "Tạo một hero headline: 'Every Identity. Every Agent. Every Secret.' ở 68px PP Radio Grotesk, line-height 1.10, letter-spacing -0.01em, Obsidian (#000000). Đặt 'Every Identity.' và 'Every Agent.' ở weight 600, 'Every Secret.' ở weight 400. Căn giữa trên nền Canvas (#ffffff) với top padding 80px."

    - "Tạo một primary CTA button: Nền Electric Cobalt (#004dff), text Canvas (#ffffff) 'Book a demo' ở 14px Inter weight 500, border-radius 6px, padding dọc 10px, padding ngang 20px. Dùng nút này làm brand-color action duy nhất trên trang."

    - "Tạo một comparison card: Fill Canvas (#ffffff), border 1px Pewter (#dfdfdf), border-radius 6px, padding 24px. Nội dung: icon 3D kích thước 80px ở trên cùng, heading PP Radio Grotesk 'Human Identities' ở 26px weight 600, và status badge ở dưới cùng hiển thị 'MANAGED' bằng Inter 12px weight 500 viết hoa với letter-spacing 0.12em trên nền Fog (#f9fafb) với text Graphite (#6e6e6e), radius 6px, padding 4px/10px."

    - "Tạo một split section layout: max-width 1200px, hai cột với gap 32px. Cột trái: headline 'Instant Setup, Immediate Impact' bằng PP Radio Grotesk 38px weight 600, Obsidian, theo sau là outlined action button với border 1px Obsidian, radius 6px, text Obsidian 'See Clutch in Action →' ở 14px Inter weight 500. Cột phải: abstract gradient visual chuyển từ Obsidian sang Canvas ở 110° với một tia sáng xanh."

    - "Tạo một Primary Action Button: nền #004dff, text #ffffff, radius 9999px, compact pill padding. Dùng kiểu filled này cho CTA chính."

  similar_brands:

    - "**Linear** — Cùng phong cách minimalism phẳng với single chromatic accent (tím/xanh), geometric display sans cho headline, khoảng trắng rộng rãi và góc card 6px"
    - "**Vercel** — Cùng thẩm mỹ gallery trắng với display type cỡ lớn đầy tự tin, gần như không shadow, hairline borders, và một accent color làm mọi công việc về màu sắc"
    - "**Resend** — Cùng pattern hero căn giữa với 3D illustration trung tâm, bảng màu đơn sắc với single brand-color CTA, và typography display gần giống PP Radio Grotesk"
    - "**Plaid** — Cùng nhịp điệu split-section với các dải text-và-visual, xử lý headline mixed-weight, và kỷ luật chỉ dùng màu sắc cho dấu câu chức năng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cobalt: #004dff;
          --color-periwinkle-wash: #d9e4ff;
          --color-lavender-veil: #e6c5f7;
          --color-obsidian: #000000;
          --color-graphite: #6e6e6e;
          --color-stone: #c9c9c9;
          --color-ash: #d9d9d9;
          --color-pewter: #dfdfdf;
          --color-slate-mist: #e5e7eb;
          --color-fog: #f9fafb;
          --color-canvas: #ffffff;
        
          /* Typography — Font Families */
          --font-pp-radio-grotesk: 'PP Radio Grotesk', 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;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.16px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.02px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.01px;
          --text-heading: 38px;
          --leading-heading: 1.2;
          --tracking-heading: -0.01px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.01px;
          --text-display: 68px;
          --leading-display: 1.1;
          --tracking-display: -0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 60px;
          --radius-full-2: 80px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-badges: 6px;
          --radius-inputs: 6px;
          --radius-buttons: 6px;
          --radius-illustration: 80px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 2px 6px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-fog: #f9fafb;
          --surface-periwinkle-wash: #d9e4ff;
          --surface-obsidian: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cobalt: #004dff;
          --color-periwinkle-wash: #d9e4ff;
          --color-lavender-veil: #e6c5f7;
          --color-obsidian: #000000;
          --color-graphite: #6e6e6e;
          --color-stone: #c9c9c9;
          --color-ash: #d9d9d9;
          --color-pewter: #dfdfdf;
          --color-slate-mist: #e5e7eb;
          --color-fog: #f9fafb;
          --color-canvas: #ffffff;
        
          /* Typography */
          --font-pp-radio-grotesk: 'PP Radio Grotesk', 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;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.16px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.02px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.01px;
          --text-heading: 38px;
          --leading-heading: 1.2;
          --tracking-heading: -0.01px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.01px;
          --text-display: 68px;
          --leading-display: 1.1;
          --tracking-display: -0.01px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 60px;
          --radius-full-2: 80px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 2px 6px 0px;
        }