ditto___style_reference:
  info: "> Xưởng tuân thủ hoa dại ngập nắng. Bề mặt kem ấm, hành động chính vàng rực, mực xanh navy đậm, các mảng màu hữu cơ nở phía sau sản phẩm."

  theme: "light"

  info: "Ditto sử dụng ngôn ngữ SaaS lấy cảm hứng từ khu vườn ngập nắng: nền canvas kem ấm, các đốm trang trí hữu cơ màu xanh lá, hồng và vàng rực, cùng sự kết hợp tự tin giữa serif ấm áp (Hedvig Letters) cho headline và grotesque sạch sẽ (Inter) cho mọi thứ còn lại. Màu navy-violet đậm #130e30 đảm nhận toàn bộ text cấu trúc và đường viền, trong khi một màu vàng sáng duy nhất #ffe228 làm nền cho mọi hành động chính — độ tương phản cao đến mức gần giống như bút highlight. Các component giữ phong cách nhẹ nhàng: button hình pill (bán kính 1440px), card đệm rộng rãi trên bề mặt hơi pha xanh lá (#eff2e5), và độ nâng tối thiểu. Tâm trạng lạc quan và dễ tiếp cận, không mang tính doanh nghiệp hay lâm sàng — các hình khối hoa lá nền, headline serif và tông trung tính ấm giữ cho thiết kế mang hơi thở con người."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Deep Ink | `#130e30` | `--color-deep-ink` | Màu text chính, heading ink, viền card, nền button phụ — gần đen pha violet tạo cảm giác ấm hơn so với đen thuần |"
    info: "| Hi-Yellow | `#ffe228` | `--color-hi-yellow` | Nền hành động chính (CTA button dạng filled), nền hero pill, điểm nhấn — vàng highlighter sáng với text gần đen để đạt độ tương phản tối đa |"
    info: "| Moss Green | `#59e25d` | `--color-moss-green` | Mảng trang trí hữu cơ phía sau hero — xanh lá cây ấm dùng trong các blob nền, không phải UI controls |"
    info: "| Fuchsia | `#e261e5` | `--color-fuchsia` | Mảng trang trí hữu cơ phía sau hero — hồng rực dùng trong các blob nền, không phải UI controls |"
    info: "| Slate | `#5f5c6e` | `--color-slate` | Body text, helper copy, icon muted, viền mờ — xám bão hòa lạnh dùng cho thông tin phụ |"
    info: "| Canvas | `#f9fbf2` | `--color-canvas` | Nền trang, button ghost fills, bề mặt sáng nhất — gần trắng pha chút xanh lá ấm |"
    info: "| Soft Meadow | `#eff2e5` | `--color-soft-meadow` | Bề mặt card, nền nav, panel nâng cao, nền hero — trắng ngà pha xanh lá để phân tách bề mặt mềm mại |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Text và viền button tối phụ, divider nav — mềm hơn đen thuần cho UI tối |"
    info: "| Onyx | `#000000` | `--color-onyx` | Logo mark, text nav, viền input, chi tiết nét mảnh — đen thật cho độ tương phản cao nhất |"

  tokens___typography:

    hedvig_letters_serif___display_và_heading_serif___tất_cả_headline_hero_section__dùng_ở_kích_thước_lớn_với_letter_spacing_dày__serif_nhân_văn_ấm_áp_là_giọng_nói_của_thương_hiệu__nó_mang_đến_cho_sản_phẩm_tuân_thủ_một_chất_văn_chương__đáng_tin_cậy_thay_vì_cảm_giác_saas_vô_cảm__weight_700_đảm_nhận_headline__weight_400_xuất_hiện_trong_các_ngữ_cảnh_pull_quote_lớn_hơn_____font_hedvig_letters_serif:
      - "**Thay thế:** DM Serif Display, Source Serif 4, Libre Caslon Text"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 22px, 32px, 48px, 64px"
      - "**Line height:** 1.00–1.25"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Display và heading serif — tất cả headline hero/section, dùng ở kích thước lớn với letter-spacing dày. Serif nhân văn ấm áp là giọng nói của thương hiệu; nó mang đến cho sản phẩm tuân thủ một chất văn chương, đáng tin cậy thay vì cảm giác SaaS vô cảm. Weight 700 đảm nhận headline, weight 400 xuất hiện trong các ngữ cảnh pull-quote lớn hơn."

    inter___tất_cả_ui_và_body_text___link_nav__label_button__form_field__card_copy__footer_text__small_caps_labels__inter_xử_lý_lớp_chức_năng_với_hiệu_suất_trung_tính__để_serif_đảm_nhận_cá_tính__weight_500_cho_nav_và_label__400_cho_body__600_cho_nhấn_mạnh_____font_inter:
      - "**Thay thế:** Inter có sẵn miễn phí qua Google Fonts; không cần thay thế"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 10px, 14px, 16px, 18px, 22px"
      - "**Line height:** 1.20–1.50"
      - "**Letter spacing:** -0.01em body, -0.02em small caps labels"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Tất cả UI và body text — link nav, label button, form field, card copy, footer text, small caps labels. Inter xử lý lớp chức năng với hiệu suất trung tính, để serif đảm nhận cá tính. Weight 500 cho nav và label, 400 cho body, 600 cho nhấn mạnh."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | -0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.25 | -0.22px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.15 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -0.48px | `--text-heading-lg` |"
      info: "| display | 64px | 1 | -0.64px | `--text-display` |"

  tokens___spacing___shapes:

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

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

    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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 1440px |"
      info: "| tags | 1440px |"
      info: "| cards | 24px |"
      info: "| icons | 1440px |"
      info: "| images | 24-48px |"
      info: "| buttons | 1440px |"

    layout:

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

  components:

    primary_cta_button_filled_yellow:
      vai_trò: "Kích hoạt hành động chính — 'Get Started', 'Log In', 'Read More'"

      info: "Nền #ffe228, text #130e30 trong Inter 500 cỡ 16px. Bán kính pill đầy đủ 1440px. Padding 12px 24px. Không đổ bóng. Text đen trên nền vàng đạt độ tương phản 16.2:1. Màu vàng sáng đến mức hoạt động như bút highlight; tối đa một cái trên mỗi viewport."

    secondary_button_dark_pill:
      vai_trò: "Hành động thay thế — dùng cho 'Log In' cạnh primary CTA"

      info: "Nền #130e30, text #ffffff trong Inter 500 cỡ 16px. Bán kính pill đầy đủ 1440px. Padding 12px 22px. Tạo cặp button tối/sáng với primary yellow để phân cấp thị giác."

    email_input_field:
      vai_trò: "Form thu thập email hero"

      info: "Nền trắng #ffffff, viền 1px solid #000000, text #130e30 trong Inter 400 cỡ 16px. Placeholder text màu Slate #5f5c6e. Bán kính pill 1440px — input và button kề nhau chia sẻ cùng bán kính tạo thành một capsule liên tục. Padding 12px 22px."

    logo_lockup:
      vai_trò: "Nhận diện thương hiệu trong nav và footer"

      info: "Mark + wordmark 'ditto' màu #130e30. Mark sử dụng hình lá/cánh hoa gợi nhớ các đốm trang trí hữu cơ. Luôn đi kèm với layout nav, không bao giờ đứng một mình."

    nav_bar:
      vai_trò: "Điều hướng cấp cao nhất của site"

      info: "Nền #eff2e5, layout ngang với logo trái, link nav giữa (Inter 500 16px màu #130e30), cặp CTA phải. Các mục nav được phân cách bằng icon chevron-down cho dropdown. Icon globe cho ngôn ngữ. Không đổ bóng, nằm sát trên canvas."

    hero_card___product_mockup_container:
      vai_trò: "Trưng bày UI sản phẩm với nền blob trang trí"

      info: "Card sản phẩm trắng nằm trên các hình khối hữu cơ màu sắc (xanh lá, hồng, vàng, violet). Card có border-radius nhẹ 24px. Phía sau, các blob dạng SVG hữu cơ màu #59e25d, #e261e5, #ffe228 và #130e30 tạo bầu không khí như khu vườn mà không cần illustration."

    feature_card:
      vai_trò: "Card nội dung trong grid 'Get compliant four times faster'"

      info: "Nền #eff2e5, padding 24-48px, border-radius 24px. Chứa logo mark nhỏ ở trên, heading Hedvig Letters Serif cỡ 22-32px màu #130e30, và body text Inter 16px màu #5f5c6e. Không đổ bóng hay viền — chỉ riêng độ tương phản bề mặt đã định nghĩa card."

    customer_logo_card:
      vai_trò: "Hàng trưng bày khách hàng"

      info: "Logo căn giữa trên nền #eff2e5, padding 24px, radius 24px. Bên dưới mỗi logo, link 'CASE STUDY' dạng small-caps trong Inter 500 10px kèm chevron. Logo hiển thị đơn sắc màu #130e30."

    testimonial_card:
      vai_trò: "Carousel trích dẫn khách hàng"

      info: "Nền #eff2e5, padding 32px, radius 24px. Text trích dẫn lớn trong Hedvig Letters Serif cỡ 22-32px hoặc Inter 18px màu #130e30. Avatar + tên (Inter 500 14px #130e30) + chức danh (Inter 400 12px #5f5c6e) ở dưới cùng. Carousel ngang với điều khiển mũi tên."

    pagination_dot:
      vai_trò: "Chỉ báo vị trí carousel/slider"

      không_hoạt_động: "đường/rectangle nhỏ màu #5f5c6e. Đang hoạt động: pill Hi-Yellow #ffe228. Căn giữa bên dưới carousel."

    small_caps_label:
      vai_trò: "Micro-copy phía trên section, thẻ case study, eyebrow nav"

      info: "Inter 500 cỡ 10-12px, letter-spacing -0.02em, màu #5f5c6e hoặc #130e30. Viết hoa toàn bộ. Dùng có chọn lọc như label phân loại, không phải trang trí."

    hero_headline:
      vai_trò: "Tiêu đề chính của trang — 'Get the CSR recognition you deserve'"

      info: "Hedvig Letters Serif weight 700 cỡ 48-64px, line-height 1.0-1.1, letter-spacing -0.01em, màu #130e30. Lấp đầy cột trái của hero hai cột với product mockup ở bên phải."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng bán kính pill 1440px trên mọi button, input, link nav, tag và icon container — hình pill là signature geometry của thương hiệu"
      - "Kết hợp CTA vàng #ffe228 với pill tối #130e30 để phân cấp button; không bao giờ đặt hai button vàng cạnh nhau"
      - "Chỉ dùng Hedvig Letters Serif cho heading ≥22px và Inter cho mọi thứ dưới mức đó; không bao giờ dùng Inter cho heading hay Hedvig cho body copy"
      - "Đặt body text màu #130e30 (không phải đen thuần) để tạo cảm giác ấm; dành #000000 cho logo mark, viền input và chi tiết nét mảnh có độ tương phản cao"
      - "Xây dựng chồng bề mặt theo thứ tự Canvas #f9fbf2 → Soft Meadow #eff2e5 cards; sắc xanh lá nhẹ là có chủ đích và cần được giữ nguyên"
      - "Chỉ dùng các blob trang trí hữu cơ (xanh lá #59e25d, fuchsia #e261e5, vàng #ffe228, violet #130e30) làm bầu không khí nền phía sau hero/visual sản phẩm — không bao giờ dùng làm UI fills hay icon colors"
      - "Thắt chặt letter-spacing xuống -0.01em trên tất cả heading và -0.02em trên small caps labels để có cảm giác headline văn chương ấm áp"

    không_nên_làm:
      - "Không dùng góc nhọn (<16px) trên button, input hay nav items — pill là bắt buộc"
      - "Không thêm màu nhấn bổ sung vào UI; xanh lá, hồng và fuchsia chỉ dùng trang trí và không được xuất hiện trong button, badge hay status indicator"
      - "Không dùng trắng thuần #ffffff cho bề mặt card khi Soft Meadow #eff2e5 là lớp card được chỉ định"
      - "Không đặt hai primary CTA vàng trong cùng một viewport; xen kẽ với dark pill để phân cấp"
      - "Không dùng Inter cho display headline hay Hedvig Letters Serif cho UI labels — ranh giới vai trò font là nghiêm ngặt"
      - "Không thêm drop shadow cho card hay button; sự phân biệt bề mặt đến từ lớp #eff2e5 pha xanh lá, không phải độ nâng"
      - "Không dùng nav Slate #5f5c6e cho primary body text — nó chỉ dành cho muted copy và helper text"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f9fbf2` | Nền trang, lớp ngoài cùng |"
    info: "| 1 | Soft Meadow | `#eff2e5` | Bề mặt card, nav bar, nền hero, panel nâng cao |"
    info: "| 2 | Hi-Yellow Accent | `#ffe228` | Bề mặt hành động chính — CTA buttons và highlight pills |"
    info: "| 3 | Deep Ink | `#130e30` | Bề mặt tương phản/chế độ tối — không dùng full page nhưng có sẵn cho section tối hoặc component đảo ngược |"

  imagery:

    info: "Ảnh chụp màn hình UI sản phẩm là tài sản hình ảnh chính — hiển thị bên trong card trắng nổi trên các hình khối blob màu sắc hữu cơ (xanh lá, fuchsia, vàng, violet). Các blob phẳng, không đều và chồng lấn, tạo cảm giác vườn cỏ làm mềm bối cảnh tuân thủ/B2B. Nhiếp ảnh xuất hiện trong các divider section (cảnh ngoài trời đô thị với cây cối và kiến trúc, bão hòa cao). Logo khách hàng đơn sắc trong dải tin cậy ngang. Iconography tối giản dạng line-style, không có màu sắc. Không có 3D renders hay illustration người — bản sắc thị giác trừu tượng, hữu cơ và tập trung vào sản phẩm."

  layout:

    info: "Container căn giữa max-width 1200px với padding hai bên rộng rãi. Hero chia hai cột: cột trái chứa headline, subtext, email input kèm CTA và badge Trustpilot; cột phải chứa product mockup card với nền blob hữu cơ. Bên dưới hero, dải logo khách hàng trust strip nằm trên Soft Meadow. Các section xen kẽ giữa nền canvas trắng và dải Soft Meadow, cách nhau bằng khoảng trống dọc 48-80px. Feature grids dùng 3 cột bằng nhau. Testimonials là carousel ngang với 3 card hiển thị. Navigation là top bar đơn giản, không sticky. Layout thoáng — không có block dày đặc thông tin, mọi section đều có lề whitespace."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text (primary): #130e30"
    - "text (muted): #5f5c6e"
    - "background (page): #f9fbf2"
    - "background (card): #eff2e5"
    - "border: #130e30"
    - "accent (decorative blobs only): #ffe228, #59e25d, #e261e5"
    - "primary action: #ffe228 (filled action)"

    ví_dụ_component_prompts:

    - "Tạo Primary Action Button: nền #ffe228, text #222222, radius 9999px, padding pill nhỏ gọn. Dùng dạng filled này cho CTA chính."

    - "**Feature Grid Card**: Nền #eff2e5, border-radius 24px, padding 32px. Logo đối tác nhỏ (40px) ở góc trên-trái. Heading trong Hedvig Letters Serif 700 22px #130e30, line-height 1.25. Body trong Inter 400 16px #5f5c6e."

    - "**Top Navigation Bar**: Nền #eff2e5, flex ngang với logo trái, link nav giữa (Inter 500 16px #130e30 kèm icon chevron-down), bên phải có dark pill button nền #130e30 / text trắng 'Log In' và yellow filled button nền #ffe228 / text #130e30 'Get Started', cả hai đều pill radius 1440px, padding 12px 22px."

    - "**Testimonial Carousel Card**: Nền #eff2e5, radius 24px, padding 32px. Trích dẫn trong Inter 400 18px #130e30, line-height 1.5. Block tác giả ở dưới: avatar tròn 40px + tên trong Inter 500 14px #130e30 + chức danh trong Inter 400 12px #5f5c6e."

    - "**Customer Logo Trust Strip**: Dải Soft Meadow #eff2e5 full-width, padding dọc 48px. Hàng ngang gồm 8 logo khách hàng đơn sắc màu #130e30, mỗi logo phía trên có link 'CASE STUDY' dạng small-caps trong Inter 500 10px #5f5c6e kèm chevron phải."

  decoration_vs_interface_color_boundary:

    info: "Các màu #59e25d (moss green) và #e261e5 (fuchsia) chỉ tồn tại trong các hình khối blob hữu cơ phía sau hero product card. Chúng không bao giờ được xuất hiện trong button, badge, tag, icon hay bất kỳ element UI chức năng nào. Ngoại lệ duy nhất là màu vàng #ffe228, vừa là màu blob trang trí vừa là primary CTA fill — nó là cầu nối giữa trang trí và giao diện. Vai trò kép này có chủ đích: màu vàng xuất hiện trong bầu không khí trước khi người dùng tương tác, sau đó trở thành màu hành động họ click."

  surface_temperature:

    info: "Các tông trắng ngà không phải trắng trung tính — #f9fbf2 có ánh xanh lá ấm nhẹ và #eff2e5 là bề mặt đồng cỏ pha xanh lá rõ rệt. Nền canvas ấm này là cốt lõi của cảm giác hữu cơ, lấy cảm hứng từ khu vườn của thương hiệu. Không thay thế bằng #ffffff thuần hay xám trung tính. Hai tông bề mặt tạo đủ sự phân tách cho card mà không cần viền hay đổ bóng."

  similar_brands:

    - "**Sweep (sweep.net)** — Cùng nền canvas kem ấm, hình khối blob trang trí hữu cơ phía sau UI sản phẩm, kết hợp serif headline + sans body, và cặp CTA pill vàng/tối"
    - "**Watershed (watershed.com)** — Lĩnh vực bền vững/tuân thủ với bề mặt sáng, điểm nhấn hữu cơ mềm mại và một màu highlight sáng duy nhất cho CTA"
    - "**Klim (klim.co)** — SaaS liên quan CSR với nền kem, display type serif, pill buttons và element trang trí lấy cảm hứng từ thiên nhiên"
    - "**Notion** — Nền trắng ngà sáng, Inter cho body type, button hình pill và card elevation tối thiểu — chia sẻ lớp nền dễ tiếp cận, không doanh nghiệp"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-ink: #130e30;
          --color-hi-yellow: #ffe228;
          --color-moss-green: #59e25d;
          --color-fuchsia: #e261e5;
          --color-slate: #5f5c6e;
          --color-canvas: #f9fbf2;
          --color-soft-meadow: #eff2e5;
          --color-charcoal: #222222;
          --color-onyx: #000000;
        
          /* Typography — Font Families */
          --font-hedvig-letters-serif: 'Hedvig Letters Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: -0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.22px;
          --text-heading: 32px;
          --leading-heading: 1.15;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.48px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -0.64px;
        
          /* 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-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-80px;
          --card-padding: 24-48px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 1440px;
        
          /* Named Radii */
          --radius-nav: 1440px;
          --radius-tags: 1440px;
          --radius-cards: 24px;
          --radius-icons: 1440px;
          --radius-images: 24-48px;
          --radius-buttons: 1440px;
        
          /* Surfaces */
          --surface-canvas: #f9fbf2;
          --surface-soft-meadow: #eff2e5;
          --surface-hi-yellow-accent: #ffe228;
          --surface-deep-ink: #130e30;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-ink: #130e30;
          --color-hi-yellow: #ffe228;
          --color-moss-green: #59e25d;
          --color-fuchsia: #e261e5;
          --color-slate: #5f5c6e;
          --color-canvas: #f9fbf2;
          --color-soft-meadow: #eff2e5;
          --color-charcoal: #222222;
          --color-onyx: #000000;
        
          /* Typography */
          --font-hedvig-letters-serif: 'Hedvig Letters Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: -0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.22px;
          --text-heading: 32px;
          --leading-heading: 1.15;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.48px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -0.64px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 1440px;
        }