textla___style_reference:
  info: "> Cuốn niên giám thực vật cổ điển ngập nắng — trang giấy kem-vàng in mực xanh rừng sâu, minh họa bằng nét vẽ xương rồng, đóng dấu với bóng đổ offset cứng."

  theme: "light"

  info: "Textla khoác lên sản phẩm SMS marketing vỏ bọc của một cuốn niên giám thực vật cổ điển ngập nắng: nền canvas kem-vàng ấm áp (#f2ee98) làm chủ mọi trang, với xanh rừng sâu (#10380b) đảm nhận vai trò mực in, đường viền, bóng đổ và brand mark. Typography là giọng nói nổi bật nhất — một condensed display face (National 2 Condensed) dẫn dắt các headline in nghiêng cỡ lớn lên đến 180px, trong khi một sans-serif đậm (RethinkSans, 600-800) xử lý toàn bộ UI ở 16-20px, mang đến cho hệ thống sự tự tin của một tấm poster in ấn. Các component nghiêng về phong cách neobrutalist: bóng đổ offset cứng 8px bằng brand green, pill controls 1440px, card bo tròn 40px, và star rating màu vàng marigold rực rỡ. Minh họa nét vẽ tay về xương rồng, mây và hình người sa mạc lấp đầy khoảng trống âm, khiến sản phẩm giống một cuốn field guide cổ điển hơn là một dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Sunlit Cream | `#f2ee98` | `--color-sunlit-cream` | Page canvas và section background — lớp nền ánh sáng sa mạc ấm áp, tạo nên tâm trạng thực vật cho toàn hệ thống |"
    info: "| Forest Ink | `#10380b` | `--color-forest-ink` | Primary text, pill button fill, icon stroke, hard offset shadow và brand mark — một màu xanh đậm duy nhất đảm nhận 80% công việc cấu trúc |"
    info: "| Marigold | `#fce519` | `--color-marigold` | Yellow state accent cho badge, validation surface và status label ngắn. Không nâng cấp lên làm primary CTA color |"
    info: "| Sage Wash | `#dbe8ac` | `--color-sage-wash` | Muted card và surface tint — một màu xanh thực vật nhẹ dùng để phân biệt panel tinh tế trên nền cream canvas |"
    info: "| Vivid Fern | `#30be60` | `--color-vivid-fern` | Green outline accent cho tag, divider và focused UI edge. Không nâng cấp lên làm primary CTA color |"
    info: "| Parchment | `#fefde6` | `--color-parchment` | Lighter card surface nằm cao hơn Sunlit Cream một bậc — dùng cho product mockup card, testimonial card và elevated panel |"
    info: "| Snowcap | `#ffffff` | `--color-snowcap` | Pure white cho text tương phản cao trên nền Forest Ink và cho icon stroke mảnh bên trong product UI mockup |"

  tokens___typography:

    national_2_condensed___display_and_heading_face___headline_condensed_cỡ_lớn_lên_đến_180px_dẫn_dắt_nhận_diện_thị_giác_kiểu_poster__letter_spacing__0_03em_ở_mọi_kích_thước__line_height_rất_chặt_0_8_ở_display_weight__tạo_hiệu_ứng_headline_xếp_chồng_nén_chặt__hero__unbeatable__xuất_hiện_ở_italic_800_____font_national_2_condensed:
      - "**Thay thế:** Bebas Neue, Oswald, Antonio"
      - "**Weights:** 600, 700, 800"
      - "**Kích thước:** 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 86px, 104px, 156px, 180px"
      - "**Line height:** 0.80–1.30"
      - "**Letter spacing:** -0.03em"
      - "**Vai trò:** Display and heading face — headline condensed cỡ lớn lên đến 180px dẫn dắt nhận diện thị giác kiểu poster. Letter-spacing -0.03em ở mọi kích thước, line-height rất chặt 0.8 ở display weight, tạo hiệu ứng headline xếp chồng nén chặt. Hero 'Unbeatable' xuất hiện ở italic 800."

    rethinksans___body_and_ui_face___đã_bắt_đầu_ở_weight_600__nên_không_có_light_weight_nào_tồn_tại__hệ_thống_coi_type_như_một_yếu_tố_cấu_trúc__16px_cho_nav_và_small_ui__18px_cho_body__20px_cho_emphasized_body__line_height_1_0_cho_inline_icon_badge__1_5_1_71_cho_đoạn_văn_dễ_đọc_____font_rethinksans:
      - "**Thay thế:** Inter, Manrope, Plus Jakarta Sans"
      - "**Weights:** 600, 700, 800"
      - "**Kích thước:** 16px, 18px, 20px"
      - "**Line height:** 1.00–1.71"
      - "**Vai trò:** Body and UI face — đã bắt đầu ở weight 600, nên không có light weight nào tồn tại. Hệ thống coi type như một yếu tố cấu trúc: 16px cho nav và small UI, 18px cho body, 20px cho emphasized body. Line-height 1.0 cho inline icon/badge, 1.5-1.71 cho đoạn văn dễ đọc."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 24 | — | `--text-caption` |"
      info: "| body | 18px | 28 | — | `--text-body` |"
      info: "| subheading | 20px | 32 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 30 | -0.72px | `--text-heading-sm` |"
      info: "| heading | 32px | 38 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 56px | 62 | -1.68px | `--text-heading-lg` |"
      info: "| display | 86px | 70 | -2.58px | `--text-display` |"
      info: "| display-xl | 180px | 144 | -5.4px | `--text-display-xl` |"

  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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 16px |"
      info: "| tags | 40px |"
      info: "| cards | 40px |"
      info: "| badges | 1440px |"
      info: "| images | 40px |"
      info: "| inputs | 1440px |"
      info: "| buttons | 1440px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(16, 56, 11) 8px 8px 0px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    marigold_pill_cta:
      vai_trò: "Primary hero action button — nút filled đặc trưng trong hero section"

      info: "Pill radius 1440px, nền #fce519 (Marigold), text #10380b (Forest Ink) ở 16-18px RethinkSans weight 700, padding 12px 28px. Có thể thêm margin 4px cho ghost sibling button. Không shadow."

    forest_pill_button:
      vai_trò: "Primary dark action button dùng trên nền sáng"

      info: "Pill radius 1440px, nền #10380b (Forest Ink), text #f2ee98 (Sunlit Cream) ở 16-18px RethinkSans weight 700, padding 12px 28px."

    ghost_text_button:
      vai_trò: "Secondary inline action đặt cạnh filled CTA"

      info: "Không nền, không border, text #10380b (Forest Ink) ở 16-18px RethinkSans weight 600, kèm icon chevron. Padding 8px 4px."

    outlined_call_button:
      vai_trò: "Phone number CTA trong nav"

      info: "Pill radius 1440px, border 1px solid #10380b (Forest Ink), fill trong suốt, text Forest Ink kèm icon điện thoại. Padding 8px 20px."

    parchment_testimonial_card:
      vai_trò: "Customer quote card trên nền cream"

      info: "Nền #fefde6 (Parchment), border-radius 40px, padding 24-40px. Chứa avatar (hình tròn), tên ở 20px RethinkSans 700, role ở 16px weight 600, quote ở 24-32px National 2 Condensed weight 700 Forest Ink. Có thể thêm hard offset shadow `8px 8px 0 0 #10380b`."

    product_dashboard_card:
      vai_trò: "Hero product UI mockup và ảnh chụp màn hình nhúng"

      info: "Nền trắng hoặc #fefde6 (Parchment), border-radius 40px, border 1px solid #10380b, hard offset shadow 8px 8px 0 0 Forest Ink. Header pill số điện thoại màu xanh đậm, stat block với ba số condensed cỡ lớn (Campaigns/Messages/Subscribers), danh sách campaign row kèm status badge."

    status_pill_badge:
      vai_trò: "Campaign status indicator (One-time, Recurring, Sending Monday, v.v.)"

      info: "Radius 1440px hoặc 40px, padding nhỏ 4px 12px, 14-16px RethinkSans weight 700. Hai biến thể màu: Forest Ink fill với Sunlit Cream text cho trạng thái mặc định; Marigold fill với Forest Ink text cho trạng thái active/highlight."

    star_rating_display:
      vai_trò: "Năm sao social proof element"

      info: "Năm icon sao fill #fce519 (Marigold), kích thước 16-20px, nhóm chặt. Luôn đi kèm nhãn 'Five star rating' ở RethinkSans 16px weight 600 Forest Ink."

    feature_list_item:
      vai_trò: "Danh sách onboarding ba bước với icon hình tròn"

      info: "Container icon hình tròn 40px với fill Marigold và icon line-art tối, gap 24px đến nhãn. Nhãn ở 24-32px National 2 Condensed weight 700 Forest Ink, có thể thêm subtext ở 16px RethinkSans 600."

    g2_leader_ribbon:
      vai_trò: "Third-party award badge cho testimonial card"

      info: "Ribbon gradient đỏ/cam với text trắng 'Leader' và nhãn 'SUMMER 2025', radius 0px ở góc trên, cạnh dưới nhọn. Nằm chồng lên góc trên bên phải testimonial card."

    stat_counter_bar:
      vai_trò: "Dải thống kê social proof ở cuối trang"

      info: "Band full-width, nền #fce519 (Marigold), grid 4 cột. Mỗi stat: số lớn ở 48-64px National 2 Condensed 800 Forest Ink, nhãn ở 18-20px RethinkSans 600 Forest Ink. Vertical padding 80px."

    video_testimonial_frame:
      vai_trò: "Card video khách hàng nhúng"

      khung_video_16: "9 hoặc 4:3, radius 40px, border 1px Forest Ink, hard offset shadow. Chú thích bên dưới: tên ở 24px National 2 Condensed 700, role ở 16px RethinkSans 600, hàng star rating màu Marigold."

    chat_bubble_card:
      vai_trò: "Minh họa hội thoại SMS trong feature section"

      info: "Nền trắng, radius 40px với một góc bo tròn hơn (bất đối xứng để tạo đuôi hội thoại), padding 16-24px. Tin nhắn người gửi ở 16px RethinkSans 600 Forest Ink, tin nhắn trả lời cùng font trên bubble xanh đậm với text cream. Avatar hình tròn kèm chữ cái đầu."

    navigation_bar:
      vai_trò: "Header trên cùng với logo, link và dual CTA"

      info: "Trong suốt trên canvas, nav link 16px ở RethinkSans 600 Forest Ink với gap 24-32px. Bên phải: outlined phone button + Marigold 'Try for free' pill. Logo là wordmark xanh đậm kèm icon mark nhỏ."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #10380b (Forest Ink) cho mọi body text, border, icon và primary action fill — đây là màu mực duy nhất của hệ thống"
      - "Áp dụng hard offset shadow 8px 8px 0 0 #10380b cho elevated card và product mockup, không bao giờ cho button hoặc input"
      - "Sử dụng National 2 Condensed ở 56px+ cho headline, giữ nguyên letter-spacing -0.03em ở mọi kích thước"
      - "Ghép mỗi filled pill CTA với một ghost text-link sibling để tạo nhịp hai nút (filled + chevron text)"
      - "Dùng #f2ee98 (Sunlit Cream) làm page canvas trên mọi section mặc định; chỉ dùng #fefde6 (Parchment) cho card surface cần nâng lên một bậc"
      - "Dùng #fce519 (Marigold) một cách tiết kiệm — chỉ cho star rating, hero CTA và decorative icon accent — không bao giờ dùng cho body text hoặc fill lớn"
      - "Giữ tất cả button radius ở 1440px (full pill) và tất cả card/image radius ở 40px — cặp radius này định nghĩa độ mềm mại của hệ thống"

    không_nên_làm:
      - "Không dùng #fce519 cho body text — Marigold không đạt độ tương phản trên nền cream và không nên mang nội dung đoạn văn"
      - "Không áp dụng soft Gaussian shadow; ngôn ngữ elevation duy nhất là hard offset 8px bằng Forest Ink"
      - "Không dùng condensed display face (National 2 Condensed) dưới 20px — nó trở nên khó đọc khi làm UI text"
      - "Không đưa vào xanh dương, tím hoặc bất kỳ hue nào không phải xanh lá/vàng — hệ thống hoàn toàn thuộc tông thực vật ấm áp"
      - "Không dùng radius 0px sắc cạnh trên bất kỳ container nào — hệ thống luôn bo tròn (tối thiểu 16px)"
      - "Không đặt RethinkSans dưới weight 600 — face này không có light weight và cài đặt nhẹ hơn sẽ hiển thị sai"
      - "Không dùng white (#ffffff) làm page background — canvas luôn là Sunlit Cream; white chỉ xuất hiện bên trong product mockup và trên bề mặt xanh đậm"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Sunlit Cream | `#f2ee98` | Default page canvas và section background |"
    info: "| 1 | Parchment | `#fefde6` | Lighter card surface cho testimonial, product mockup và elevated panel |"
    info: "| 2 | Sage Wash | `#dbe8ac` | Subtle tint cho panel phân biệt trong cream section |"
    info: "| 3 | Snowcap | `#ffffff` | Pure white chỉ dùng bên trong product UI mockup và chat bubble |"
    info: "| 4 | Forest Ink | `#10380b` | Inverted dark surface cho stat bar, feature card và high-contrast section |"

  elevation:

    - "**Product Dashboard Card:** `8px 8px 0 0 #10380b`"
    - "**Testimonial Card:** `8px 8px 0 0 #10380b`"
    - "**Video Testimonial Frame:** `8px 8px 0 0 #10380b`"
    - "**Feature Card:** `8px 8px 0 0 #10380b`"

  imagery:

    info: "Minh họa nét vẽ tay đơn sắc là yếu tố thị giác đặc trưng của hệ thống: xương rồng, mây, mặt trời, hình người nhỏ với dù, và thực vật sa mạc được vẽ bằng nét 1.5-2px Forest Ink trên nền cream canvas. Minh họa phẳng, không tô bóng, được dùng làm scene-filler trong khoảng trống âm của hero và feature section background — chúng không bao giờ xuất hiện bên trong card. Ảnh chụp màn hình sản phẩm và dashboard mockup được đóng khung dưới dạng card với hard offset shadow, được xử lý như các đối tượng trong thế giới minh họa. Một bộ nhỏ icon line-art hình tròn (hộp quà, điện thoại, loa phóng thanh, người) xuất hiện trong vòng tròn fill Marigold cho feature list. Nhiếp ảnh chỉ giới hạn ở một khung video khách hàng nhúng; mọi thứ khác đều được minh họa."

  layout:

    info: "Max-width 1200px căn giữa với gutter 40px thoải mái. Hero là split hai cột: headline cỡ lớn + dual CTA + star social proof bên trái, product dashboard card chồng lên minh họa xương rồng bên phải. Nhịp section xen kẽ giữa Sunlit Cream và Forest Ink band với vertical gap 80-120px. Content block dùng grid testimonial 2 cột và stat bar 4 cột. Feature section ghép danh sách icon hình tròn với minh họa chat bubble trong layout 2 cột. Thống kê cuối trang là band Marigold full-bleed. Navigation là một transparent top bar đơn; không có sidebar hoặc sticky mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #10380b (Forest Ink)"
    - "background: #f2ee98 (Sunlit Cream)"
    - "border: #10380b (Forest Ink)"
    - "accent: #fce519 (Marigold)"
    - "card surface: #fefde6 (Parchment)"
    - "primary action: #10380b (filled action)"

    example_component_prompts:

    - "Tạo Primary Action Button: nền #10380b, text #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA."

    - "**Testimonial Card**: nền #fefde6, radius 40px, padding 32px, shadow `8px 8px 0 0 #10380b`. Avatar hình tròn 64px ở góc trên bên trái, tên ở 20px RethinkSans 700 #10380b, role ở 16px weight 600. Quote ở 32px National 2 Condensed weight 700 #10380b, letter-spacing -0.96px. Năm sao #fce519 bên dưới quote."

    - "**Product Dashboard Mockup Card**: nền trắng (#ffffff), radius 40px, border 1px solid #10380b, shadow `8px 8px 0 0 #10380b`. Header row: số điện thoại ở 16px RethinkSans 600 #10380b, card thông báo speech-bubble Forest Ink đậm ở trên. Stat row: ba cột với số 48px National 2 Condensed 800 #10380b và nhãn 14px RethinkSans 600. Campaign list rows: nền xen kẽ trắng/Sunlit Cream, status pill màu Forest Ink hoặc Marigold với radius 1440px."

    - "**Stat Counter Bar**: nền #fce519 full-width, vertical padding 80px, grid 4 cột. Mỗi ô: số 56px National 2 Condensed 800 #10380b (ví dụ '2.1K', '0'), nhãn 18px RethinkSans 600 #10380b bên dưới. Không border giữa các ô."

    - "**Feature List Item**: container icon hình tròn 40px với fill #fce519 và icon line-art 1.5px #10380b (loa phóng thanh, quà tặng, điện thoại). Gap 24px bên phải đến text nhãn: 24px National 2 Condensed 700 #10380b, letter-spacing -0.72px. Có thể thêm subtext 16px RethinkSans 600 bên dưới."

  elevation_philosophy:

    info: "Hệ thống chỉ dùng một shadow duy nhất: hard offset 8px bằng Forest Ink (#10380b), không blur, không spread. Đây là elevation kiểu neobrutalist — card 'đóng dấu' lên cream canvas thay vì nổi với soft shadow. Không bao giờ dùng Gaussian shadow; không bao giờ xếp chồng nhiều lớp shadow. Offset 8px là cố định: nó không thay đổi theo kích thước card hay mức độ quan trọng. Card không có shadow cảm giác như thiếu sót; button, input và inline element không bao giờ nhận shadow."

  similar_brands:

    - "**Gumroad** — Cùng hard offset shadow neobrutalist, pill-shaped CTA và năng lượng illustrated mascot trên nền cream canvas ấm áp"
    - "**Postscript** — Đồng nghiệp SMS marketing với tính cách marketing-page tương tự, dù Postscript dùng bảng màu thương mại nhẹ nhàng hơn"
    - "**Linear** — Display type condensed đậm và UI text weight-700 tự tin tạo nên sự tự tin typographic kiểu poster tương tự"
    - "**Klaviyo** — Nền tảng marketing với hero scene minh họa và headline condensed đậm, dù Klaviyo dùng accent tím mát hơn"
    - "**Substack** — Thương hiệu editorial/newsletter dùng display type condensed cỡ lớn gần serif và nền cream ấm áp để tạo cảm giác ấn phẩm in"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sunlit-cream: #f2ee98;
          --color-forest-ink: #10380b;
          --color-marigold: #fce519;
          --color-sage-wash: #dbe8ac;
          --color-vivid-fern: #30be60;
          --color-parchment: #fefde6;
          --color-snowcap: #ffffff;
        
          /* Typography — Font Families */
          --font-national-2-condensed: 'National 2 Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rethinksans: 'RethinkSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 24;
          --text-body: 18px;
          --leading-body: 28;
          --text-subheading: 20px;
          --leading-subheading: 32;
          --text-heading-sm: 24px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.72px;
          --text-heading: 32px;
          --leading-heading: 38;
          --tracking-heading: -0.96px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 62;
          --tracking-heading-lg: -1.68px;
          --text-display: 86px;
          --leading-display: 70;
          --tracking-display: -2.58px;
          --text-display-xl: 180px;
          --leading-display-xl: 144;
          --tracking-display-xl: -5.4px;
        
          /* Typography — Weights */
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24-40px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-nav: 16px;
          --radius-tags: 40px;
          --radius-cards: 40px;
          --radius-badges: 1440px;
          --radius-images: 40px;
          --radius-inputs: 1440px;
          --radius-buttons: 1440px;
        
          /* Shadows */
          --shadow-subtle: rgb(16, 56, 11) 8px 8px 0px 0px;
        
          /* Surfaces */
          --surface-sunlit-cream: #f2ee98;
          --surface-parchment: #fefde6;
          --surface-sage-wash: #dbe8ac;
          --surface-snowcap: #ffffff;
          --surface-forest-ink: #10380b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sunlit-cream: #f2ee98;
          --color-forest-ink: #10380b;
          --color-marigold: #fce519;
          --color-sage-wash: #dbe8ac;
          --color-vivid-fern: #30be60;
          --color-parchment: #fefde6;
          --color-snowcap: #ffffff;
        
          /* Typography */
          --font-national-2-condensed: 'National 2 Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rethinksans: 'RethinkSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 24;
          --text-body: 18px;
          --leading-body: 28;
          --text-subheading: 20px;
          --leading-subheading: 32;
          --text-heading-sm: 24px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.72px;
          --text-heading: 32px;
          --leading-heading: 38;
          --tracking-heading: -0.96px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 62;
          --tracking-heading-lg: -1.68px;
          --text-display: 86px;
          --leading-display: 70;
          --tracking-display: -2.58px;
          --text-display-xl: 180px;
          --leading-display-xl: 144;
          --tracking-display-xl: -5.4px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 1440px;
        
          /* Shadows */
          --shadow-subtle: rgb(16, 56, 11) 8px 8px 0px 0px;
        }