yellowbird____style_reference:
  info: "> Tấm biển quảng cáo sốt cà chua kiểu retro dưới nắng trưa — một mặt phẳng vàng dưới mặt trời đen, từng chữ được vẽ bằng bút dạ đậm."

  info: "Hệ thống thở qua tương phản màu sắc, không phải độ cao: vàng trên vàng được phân cách bởi các nét đen dày, với thẻ kem là điểm nghỉ trung tính duy nhất."

  theme: "light"

  info: "Yellowbird là một thế giới hai màu, dung lượng cao: một màu vàng tươi tràn ngập mọi section trong khi màu đen làm toàn bộ công việc cấu trúc và typography. Trang web mang phong cách như một tấm biển quảng cáo sốt vẽ tay — bề mặt phẳng, đường viền hairline dày thay vì đổ bóng, khoảng thở rộng rãi, và một custom display face chunky biến wordmark thành hero. Không có gradient depth, không glassmorphism, không xếp lớp card chồng card; sự phân cách không gian đến từ việc đổi màu (dải vàng → thẻ kem → nút đen) và padding rộng rãi. Interactive elements giữ ở mức tối thiểu và tự tin: hầu hết các bề mặt không có border trên nền vàng canvas, product cards dùng radius 30px và solid black stroke, và CTA thực sự duy nhất là nút pill đen đậm với chữ trắng. Màu xanh (#007aff) chỉ xuất hiện dưới dạng ghost-button border cho các hành động phụ, khiến nó có cảm giác như mượn tạm chứ không phải của riêng thương hiệu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Sunglow | `#ffe845` | `--color-sunglow` | Brand canvas — nền chủ đạo cho tất cả các section, hero, footer, và announcement bar; cũng dùng cho product category tags và sticker burst shapes |"
    info: "| Sauce Bottle Black | `#000000` | `--color-sauce-bottle-black` | Text chính, tất cả border và hairline, product card strokes, mascot linework, và nền của primary action button dạng filled — làm toàn bộ công việc cấu trúc và typography nặng nhọc |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Hairline borders, dividers, input outlines, và card edges trên bề mặt sáng. Không dùng làm màu CTA chính |"
    info: "| Buttermilk | `#fbfaf2` | `--color-buttermilk` | Bề mặt card thay thế cho các product tile ít nổi bật hơn — màu trắng ngà đọc như kem ấm trên nền vàng bão hòa |"
    info: "| Cool Link Blue | `#007aff` | `--color-cool-link-blue` | Ghost/outlined secondary action border — màu tiện ích mượn tạm cho các link ưu tiên thấp, không bao giờ dùng cho filled buttons hoặc primary navigation |"

  tokens___typography:

    gooper___signature_wordmark_display___logotype__yellowbird__khổng_lồ_và_bất_kỳ_display_heading_cỡ_lớn_nào__một_custom_display_face_bong_bóng__siêu_chunky__hoạt_động_như_biểu_tượng_của_thương_hiệu__tracking_chặt__0_028em_giữ_cho_các_form_tròn_không_bị_cảm_giác_lỏng_lẻo_ở_91px____font_gooper:
      - "**Thay thế:** Bagel Fat One, Fraunces 900, hoặc Bowlby One"
      - "**Weights:** 400, 700"
      - "**Cỡ chữ:** 91px"
      - "**Line height:** 1.05"
      - "**Letter spacing:** -0.0280em"
      - "**Vai trò:** Signature wordmark display — logotype 'Yellowbird' khổng lồ và bất kỳ display heading cỡ lớn nào; một custom display face bong bóng, siêu chunky, hoạt động như biểu tượng của thương hiệu. Tracking chặt (-0.028em) giữ cho các form tròn không bị cảm giác lỏng lẻo ở 91px"

    abc_monument_grotesk___primary_workhorse___nav_links__body_copy__product_names__section_headings__button_text__footer__và_hero_subhead__một_weight_duy_nhất_400_đảm_nhận_mọi_vai_trò_từ_caption_14px_đến_hero_subhead_61px__thống_nhất_bởi_negative_tracking_thắt_chặt_khi_cỡ_chữ_tăng__0_04em_ở_14px_đến__0_011em_ở_61px____font_abc_monument_grotesk:
      - "**Thay thế:** Inter, GT America, Söhne, hoặc General Sans"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 14px, 18px, 27px, 30px, 41px, 45px, 61px"
      - "**Line height:** 0.87, 0.90, 1.00, 1.10, 1.20, 1.30, 1.67"
      - "**Letter spacing:** -0.0400em, -0.0300em, -0.0140em, -0.0110em, -0.0070em, -0.0060em"
      - "**Vai trò:** Primary workhorse — nav links, body copy, product names, section headings, button text, footer, và hero subhead. Một weight duy nhất (400) đảm nhận mọi vai trò từ caption 14px đến hero subhead 61px, thống nhất bởi negative tracking thắt chặt khi cỡ chữ tăng (-0.04em ở 14px đến -0.011em ở 61px)"

    pitch_sans___secondary_utility___dùng_cho_badges__tags__micro_labels__và_supporting_metadata_khi_cần_cảm_giác_hơi_compact_hơn__weight_600_cho_badge_text_tạo_ra_sự_tương_phản_weight_duy_nhất_trong_hệ_thống____font_pitch_sans:
      - "**Thay thế:** Söhne, Inter, hoặc Untitled Sans"
      - "**Weights:** 400, 600"
      - "**Cỡ chữ:** 16px, 18px, 27px"
      - "**Line height:** 0.84, 1.00, 1.20, 1.30, 1.46"
      - "**Letter spacing:** -0.0310em, -0.0120em, -0.0110em, 0.0500em"
      - "**Vai trò:** Secondary utility — dùng cho badges, tags, micro-labels, và supporting metadata khi cần cảm giác hơi compact hơn. Weight 600 cho badge text tạo ra sự tương phản weight duy nhất trong hệ thống"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.2 | -0.56px | `--text-caption` |"
      info: "| body-sm | 16px | 1.3 | -0.18px | `--text-body-sm` |"
      info: "| body | 18px | 1.3 | -0.18px | `--text-body` |"
      info: "| subheading | 27px | 1.2 | -0.57px | `--text-subheading` |"
      info: "| heading | 41px | 1.1 | -0.45px | `--text-heading` |"
      info: "| heading-lg | 61px | 0.9 | -0.67px | `--text-heading-lg` |"
      info: "| display | 91px | 1.05 | -2.55px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 6px |"
      info: "| cards | 30px |"
      info: "| images | 30px |"
      info: "| buttons | 14px |"
      info: "| stickers | 36px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 20px"

  components:

    announcement_bar:
      vai_trò: "Thanh utility mỏng toàn site phía trên nav"

      info: "Nền #000000 full-width, cao ~36px, text trắng căn giữa Monument Grotesk 14px. Dùng cho shipping promos và trust signals. Không có padding ngoài căn giữa dọc."

    primary_navigation_header:
      vai_trò: "Nav chính của site neo ở đầu mỗi trang"

      info: "Nền #ffe845, full-bleed. Nav links căn trái (SHOP, ABOUT, FIND US) và utility links căn phải (SEARCH, LOG IN, CART) bằng Monument Grotesk 18px, #000000, all caps, letter-spacing -0.011em. Logo bird-mark đặt ở giữa dưới dạng inline icon nhỏ. Không nền, không border — nav nổi trên nền vàng canvas."

    hero_wordmark_block:
      vai_trò: "Tuyên bố thương hiệu above-the-fold thay thế headline+subhead+CTA điển hình"

      info: "Section #ffe845 full-bleed. Wordmark 'Yellowbird' Gooper 91px căn giữa, #000000, với mascot minh họa chim gai chồng lên phần trên của chữ. Không subtitle, không CTA — wordmark CHÍNH LÀ hero. Padding dọc ~80px trên và dưới."

    hero_subhead_paragraph:
      vai_trò: "Text giới thiệu dạng dài dưới hero wordmark"

      info: "Monument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, căn giữa, max-width ~900px. Chữ đen trên nền vàng — không có background card. Đây là running text lớn nhất trong hệ thống."

    product_card:
      vai_trò: "Tile thương mại chính cho các SKU sốt trong featured grid"

      info: "Nền trắng (#ffffff) hoặc kem (#fbfaf2), border 1.5–2px solid #000000, border-radius 30px. Padding trong ~24px. Ảnh sản phẩm căn giữa, category badge chồng lên trên ở giữa, tên sản phẩm Monument Grotesk 18–27px bên dưới. Không shadow — sự phân cách đến từ black stroke trên nền vàng."

    product_category_badge:
      vai_trò: "Label tag chồng lên product cards (CLASSIC, ORGANIC, SMALL BATCH)"

      info: "Nền #ffe845 với border 1.5px #000000, border-radius 6px, padding dọc ~15px và ngang ~18px. Pitch Sans 16px weight 600, #000000, all caps. Nằm ở trên cùng giữa của product card, hơi chồm lên mép card."

    primary_action_button:
      vai_trò: "CTA filled duy nhất — dùng cho SHOP ALL và checkout actions"

      info: "Nền #000000, text #ffffff, border-radius 14px, padding dọc ~15px và ngang ~18px. Monument Grotesk 18px weight 400, all caps, letter-spacing -0.011em. Không border, không shadow, không hover lift — nằm phẳng như một sticker trên nền vàng canvas."

    ghost_secondary_action:
      vai_trò: "Outlined secondary button cho các link ưu tiên thấp hơn"

      info: "Nền trong suốt, border 1.5px #007aff, border-radius 10px, padding dọc ~10px và ngang ~18px. Monument Grotesk 18px, text #007aff. Nơi duy nhất màu xanh xuất hiện trong hệ thống — coi xanh như utility mượn tạm, không phải brand."

    starburst_sticker:
      vai_trò: "Decorative seal/burst shape cho callouts và trust signals"

      info: "Nền #ffe845 với stroke #000000, border-radius 36px, xấp xỉ hình răng cưa vẽ tay. Monument Grotesk 18px, weight 400, #000000, all caps, xoay nhẹ (~5°). Dùng có chừng mực như một dấu chấm than thị giác — không bao giờ quá một cái mỗi viewport."

    testimonial_quote_block:
      vai_trò: "Dải quote khách hàng full-width"

      info: "Nền #ffe845, không card. Monument Grotesk 45px italic-feel weight 400, #000000, căn giữa, với dấu ngoặc kép mở/đóng hiển thị cực lớn. Attribution bằng Pitch Sans 16px, letter-spacing 0.05em (positive tracking duy nhất trong hệ thống), all caps, #000000. Carousel arrow controls nằm ở mép trái/phải bằng #000000."

    section_divider:
      vai_trò: "Dải phân cách ngang giữa các content bands"

      info: "Hairline 1px #000000 mỏng trải dài toàn bộ chiều rộng nội dung. Dùng có chừng mực — hầu hết sự phân cách section đến từ đổi màu, không phải đường kẻ thấy được."

    starburst_mascot_mark:
      vai_trò: "Icon thương hiệu nhỏ dùng ở giữa nav và testimonial accent"

      info: "Minh họa mặt chim hoạt hình lông gai bằng linework #000000, cao ~40px trong nav, lớn hơn trong testimonial accent. Không fill, không màu — mực đen thuần trên nền vàng."

  do_s_and_don_ts:

    nên:
      - "Dùng #ffe845 làm canvas full-bleed cho mọi section full-width — hero, product grids, testimonials, và footer đều nên nằm trên nền vàng, không bao giờ trên nền trắng hoặc xám"
      - "Đặt body và heading copy ở Monument Grotesk weight 400 duy nhất; hệ thống không có bold weight cho font này, vì vậy hierarchy đến từ kích thước và tracking, không phải weight"
      - "Dùng border-radius 30px cho tất cả product cards và images; 14px cho primary buttons; 6px cho category badges — ba radius này định hình ngôn ngữ shape"
      - "Phân cách section bằng đổi màu (dải vàng → thẻ kem → dải vàng), không phải bằng shadow hoặc divider — thiết kế cố tình phẳng"
      - "Chỉ dùng Gooper 91px display face cho wordmark và các tuyên bố thương hiệu tương đương; không bao giờ dùng cho product names, body, hoặc UI text"
      - "Định cỡ tất cả CTA bằng Monument Grotesk 18px all caps với tracking -0.011em — sự nhất quán trong button typography là một signature"
      - "Áp dụng pattern starburst sticker cho đúng một callout mỗi viewport — nó mất tác dụng nếu lặp lại"

    không_nên:
      - "Không bao giờ thêm màu sắc mới ngoài bộ vàng/đen/trắng/kem/xanh — sức mạnh của hệ thống là kỷ luật hai màu"
      - "Không bao giờ thêm drop shadows, inner glows, hoặc blur effects vào cards hoặc buttons — sự phân cách đến từ solid black strokes, không phải độ cao"
      - "Không bao giờ dùng màu xanh (#007aff) làm nền filled button hoặc cho navigation; nó chỉ là màu utility ghost-border"
      - "Không bao giờ dùng font weight nặng hơn 400 cho Monument Grotesk; font không có sẵn bold, và fake bold phá vỡ sự đồng đều hình học"
      - "Không bao giờ đặt body copy trên nền trắng trên nền vàng canvas mà không có bề mặt card — text nổi trên nền trắng trông hỏng; luôn dùng kem hoặc trắng thuần làm bề mặt card"
      - "Không bao giờ dùng positive letter-spacing cho body hoặc display text — positive tracking duy nhất (0.05em) chỉ dành cho Pitch Sans testimonial attributions"
      - "Không bao giờ giảm wordmark dưới 61px hoặc thay thế Gooper bằng standard display face; custom face bong bóng là element dễ nhận biết nhất của thương hiệu"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 1 | Sunglow Canvas | `#ffe845` | Nền trang full-bleed cho mọi section bao gồm hero, product grid, testimonial band, và footer |"
    info: "| 2 | Cream Card | `#fbfaf2` | Nền product tile thay thế cho các SKU ít nổi bật hơn |"
    info: "| 3 | White Card | `#ffffff` | Bề mặt product card chính nằm trên nền vàng canvas |"
    info: "| 4 | Black Button | `#000000` | Bề mặt action chính — pattern CTA filled duy nhất |"

  elevation:

    info: "Thiết kế cố tình tránh shadow. Sự phân cách không gian chỉ đạt được thông qua: (1) tương phản màu sắc — bề mặt vàng với white cards viền đen, (2) black strokes dày 1.5–2px solid trên tất cả các element nâng lên, và (3) padding rộng rãi. Không có z-axis hierarchy — hệ thống cố tình phẳng, đọc giống như bao bì in lụa hơn là một SaaS UI điển hình dùng depth. Thêm dù chỉ một shadow nhẹ cũng sẽ phá vỡ cảm giác poster in ấn định nghĩa thương hiệu."

  imagery:

    info: "Product photography chặt chẽ, căn giữa, và cách ly trên nền thẻ trắng thuần — chai được chụp thẳng diện, không có lifestyle context, không tay, không food pairings. Hero wordmark đi kèm với mascot chim hoạt hình linework đen vẽ tay (lông gai, mắt biểu cảm, không fill màu) hoạt động như tài sản thương hiệu phụ. Một hình sticker starburst vẽ tay với các cạnh răng cưa xuất hiện như con dấu trang trí. Không full-bleed photography, không video, không abstract gradients — imagery giới hạn ở: (1) ảnh sản phẩm nền trắng sạch, (2) minh họa mascot linework đen, và (3) starburst vẽ tay. Iconography hoàn toàn custom và dạng line-art, hiển thị bằng đen đặc trên nền vàng."

  layout:

    info: "Nền vàng canvas full-bleed không có max-width constraint trên background color. Nội dung max-width ~1280px căn giữa. Hero là stack wordmark căn giữa + mascot với subhead paragraph lớn bên dưới, tiếp theo là product card grid 3 cột (3 sản phẩm thấy được mỗi hàng ở desktop). Sections được phân cách bằng đổi màu thay vì divider hoặc thay đổi shadow — nhịp đọc là vàng → dải vàng-với-cream-cards → vàng → vàng. Navigation là một thanh ngang full-bleed duy nhất ở trên cùng, không có sticky behavior, không sidebar. Product grid dùng kích thước card đồng nhất với gutter bằng nhau. Bên dưới grid, nút SHOP ALL căn giữa đóng vai trò section closer. Dải testimonial theo sau ở full viewport width với carousel arrows ở cạnh, sau đó là footer. Vertical rhythm rộng rãi: ~80px giữa các section chính, ~24px giữa cards và các element bên trong card."

  agent_prompt_guide:

    quick_color_reference:
    - "Canvas: #ffe845"
    - "Text: #000000"
    - "Card surface: #ffffff"
    - "Alternate card: #fbfaf2"
    - "Border/stroke: #000000"
    - "Primary action: #ffe845 (filled action)"
    - "Secondary action: #007aff (outlined ghost border only)"

    3_5_example_component_prompts:

    - "**Product Card**: Nền trắng (#ffffff), border 1.5px solid #000000, border-radius 30px, padding 24px. Ảnh chai sốt căn giữa. Category badge chồng lên trên ở giữa: nền #ffe845, border 1.5px #000000, radius 6px, Pitch Sans 16px weight 600, all caps, #000000. Tên sản phẩm bên dưới bằng Monument Grotesk 27px, #000000, letter-spacing -0.011em."

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

    - "**Hero Subhead Paragraph**: Nền #ffe845 full-bleed, không card. Monument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, căn giữa, max-width 900px. Padding dọc ~80px trên và dưới."

    - "**Starburst Sticker**: Nền #ffe845, stroke 1.5px #000000, border-radius 36px với cạnh răng cưa vẽ tay, xoay ~5°. Monument Grotesk 18px, weight 400, #000000, all caps, căn giữa bên trong. Đặt ở góc trên bên phải viewport như một callout trang trí duy nhất."

    - "**Testimonial Quote Section**: Nền #ffe845 full-bleed. Monument Grotesk 45px, weight 400, #000000, căn giữa, với dấu ngoặc kép cỡ lớn. Attribution bằng Pitch Sans 16px, letter-spacing 0.05em, all caps, #000000, bên dưới quote. Carousel arrow controls bằng #000000 ở mép trái và phải."

  similar_brands:

    - "**HEATONIST** — Cùng bảng màu vàng-đen bão hòa cho thương hiệu sốt cay với custom display typography dày và product grids dạng card phẳng"
    - "**Cholula** — Branding sốt đậm với một màu thương hiệu chủ đạo, custom display wordmark, và mascot identity dạng flat illustration"
    - "**Omsom** — Thương hiệu thực phẩm packaging-forward tương phản cao dùng black strokes dày, màu canvas bão hòa, và ngôn ngữ component phẳng không shadow"
    - "**Fly By Jing** — Thương hiệu sốt cao cấp với mascot minh họa vui nhộn, custom display type cỡ lớn, và hệ thống nhận diện hai màu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sunglow: #ffe845;
          --color-sauce-bottle-black: #000000;
          --color-pure-white: #ffffff;
          --color-buttermilk: #fbfaf2;
          --color-cool-link-blue: #007aff;
        
          /* Typography — Font Families */
          --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-monument-grotesk: 'ABC Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pitch-sans: 'Pitch Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: -0.56px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.3;
          --tracking-body: -0.18px;
          --text-subheading: 27px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.57px;
          --text-heading: 41px;
          --leading-heading: 1.1;
          --tracking-heading: -0.45px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -0.67px;
          --text-display: 91px;
          --leading-display: 1.05;
          --tracking-display: -2.55px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 30px;
          --radius-3xl-2: 36px;
        
          /* Named Radii */
          --radius-tags: 6px;
          --radius-cards: 30px;
          --radius-images: 30px;
          --radius-buttons: 14px;
          --radius-stickers: 36px;
        
          /* Surfaces */
          --surface-sunglow-canvas: #ffe845;
          --surface-cream-card: #fbfaf2;
          --surface-white-card: #ffffff;
          --surface-black-button: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sunglow: #ffe845;
          --color-sauce-bottle-black: #000000;
          --color-pure-white: #ffffff;
          --color-buttermilk: #fbfaf2;
          --color-cool-link-blue: #007aff;
        
          /* Typography */
          --font-gooper: 'Gooper', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-monument-grotesk: 'ABC Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pitch-sans: 'Pitch Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: -0.56px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: -0.18px;
          --text-body: 18px;
          --leading-body: 1.3;
          --tracking-body: -0.18px;
          --text-subheading: 27px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.57px;
          --text-heading: 41px;
          --leading-heading: 1.1;
          --tracking-heading: -0.45px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -0.67px;
          --text-display: 91px;
          --leading-display: 1.05;
          --tracking-display: -2.55px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-xl: 14px;
          --radius-3xl: 30px;
          --radius-3xl-2: 36px;
        }