lpalo___style_reference:
  info: "> Một trang truyện thiếu nhi trên nền giấy đào ấm — một headline slab-serif to tướng đang hét lên giữa những hình vẽ nguệch ngoạc bằng bút chì màu rải rác."

  theme: "light"

  info: "La puce à l'oreille mang phong cách một trang truyện thiếu nhi trải trên nền giấy đào ấm — một nền tảng podcast vui tươi, nơi headline slab-serif đen chunky neo giữ trang, trong khi các điểm nhấn màu sắc rực rỡ và hình minh họa line-art lơ lửng nhảy múa xung quanh. Nhịp điệu thị giác rộng rãi và thong thả: một canvas đào mềm (#f6e0db) chứa những hình vẽ nguệch ngoạc rải rác, các container hình pill nổi với viền đen dày, và một headline cỡ lớn duy nhất (Alfa Slab One ở gần 120px) làm toàn bộ công việc nặng nhọc cho brand voice. Các component có cảm giác thủ công hơn là được kỹ thuật hóa — card trắng viền đen, pill radii 47px, không shadow, không gradient. Màu sắc được xử lý như một bảng màu bút chì lấy từ một hộp duy nhất: mọi sắc thái đều bão hòa và phẳng, được dùng như dấu câu trang trí trên bề mặt, icon, và nền section thay vì là trạng thái UI chức năng. Sự tương phản giữa trọng lượng slab-serif nghiêm túc của chữ và hình minh họa kỳ quặc tạo ra tension nhận diện của site — giọng điệu có thẩm quyền, cách truyền đạt như trẻ con."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Peach Paper | `#f6e0db` | `--color-peach-paper` | Canvas trang — nền pastel ấm giúp mọi viền đen và điểm nhấn màu nổi bật |"
    info: "| Charcoal Ink | `#000000` | `--color-charcoal-ink` | Text chính, đường kẻ mảnh, viền card, nav outlines — bộ khung cấu trúc với hơn 1400 lần xuất hiện border |"
    info: "| Snow | `#ffffff` | `--color-snow` | Canvas trang chính và bề mặt card trắng. Không nâng nó lên thành màu CTA chính |"
    info: "| Ember Orange | `#ef724f` | `--color-ember-orange` | Điểm nhấn trang trí và bề mặt card ấm — màu cam bút chì xuất hiện nhiều nhất trong số các màu sắc trên UI |"
    info: "| Magenta Pop | `#981082` | `--color-magenta-pop` | Điểm nhấn trang trí, nav highlight, và card fills rực rỡ — màu fuchsia bão hòa dùng làm dấu câu đậm trên canvas đào |"
    info: "| Sunbeam Yellow | `#e7db4c` | `--color-sunbeam-yellow` | Lớp phủ vàng cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung |"
    info: "| Mint Wash | `#ace2df` | `--color-mint-wash` | Điểm nhấn trang trí và bề mặt card mềm — màu teal bão hòa thấp làm mát bảng màu ấm mà không phá vỡ năng lượng |"
    info: "| Powder Blue | `#84bfff` | `--color-powder-blue` | Điểm nhấn trang trí và bề mặt card — xanh da trời bão hòa trung bình xuất hiện nhiều nhất sau đen (60 fills), dùng cho illustration washes |"
    info: "| Lilac Tint | `#e69dff` | `--color-lilac-tint` | Điểm nhấn trang trí và bề mặt card — hồng tím pastel mềm làm nhẹ magenta mà không cạnh tranh |"
    info: "| Lime Zest | `#6ed311` | `--color-lime-zest` | Điểm nhấn trang trí — xanh lá có độ bão hòa cao, dùng tiết kiệm như dấu câu vui tươi giữa các illustration |"
    info: "| Cobalt Spark | `#5196ff` | `--color-cobalt-spark` | Điểm nhấn trang trí — một chấm xanh dương rực rỡ duy nhất trong bảng màu illustration |"

  tokens___typography:

    alfa_slab_one___display_và_editorial_headlines___một_slab_serif_chunky_chỉ_có_một_weight_duy_nhất_mang_toàn_bộ_brand_voice__kích_thước_46px_với_leading_1_09_chặt_là_signature__shouting_headline__treatment__trong_khi_16px_dùng_cho_emphasized_inline_text____font_alfa_slab_one:
      - "**Thay thế:** Bowlby One, Roboto Slab 900, hoặc Recoleta Black"
      - "**Weights:** 400"
      - "**Kích thước:** 16px, 35px, 46px"
      - "**Line height:** 1.09–1.20"
      - "**Vai trò:** Display và editorial headlines — một slab serif chunky chỉ có một weight duy nhất mang toàn bộ brand voice; kích thước 46px với leading 1.09 chặt là signature 'shouting headline' treatment, trong khi 16px dùng cho emphasized inline text"

    manrope___ui_text__navigation__body_copy__và_display_alternates_cỡ_lớn___geometric_sans_dùng_cho_mọi_thứ_không_phải_alfa_slab_headline__weight_500_cho_nav_labels__700_800_cho_emphasized_ui_text__400_cho_body__extreme_120px_là_tier_display_thứ_cấp____font_manrope:
      - "**Thay thế:** Inter, Outfit, hoặc Plus Jakarta Sans"
      - "**Weights:** 400, 500, 700, 800"
      - "**Kích thước:** 12px, 25px, 34px, 50px, 120px"
      - "**Line height:** 1.00–1.60"
      - "**Vai trò:** UI text, navigation, body copy, và display alternates cỡ lớn — geometric sans dùng cho mọi thứ không phải Alfa Slab headline; weight 500 cho nav labels, 700-800 cho emphasized UI text, 400 cho body; extreme 120px là tier display thứ cấp"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.6 | — | `--text-body` |"
      info: "| heading-sm | 25px | 1.24 | — | `--text-heading-sm` |"
      info: "| subheading | 34px | 1.16 | — | `--text-subheading` |"
      info: "| heading | 46px | 1.09 | — | `--text-heading` |"
      info: "| heading-lg | 50px | 1.12 | — | `--text-heading-lg` |"
      info: "| display | 120px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 46 | 46px | `--spacing-46` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 47px |"
      info: "| cards | 40-47px |"
      info: "| small | 10px |"
      info: "| buttons | 47px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 46-64px"
      - "**Card padding:** 24-40px"
      - "**Element gap:** 8-16px"

  components:

    pill_navigation_button:
      vai_trò: "Nav item trên thanh top-bar"

      info: "Fill trắng, border đen 2px, border-radius 47px (hình pill hoàn chỉnh), padding dọc 10px / ngang 20px, Manrope 500 ở 16px, text đen. Active state chuyển sang fill màu (cam, magenta, hoặc teal). Xuất hiện theo cụm 4-5 cái trên header."

    pill_dropdown_trigger:
      vai_trò: "Nav item có caret"

      info: "Giống hệt Pill Navigation Button nhưng có thêm hình tam giác cam nhỏ (▾) ở cuối, biểu thị menu có thể mở rộng. Nằm ở vị trí nav item chính bên trái nhất."

    outline_content_card:
      vai_trò: "Content card đa năng"

      info: "Fill trắng (#ffffff), border đen solid 2px, border-radius 40-47px, padding 24-40px, không shadow. Dùng Alfa Slab One cho tiêu đề card và Manrope cho body text. Đường viền đen dày trên nền trắng là signature card treatment."

    flat_color_card:
      vai_trò: "Panel đậm cho featured content"

      info: "Fill màu rực rỡ duy nhất (Ember Orange, Magenta Pop, hoặc Sunbeam Yellow), không border, border-radius 40-47px, padding 24-40px. Text đen bên trên. Dùng tiết kiệm làm dấu câu thị giác giữa các section card trắng."

    display_headline_block:
      vai_trò: "Hero hoặc section title"

      info: "Alfa Slab One 400 ở 46-120px, line-height 1.09-1.20, đen trên canvas đào. Không gradient, không color treatment — riêng trọng lượng slab-serif đã đủ tạo tác động. Thường nhiều dòng với manual line breaks tạo nhịp 'shout'."

    line_art_illustration:
      vai_trò: "Đồ họa trang trí nổi"

      info: "Hình vẽ line drawing nét đen mảnh (robot, tai nghe, máy ảnh, băng cassette, khuôn mặt) rải rác trên canvas đào ở nhiều góc xoay khác nhau. Mỗi hình là một SVG độc lập, chỉ có outline, không fill hoặc fill phẳng tối thiểu. Hoạt động như khoảng thở thị giác xung quanh text."

    tilted_content_card:
      vai_trò: "Featured episode hoặc highlight card"

      info: "Card trắng xoay 2-4 độ với một lớp teal hoặc lavender lệch nhẹ phía sau, tạo hiệu ứng scrapbook đặt tay. Radius 40px, border đen, body text Manrope, title Alfa Slab One."

    tag_pill:
      vai_trò: "Nhãn category hoặc filter"

      info: "Pill nhỏ (radius 47px), padding dọc 8px / ngang 16px, Manrope 700 ở 12-14px. Fill có thể là bất kỳ màu accent nào của brand với text đen, hoặc trắng với border đen."

    footer_link_group:
      vai_trò: "Khối navigation thứ cấp"

      info: "Manrope 500 ở 16px, text đen, spacing tối thiểu (8-10px giữa các item). Không border hoặc background — đặt trực tiếp trên canvas đào."

    event_card:
      vai_trò: "Card danh sách theo ngày cụ thể"

      info: "Fill trắng, border đen, radius 40px, padding 15-16px. Có date marker (chữ số lớn Alfa Slab One), event title (Manrope 700), và location/meta (Manrope 400). 2-3 card xếp thành hàng ngang."

    amplified_poster_card:
      vai_trò: "Card nội dung hình ảnh nổi bật"

      info: "Card lớn với layout ưu tiên hình ảnh: illustration hoặc poster full-bleed ở trên, title bằng Alfa Slab One 35px, description bằng Manrope 16px, border đen 2px, radius 47px. Hoạt động như 'bìa tạp chí' trong luồng nội dung."

    section_divider:
      vai_trò: "Dải phân cách thị giác giữa các khối nội dung"

      info: "Một dải màu solid rộng, mỏng (luân phiên giữa Ember Orange, Mint Wash, Sunbeam Yellow, hoặc Lilac Tint) kéo dài edge-to-edge, cao 60-100px. Không text — nhịp điệu màu thuần túy."

  do_s_and_don_ts:

    nên_làm:
      - "Đặt display headlines bằng Alfa Slab One ở 46px trở lên với line-height ≤ 1.20 — leading chặt là thứ làm slab serif cảm giác như đang hét."
      - "Dùng border-radius 47px cho mọi container chính (nav, cards, buttons) và chỉ 10px cho các element nhỏ lồng bên trong; không bao giờ dùng 0px hoặc 4px radii."
      - "Mặc định dùng canvas đào (#f6e0db) cho mọi section; chỉ dùng bề mặt card màu khi cố tình phá vỡ nhịp điệu thị giác."
      - "Kết hợp border đen 2px với fill trắng cho cards — đây là ngôn ngữ outlined-card signature; không bao giờ dùng shadow để tạo độ cao."
      - "Rải line-art illustrations ở nhiều góc xoay khác nhau xung quanh text blocks thay vì căn chỉnh theo grid; sự bất đối xứng là một phần của cảm giác storybook."
      - "Dùng Manrope 500 cho nav và 400 cho body; dành 700-800 chỉ cho inline emphasis — weight mặc định nên mang cảm giác đàm thoại, không nặng nề."
      - "Chọn một màu accent rực rỡ cho mỗi content block (cam, magenta, vàng, teal, xanh dương, lilac) và để nó bão hòa toàn bộ card hoặc dải thay vì pha trộn nhiều sắc thái trong một component."

    không_nên_làm:
      - "Không áp dụng drop shadows, inner shadows, hoặc bất kỳ hiệu ứng elevation nào — thiết kế cố tình phẳng với borders làm công việc cấu trúc."
      - "Không dùng gradient — mọi màu đều phẳng và bão hòa, như bút chì màu trên giấy."
      - "Không đặt Alfa Slab One dưới 16px — ở kích thước nhỏ, slab serifs trở nên nhiễu khó đọc; chuyển sang Manrope cho mọi thứ dưới 16px."
      - "Không căn giữa body paragraphs — body text bằng Manrope đọc tốt nhất khi căn trái; căn giữa chỉ dành cho headlines và nhãn ngắn."
      - "Không dùng xám trung tính cho borders hoặc text — mọi đường cấu trúc đều là đen thuần (#000000); bất kỳ màu xám nào cũng phá vỡ phép ẩn dụ mực trên giấy của storybook."
      - "Không pha trộn hơn hai màu accent trong một card hoặc button — bảng màu rộng như hộp bút chì, nhưng mỗi component nên chọn một cây bút chì."
      - "Không thêm nút CTA truyền thống với fill màu solid và text trắng; primary actions có hình pill với border đen trên nền trắng, hoặc card fill màu, không phải nút 'Mua ngay' thông thường."

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Peach Canvas | `#f6e0db` | Nền toàn trang — nền pastel ấm cho mọi section |"
    info: "| 1 | Snow Card | `#ffffff` | Fill card và button chính, được viền bởi border đen |"
    info: "| 2 | Color Card | `#ef724f` | Bề mặt card phẳng rực rỡ màu cam — cùng màu với accent, dùng làm panel đậm |"
    info: "| 3 | Mint Card | `#ace2df` | Bề mặt card teal mềm để tạo sự đa dạng trong các section nội dung |"
    info: "| 4 | Lilac Card | `#e69dff` | Bề mặt card hồng tím pastel cho các panel nội dung nhẹ nhàng hơn |"

  elevation:

    info: "Thiết kế cố tình tránh mọi shadow. Elevation được truyền đạt độc quyền qua border đen 2px trên bề mặt trắng và qua độ tương phản màu (fill rực rỡ trên nền canvas đào). Đây là một thẩm mỹ flat-illustration có chủ đích — depth sẽ phá vỡ phép ẩn dụ storybook. Các component nằm TRÊN trang, không phải PHÍA TRÊN trang."

  imagery:

    info: "Ngôn ngữ hình ảnh là line illustration vẽ tay trên nền màu phẳng. Illustrations là outline đen nét mảnh (tai nghe, robot, băng cassette, máy ảnh, khuôn mặt trừu tượng, nốt nhạc) rải rác ở các góc xoay bất thường xung quanh text — chúng hoạt động như bầu không khí trang trí, không phải nội dung giải thích. Cards thỉnh thoảng có poster illustrated full-bleed với chất lượng sách thiếu nhi. Không có photography. Canvas đào với doodles nổi tạo cảm giác scrapbook hoặc zine, nơi trang giấy tự nó là tác phẩm nghệ thuật. Icons là mono-line, black-stroke, khớp với phong cách illustration."

  layout:

    info: "Trang là full-bleed, không có container max-width cố định — nội dung thở từ edge này sang edge kia trên canvas đào, bị ngắt bởi các dải màu. Hero là một headline Alfa Slab One cỡ lớn căn giữa (nhiều dòng, leading chặt) với các illustration quay quanh nó ở mọi phía với khoảng cách và góc xoay khác nhau. Navigation nằm dưới dạng một hàng ngang các nút hình pill ở một phần ba trên bên trái, không kéo dài toàn bộ chiều rộng. Các section nội dung xen kẽ giữa card grids viền trắng (2-3 cột) và các dải màu full-bleed hoạt động như điểm dừng chân thị giác. Cards được sắp xếp lỏng lẻo với xoay nhẹ, không bị khóa vào grid cứng nhắc. Nhịp điệu rộng rãi: 46-64px giữa các section, khoảng trắng hào phóng bên trong cards. Footer tối thiểu — vài nhóm link trên canvas đào, không thay đổi background. Mật độ tổng thể là comfortable và editorial, không dày đặc thông tin."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background (canvas): #f6e0db"
    - "card surface: #ffffff"
    - "border: #000000 (2px solid)"
    - "accent (warm): #ef724f (Ember Orange)"
    - "accent (cool): #ace2df (Mint Wash)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:
    - "**Hero Headline Block**: Render một headline 4 dòng bằng Alfa Slab One 400 ở 50px, line-height 1.12, màu #000000, căn giữa trên canvas #f6e0db. Bao quanh với 3-5 hình minh họa line-art SVG rải rác (tai nghe, robot, băng cassette) ở các góc xoay khác nhau từ -15° đến +15°."

    - "**Outlined Content Card**: Fill trắng (#ffffff), border #000000 solid 2px, border-radius 40px, padding 32px. Title bằng Alfa Slab One 400 ở 25px đen, body bằng Manrope 400 ở 16px đen với line-height 1.6. Không shadow."

    - "**Pill Navigation Button**: Fill trắng, border #000000 2px, border-radius 47px, padding dọc 10px / ngang 20px. Label bằng Manrope 500 ở 16px #000000. Khoảng cách 8px giữa các pill liền kề."

    - "**Flat Color Band**: Dải ngang full-bleed, cao 80px, fill #ef724f (Ember Orange). Không text, không border — ngắt màu thuần túy giữa các section nội dung."

    - "**Tilted Feature Card**: Card trắng xoay 3°, radius 47px, border đen 2px, padding 24px. Phía sau là một hình chữ nhật #ace2df lệch nhẹ (cùng kích thước) ở góc xoay 0°, tạo hiệu ứng lớp scrapbook. Title bằng Alfa Slab One 35px, body bằng Manrope 16px."

    - "**Tag Pill**: Fill #e7db4c (Sunbeam Yellow), border-radius 47px, padding dọc 8px / ngang 16px, Manrope 700 ở 14px #000000. Một tag cho mỗi màu accent, không bao giờ pha trộn fills trong một nhóm."

  similar_brands:

    - "**Brio magazine / Highlights for Kids** — Cùng ngôn ngữ ấn phẩm thiếu nhi: canvas đào/pastel, headline slab-serif cỡ lớn, doodle vẽ tay rải rác, và bảng màu hộp bút chì được áp dụng dưới dạng washes phẳng."
    - "**Mailchimp (illustration system)** — Cùng brand voice vui tươi: màu rực rỡ phẳng dùng làm illustration fills, container hình pill, và card trắng viền đen không có độ sâu shadow."
    - "**Headspace (early brand)** — Cùng khoảng trắng hào phóng, display headlines cỡ lớn làm neo thị giác chính, và canvas pastel ấm với các element line-art trang trí rải rác."
    - "**The Browser Company / Arc** — Cùng navigation hình pill, container trắng viền đen với radii lớn, và từ chối dùng shadow — dựa vào border-weight và màu sắc cho cấu trúc."
    - "**Ridmik Dictionary (hoặc các phương tiện truyền thông vui tươi Bangla/Pháp khác)** — Cùng cảm giác storybook-trên-giấy: canvas nhuộm màu ấm với line illustrations nổi và một display face đậm duy nhất mang mọi trọng lượng typographic."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-peach-paper: #f6e0db;
          --color-charcoal-ink: #000000;
          --color-snow: #ffffff;
          --color-ember-orange: #ef724f;
          --color-magenta-pop: #981082;
          --color-sunbeam-yellow: #e7db4c;
          --color-mint-wash: #ace2df;
          --color-powder-blue: #84bfff;
          --color-lilac-tint: #e69dff;
          --color-lime-zest: #6ed311;
          --color-cobalt-spark: #5196ff;
        
          /* Typography — Font Families */
          --font-alfa-slab-one: 'Alfa Slab One', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manrope: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.24;
          --text-subheading: 34px;
          --leading-subheading: 1.16;
          --text-heading: 46px;
          --leading-heading: 1.09;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.12;
          --text-display: 120px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-46: 46px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 46-64px;
          --card-padding: 24-40px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 40px;
          --radius-3xl-2: 47px;
        
          /* Named Radii */
          --radius-nav: 47px;
          --radius-cards: 40-47px;
          --radius-small: 10px;
          --radius-buttons: 47px;
        
          /* Surfaces */
          --surface-peach-canvas: #f6e0db;
          --surface-snow-card: #ffffff;
          --surface-color-card: #ef724f;
          --surface-mint-card: #ace2df;
          --surface-lilac-card: #e69dff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-peach-paper: #f6e0db;
          --color-charcoal-ink: #000000;
          --color-snow: #ffffff;
          --color-ember-orange: #ef724f;
          --color-magenta-pop: #981082;
          --color-sunbeam-yellow: #e7db4c;
          --color-mint-wash: #ace2df;
          --color-powder-blue: #84bfff;
          --color-lilac-tint: #e69dff;
          --color-lime-zest: #6ed311;
          --color-cobalt-spark: #5196ff;
        
          /* Typography */
          --font-alfa-slab-one: 'Alfa Slab One', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manrope: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.24;
          --text-subheading: 34px;
          --leading-subheading: 1.16;
          --text-heading: 46px;
          --leading-heading: 1.09;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.12;
          --text-display: 120px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-46: 46px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 40px;
          --radius-3xl-2: 47px;
        }