privy___style_reference:
  info: "> Editorial spread dạng ink-on-marble. Canvas đá cẩm thạch trắng, headline serif đen nén chặt, một dải violet duy nhất cắt ngang phía trên — sự kiềm chế thể hiện quyền lực."

  theme: "light"

  info: "Privy hoạt động như một hệ thống editorial crypto-fintech: một canvas gần như đơn sắc bị ngắt quãng bởi một dải thông báo violet rực rỡ và một nút gần như đen nặng. Typography gánh thương hiệu nhiều hơn màu sắc — một custom display face (ABC Favorit) đặt headline ở weight 400 với tracking cực kỳ chặt (-0.03em) và line-height rất chặt (1.03–1.15), mang lại cho những từ 56px+ một cảm giác nén, báo chí thay vì cảm giác tech-SaaS. Các bề mặt phẳng và tương phản cao: canvas trắng, mực gần đen (#010110) cho body và primary actions, dark mode được áp dụng có chọn lọc dưới dạng các dải full-bleed chứ không phải bề mặt có thể chuyển theme. Các component tối thiểu — pill buttons (100px radius), 8px-radius cards, 1px hairline borders — để custom serif và điểm nhấn violet đảm nhận phần nặng nhọc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, input fields — màu trung tính chủ đạo mà mọi thứ khác đặt lên |"
    info: "| Obsidian Ink | `#010110` | `--color-obsidian-ink` | Text chính, nav borders, icon strokes, filled primary buttons, input borders — màu gần đen mang tính cấu trúc, đọc như đen thuần ở kích thước body |"
    info: "| Carbon | `#111117` | `--color-carbon` | Bề mặt card dark mode, dark panels nâng cao, nền tối thứ cấp |"
    info: "| Graphite | `#22222a` | `--color-graphite` | Cao nhất trong dark mode — nền feature card, overlaid panels |"
    info: "| Fog | `#73737c` | `--color-fog` | Muted helper text, body copy thứ cấp, borders tinh tế — màu trung tính duy nhất cố tình giảm xuống medium contrast |"
    info: "| Ash | `#d9d9d9` | `--color-ash** | Decorative dot pattern, hairline dividers, inactive surface washes |"
    info: "| Iris Pulse | `#635bff` | `--color-iris-pulse` | Fill thanh thông báo, link hover states, điểm nhấn màu duy nhất — violet trên nền đơn sắc tạo hiệu ứng strob, thu hút mắt vào copy nhạy thời gian |"
    info: "| Deep Teal | `#072723` | `--color-deep-teal** | Decorative illustration fills, abstract graphic washes bên trong hero imagery — không mang chức năng UI, chỉ tồn tại trong artwork |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    abc_favorit_variable___display_và_heading_face___dùng_cho_hero_headlines_52_76px__section_headings_26_28px__và_đôi_khi_là_inline_link_lớn__cài_đặt_weight_400_là_phản_quy_tắc__hầu_hết_các_trang_fintech_dùng_600_700_cho_headlines__nhưng_serif_tương_phản_cao_của_favorit_ở_regular_weight_mang_lại_quyền_lực_thông_qua_cá_tính_typographic_chứ_không_phải_stroke_weight__letter_spacing__0_03em_ở_56px_tạo_cảm_giác_nén__editorial___các_từ_đọc_như_những_khối_mực_đặc_____font_abc_favorit_variable:
      - "**Thay thế:** GT Super, Tiempos Headline, hoặc Source Serif 4 (free match gần nhất cho cảm giác serif tương phản cao)"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 26px, 28px, 52px, 56px, 76px"
      - "**Line height:** 1.03–1.29"
      - "**Letter spacing:** -0.03em ở mọi kích thước display (≈ -1.68px ở 56px, -2.28px ở 76px)"
      - "**Vai trò:** Display và heading face — dùng cho hero headlines (52–76px), section headings (26–28px), và đôi khi là inline link lớn. Cài đặt weight-400 là phản quy tắc: hầu hết các trang fintech dùng 600–700 cho headlines, nhưng serif tương phản cao của Favorit ở regular weight mang lại quyền lực thông qua cá tính typographic chứ không phải stroke weight. Letter-spacing -0.03em ở 56px tạo cảm giác nén, editorial — các từ đọc như những khối mực đặc."

    inter___body__ui__và_navigation_face___dùng_cho_paragraphs_16_18px__nav_items_14_15px__buttons_14_16px__captions_12_13px__và_đôi_khi_là_subheading_20_21px__weight_500_cho_emphasized_inline_text__700_dành_riêng_cho_small_caps_style_labels_và_tag_like_ui__letter_spacing__0_02em_thắt_chặt_geometric_sans_để_nó_không_cảm_thấy_quá_chung_chung_khi_đứng_cạnh_favorit_____font_inter:
      - "**Thay thế:** Inter (đã có sẵn trên Google)"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 21px, 38px"
      - "**Line height:** 1.20–1.90"
      - "**Letter spacing:** -0.02em (≈ -0.28px ở 14px, -0.32px ở 16px, -0.36px ở 18px)"
      - "**Vai trò:** Body, UI, và navigation face — dùng cho paragraphs (16–18px), nav items (14–15px), buttons (14–16px), captions (12–13px), và đôi khi là subheading (20–21px). Weight 500 cho emphasized inline text, 700 dành riêng cho small-caps-style labels và tag-like UI. Letter-spacing -0.02em thắt chặt geometric sans để nó không cảm thấy quá chung chung khi đứng cạnh Favorit."

    abc_favorit_unlicensed_trial___abc_favorit_unlicensed_trial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_abc_favorit_unlicensed_trial:
      - "**Weights:** 400"
      - "**Sizes:** 56px"
      - "**Line height:** 1.07"
      - "**Letter spacing:** -0.03"
      - "**Vai trò:** ABC Favorit Unlicensed Trial — đượ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.4 | -0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.32px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.13 | -0.78px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.15 | -1.14px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.07 | -1.68px | `--text-heading-lg` |"
      info: "| display | 76px | 1.03 | -2.28px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 70 | 70px | `--spacing-70` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| images | 8px |"
      info: "| buttons | 100px |"

    layout:

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

  components:

    primary_filled_button:
      vai_trò: "Main action button — 'Get started' trong hero"

      info: "Fill #010110, text #ffffff ở 15px Inter weight 500, letter-spacing -0.02em. Padding 12px 20px. Radius 100px (full pill). Không border. Không shadow — dark fill trên white canvas chính là elevation. Arrow icon (→) ở 14px cùng màu với text, cách label 6px gap."

    ghost_outline_button:
      vai_trò: "Secondary action — 'Talk to sales', 'Learn more'"

      info: "Transparent fill, 1px border #010110. Text #010110 ở 15px Inter weight 500. Padding 12px 20px. Radius 100px. Khi hover: fill #010110, text đảo ngược thành #ffffff."

    pill_link_button_header:
      vai_trò: "Inline link được style như pill — 'Learn more' trong announcement bar"

      info: "Transparent fill, 1px border #ffffff. Text #ffffff ở 13–14px Inter. Padding 6px 14px. Radius 100px."

    announcement_bar:
      vai_trò: "Banner đầu trang với copy nhạy thời gian"

      info: "Dải full-width, fill #635bff (Iris Pulse violet). Text #ffffff ở 13px Inter weight 500, căn giữa. Inline pill link bên phải với 1px white border. Padding 10px 24px. Violet trên nền trắng bên dưới tạo ra điểm ngắt màu duy nhất trong hệ thống."

    navigation_bar:
      vai_trò: "Điều hướng chính của trang"

      info: "Nền trắng (#ffffff), 1px bottom border #010110 ở độ mờ 10–20%. Logo trái (16px Inter weight 700, #010110), nav links giữa (15px Inter weight 400, #010110, 10px row-gap giữa các cụm icon+label). Cụm phải: text links + nút 'Log in' dạng outline (1px #010110 border, 100px radius, 15px Inter). Chiều cao ~64px."

    dark_feature_card:
      vai_trò: "Card dạng lưới 3 cột trong dark sections ('Secure by design', 'Whitelabel and modular', 'Scales as you grow')"

      info: "Nền #22222a (Graphite) trên nền section #111117 (Carbon) — phân tách 1 tông tinh tế. 8px radius. Padding 24–32px. 3D isometric illustration ở trên với line art màu #333333 đến #444444. Heading Inter weight 500 ở 18–20px, #ffffff. Body Inter weight 400 ở 14–15px, #73737c (Fog). Không border, không shadow."

    phone_mockup_card:
      vai_trò: "UI sản phẩm hiển thị trên hero artwork"

      info: "Khung thiết bị trắng với 24–32px radius. UI bên trong dùng nền #ffffff, text #010110, 8px radii cho các phần tử bên trong. Nằm trên nền abstract green/teal có texture với gradient washes tinh tế."

    dashboard_preview_panel:
      vai_trò: "Lớp phủ ảnh chụp màn hình sản phẩm desktop trong hero"

      info: "Bề mặt trắng (#ffffff) với 8px radius. Cards bên trong dùng #ffffff trên nền #f7f7f7. Data tables với 1px #d9d9d9 row dividers. Mini chart elements dùng #635bff stroke cho accent lines trên nền #ffffff."

    footer:
      vai_trò: "Footer trang với cột link và decorative pattern"

      info: "Nền trắng với lớp phủ dotted/halftone pattern nhẹ màu #d9d9d9 ở độ mờ 20% phủ nửa trên. Lưới link 4 cột: headings 14px Inter weight 700 #010110, links 14px Inter weight 400 #73737c, 10px row-gap. Hàng dưới cùng: copyright + social icons (16px, #010110) + brand quote ở 14px Inter."

    text_link:
      vai_trò: "Inline và standalone links"

      info: "Màu #010110, không gạch chân mặc định. 1px underline xuất hiện khi hover. Arrow glyph (→) cùng màu, dùng cho directional/CTA links. Transitions 150ms ease."

    logo_wordmark:
      vai_trò: "Brand mark trong nav và footer"

      info: "Chấm tròn nhỏ (8px circle #010110) + 'privy' ở Inter weight 700 16px, #010110, letter-spacing -0.02em. Tùy chọn '/stripe company' suffix ở 13px Inter weight 400 màu #73737c."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng ABC Favorit (hoặc GT Super / Source Serif 4 thay thế) cho tất cả display headlines từ 26px trở lên — không bao giờ thay thế bằng Inter ở kích thước display, sự tương phản typographic chính là thương hiệu"
      - "Đặt display headlines ở weight 400 với letter-spacing -0.03em và line-height 1.03–1.15 — tracking chặt và weight nhẹ là signature, không được in đậm chúng"
      - "Dùng #010110 (Obsidian Ink) cho tất cả filled primary buttons, không phải #635bff — violet chỉ dành riêng cho announcement bar và links"
      - "Dành riêng #635bff (Iris Pulse) cho chính xác ba ngữ cảnh: announcement bar fill, inline link hover, và decorative chart strokes — không bao giờ dùng cho body text, borders, hoặc large fills"
      - "Dùng pill radius (100px) cho tất cả buttons và tags, 8px radius cho tất cả cards và images, 2px cho icons — không pha trộn thêm giá trị radius nào khác vào hệ thống"
      - "Dùng hairline 1px borders màu #010110 ở độ mờ giảm cho dividers và card edges, không dùng borders màu hoặc shadows để phân tách"
      - "Đặt Iris Pulse announcement bar dưới dạng dải full-bleed phía trên nav, không phải bên trong nav — điểm ngắt màu phải xuất hiện trước bất kỳ UI nào khác"

    không_nên_làm:
      - "Không dùng #635bff làm fill cho CTA button — primary action luôn là #010110; violet chỉ thuộc về announcement band và link contexts"
      - "Không đặt headlines bằng Inter ở 40px+ — custom serif (hoặc bản thay thế) là bắt buộc cho kích thước display"
      - "Không thêm drop shadows vào cards hoặc buttons — hệ thống dựa vào bề mặt phẳng, hairline borders, và sự thay đổi tông nền để phân cấp"
      - "Không giới thiệu thêm accent colors (xanh lá, xanh dương, cam) — bảng màu là đơn sắc cộng một violet, chấm hết"
      - "Không dùng letter-spacing trên -0.02em cho body text hoặc trên -0.03em cho display — hệ thống có tracking cực kỳ chặt"
      - "Không dùng dark surface palette (#111117, #22222a) trên các trang light-mode — dark là lựa chọn theo section, không phải theme toggle"
      - "Không pha trộn giá trị radius giữa 8px và 100px — cards và images nhận chính xác 8px, buttons và tags nhận chính xác 100px"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang chính, bề mặt chủ đạo |"
    info: "| 1 | Card | `#ffffff` | Product preview cards, dashboard panels — giống canvas với 8px radius và cấu trúc bên trong |"
    info: "| 2 | Subtle Wash | `#d9d9d9` | Decorative pattern overlay, hairline dividers, inactive states |"
    info: "| 3 | Carbon | `#111117` | Nền section dark mode — dải full-bleed |"
    info: "| 4 | Graphite | `#22222a` | Card nâng cao trong dark mode — một tông trên Carbon |"

  elevation:

    info: "Elevation được truyền đạt thông qua sự thay đổi tông nền và hairline borders, không bao giờ dùng shadows. Dark mode dùng stack hai tông (#111117 base → #22222a cards) để tạo chiều sâu. Light mode dựa vào sự tương phản giữa cards #ffffff và decorative patterns #d9d9d9. Sự phẳng này có chủ đích — nó giữ focus vào custom display typography."

  imagery:

    info: "Imagery tối thiểu và mang tính editorial: một abstract green/teal painted wash lớn duy nhất xuất hiện trong hero phía sau phone mockups, tạo ra kết cấu hữu cơ duy nhất trên trang. Dark feature section dùng 3D isometric line-art illustrations gần như đen trên nền gần đen (#333–#444 trên #22222a) — những hình này có tính hình học, kiến trúc, không vui tươi. Product mockups (phone và dashboard) được hiển thị ở góc nghiêng nhẹ, chồng lên abstract wash, với UI chân thực bên trong khung trắng. Iconography là monochrome outlined ở 16–20px, stroke weight 1.5px. Không photography, không lifestyle imagery, không decorative gradients."

  layout:

    info: "Nội dung căn giữa max-width 1200px với các dải nền full-bleed. Hero dùng split hai cột: nửa trái chứa headline (Favorit 56–76px), subtext (Inter 18px), và dual CTAs (filled + ghost, dạng pill); nửa phải chiếm ưu thế bởi abstract painted wash với phone và dashboard mockups chồng lên nhau. Bên dưới hero, một dải logo đối tác ngang trên nền trắng. Giữa trang chuyển sang dark section full-bleed với headline căn giữa và lưới feature card 3 cột. Footer trở lại nền trắng với dotted halftone pattern trên phần trên và lưới link 4 cột. Section gaps ~80px. Nhịp điệu layout xen kẽ trắng → dark band → trắng, với dark band là điểm ngắt tông duy nhất."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #010110 (Obsidian Ink)"
    - "background: #ffffff (Canvas)"
    - "border: #010110 ở 1px (hairline)"
    - "accent: #635bff (Iris Pulse — announcement bar và links chỉ)"
    - "muted text: #73737c (Fog)"
    - "primary action: #010110 (filled action)"

    info: "3-5 Example Component Prompts:"
    - "Tạo hero section: nền trắng #ffffff, căn giữa max-width 1200px. Headline ABC Favorit weight 400, 56px, #010110, letter-spacing -1.68px, line-height 1.07. Subtext Inter weight 400, 18px, #73737c. primary action: #010110 (filled action)"
    - "Tạo dark feature section: nền full-bleed #111117, headline căn giữa ABC Favorit weight 400, 38px, #ffffff, letter-spacing -1.14px. Bên dưới: lưới 3 cột dark feature cards. Mỗi card: nền #22222a, 8px radius, padding 24px. Isometric line-art icon ở trên với strokes #444444. Card heading Inter weight 500, 18px, #ffffff. Card body Inter weight 400, 14px, #73737c."
    - "Tạo top announcement bar: nền full-width #635bff, padding 10px 24px, text căn giữa Inter weight 500, 13px, #ffffff hiển thị thông báo. Inline pill link căn phải: transparent fill, 1px #ffffff border, #ffffff text 13px Inter, padding 6px 14px, radius 100px, kèm arrow glyph →."
    - "Tạo footer: nền trắng #ffffff với #d9d9d9 dotted halftone pattern ở độ mờ 20% phủ 60% trên cùng. Bên dưới: lưới 4 cột các nhóm link. Group headings Inter weight 700, 14px, #010110. Links Inter weight 400, 14px, #73737c, row-gap 10px. Hàng dưới cùng: copyright Inter 12px #73737c, social icons (16px, #010110) căn phải."
    - "Tạo navigation bar: nền trắng #ffffff, 1px bottom border #010110 ở độ mờ 15%, height 64px. Logo trái: chấm đen 8px + 'privy' Inter weight 700, 16px, #010110. Center nav: 4 items, mỗi item có icon 14px phía trên label Inter 13px, 10px row-gap, #010110. Cụm phải: 'Docs' và 'Demo' text links Inter 14px #010110, sau đó nút 'Log in' dạng ghost pill: transparent fill, 1px #010110 border, 15px Inter weight 500, padding 8px 18px, radius 100px."

  similar_brands:

    - "**Stripe** — Cùng bảng màu gần như đơn sắc với một accent color duy nhất, cùng custom-feeling display type, cùng pill buttons và bề mặt phẳng kiềm chế"
    - "**Linear** — Cả hai đều dùng một chromatic accent duy nhất trên nền đơn sắc, cả hai ưa chuộng custom display type hơn system fonts, cả hai giữ component phẳng và tối thiểu"
    - "**Vercel** — Cùng thẩm mỹ editorial-restraint: mặc định đen-trắng, typography tương phản cao, hairline borders, không decorative shadows"
    - "**Plaid** — Cùng định vị fintech infrastructure được thể hiện qua editorial type và bề mặt đơn sắc với một blue accent duy nhất"
    - "**Rainbow (Web3 wallet)** — Cùng audience crypto-infrastructure, cùng cách xử lý product-mockup-over-abstract-graphic hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas: #ffffff;
          --color-obsidian-ink: #010110;
          --color-carbon: #111117;
          --color-graphite: #22222a;
          --color-fog: #73737c;
          --color-ash: #d9d9d9;
          --color-iris-pulse: #635bff;
          --color-deep-teal: #072723;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit-variable: 'ABC Favorit Variable', 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-abc-favorit-unlicensed-trial: 'ABC Favorit Unlicensed Trial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.13;
          --tracking-heading-sm: -0.78px;
          --text-heading: 38px;
          --leading-heading: 1.15;
          --tracking-heading: -1.14px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -1.68px;
          --text-display: 76px;
          --leading-display: 1.03;
          --tracking-display: -2.28px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-70: 70px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-lg-2: 10.2px;
          --radius-3xl: 41px;
          --radius-full: 48px;
          --radius-full-2: 100px;
          --radius-full-3: 951px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-images: 8px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
          --surface-subtle-wash: #d9d9d9;
          --surface-carbon: #111117;
          --surface-graphite: #22222a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas: #ffffff;
          --color-obsidian-ink: #010110;
          --color-carbon: #111117;
          --color-graphite: #22222a;
          --color-fog: #73737c;
          --color-ash: #d9d9d9;
          --color-iris-pulse: #635bff;
          --color-deep-teal: #072723;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit-variable: 'ABC Favorit Variable', 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-abc-favorit-unlicensed-trial: 'ABC Favorit Unlicensed Trial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.13;
          --tracking-heading-sm: -0.78px;
          --text-heading: 38px;
          --leading-heading: 1.15;
          --tracking-heading: -1.14px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -1.68px;
          --text-display: 76px;
          --leading-display: 1.03;
          --tracking-display: -2.28px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-70: 70px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-lg-2: 10.2px;
          --radius-3xl: 41px;
          --radius-full: 48px;
          --radius-full-2: 100px;
          --radius-full-3: 951px;
        }