backlight___style_reference:
  info: "> Con dấu đỏ son trên nền giấy kem ấm — bìa catalog in ấn nơi một gam mực đỏ làm chủ trang giấy kem, còn mọi thứ khác nằm yên trong thang xám tĩnh lặng."

  theme: "light"

  info: "Backlight sử dụng ngôn ngữ editorial ấm áp xây dựng trên nền giấy kem (cream vellum) và một điểm nhấn đỏ son (vermillion). Hero full-bleed màu cam-đỏ đóng vai trò như trang bìa của một catalog in ấn, với chữ trắng và một nút pill trắng duy nhất là những thành phần được phép xuất hiện. Bên dưới hero, canvas chuyển sang màu kem ấm (#e4ddd5) mang các card trắng, chữ tối, và một đường kẻ mảnh màu đào (#f3b8a9) chạy dọc theo grid như một đường kẻ in. Chat-bubble cards được dùng như một signature device để làm nổi bật các cuộc hội thoại nhóm và pain points. Hệ thống typography tự tin nhưng nhẹ nhàng — Instrument Sans với negative tracking đồng nhất tạo độ dày đặc mà không nặng nề, và Fragment Mono dùng để đánh dấu timestamp và metadata. Bảng màu không bao giờ leo thang: không shadow, không gradient, không điểm nhấn phụ — chỉ có warm neutrals, một gam đỏ đậm, và một dải đen full-bleed duy nhất để tạo tương phản tonal."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Vermillion | `#dd3508` | `--color-vermillion` | Điểm nhấn cam cho viền action dạng outline, linked labels, và emphasis tương tác nhẹ. Không nâng cấp lên màu CTA chính |"
    info: "| Peach Hairline | `#f3b8a9` | `--color-peach-hairline` | Viền outline cam cho tags, divider, và cạnh UI khi focus. Không nâng cấp lên màu CTA chính |"
    info: "| Cream Vellum | `#e4ddd5` | `--color-cream-vellum` | Canvas trang bên dưới hero, viền input, lớp nền surface nhẹ — chất giấy ấm mà mọi thứ khác nằm trên đó |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Bề mặt card, nền button trên hero cam, chữ nav trên nền tối/cam, typography inverted — lớp surface sáng |"
    info: "| Midnight Ink | `#151515` | `--color-midnight-ink` | Heading chính, body text, nền section tối, nền chat bubble, viền button trên nền sáng — chữ đậm và dải tối full-bleed hiếm hoi |"
    info: "| Graphite | `#4f4f4f` | `--color-graphite` | Viền card, secondary text, UI rules muted — mid-neutral làm mềm các cạnh giữa Bone White và Midnight Ink |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Link text trên surface sáng, viền ảnh, secondary borders |"
    info: "| Ochre Tan | `#d7cabb` | `--color-ochre-tan` | Nền và viền badge, secondary surface tint — tag fill neutral ấm nằm giữa cream và peach |"
    info: "| Press Black | `#000000` | `--color-press-black` | Icon fills, viền accent chặt chẽ, true-black cho các khoảnh khắc tương phản kiểu in ấn |"

  tokens___typography:

    instrument_sans___primary_interface_and_editorial_typeface__weight_500_cho_nav_và_button__weight_600_cho_heading__weight_400_cho_body__tracking__0_02em_đồng_nhất_ở_mọi_kích_thước_giúp_thắt_chặt_các_dạng_hình_học_và_mang_lại_cho_bảng_màu_ấm_một_giọng_văn_editorial_hiện_đại__positive_tracking_nhẹ_ở_caption_12px_mở_rộng_các_label_nhỏ_để_chúng_không_bị_bó_chặt_____font_instrument_sans:
      - "**Thay thế:** Inter, DM Sans, hoặc system-ui sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 12, 14, 16, 18, 20, 24, 28, 32, 39, 48"
      - "**Line height:** 1.00, 1.15, 1.20, 1.25, 1.30, 1.43"
      - "**Letter spacing:** -0.020em ở 14px trở lên; +0.020em ở caption 12px"
      - "**Vai trò:** Primary interface and editorial typeface. Weight 500 cho nav và button, weight 600 cho heading, weight 400 cho body. Tracking -0.02em đồng nhất ở mọi kích thước giúp thắt chặt các dạng hình học và mang lại cho bảng màu ấm một giọng văn editorial hiện đại. Positive tracking nhẹ ở caption (12px) mở rộng các label nhỏ để chúng không bị bó chặt."

    fragment_mono___accent_monospace_cho_timestamp_trong_chat_bubble__metadata_labels__và_small_data_tags__tracking__0_08em_cực_đoan_ở_14px_thu_gọn_các_letterform_thành_cảm_giác_tem_in_dày_đặc__tương_phản_với_body_sans_serif_thoáng_đãng_____font_fragment_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Space Mono"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 14, 16"
      - "**Line height:** 1.00, 1.15, 1.30"
      - "**Letter spacing:** -0.08em ở 14px, -0.02em ở 16px"
      - "**Vai trò:** Accent monospace cho timestamp trong chat bubble, metadata labels, và small data tags. Tracking -0.08em cực đoan ở 14px thu gọn các letterform thành cảm giác tem in dày đặc, tương phản với body sans-serif thoáng đãng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 17 | 0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 21 | -0.32px | `--text-body` |"
      info: "| subheading | 18px | 23 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 20px | 24 | -0.4px | `--text-heading-sm` |"
      info: "| heading | 24px | 29 | -0.48px | `--text-heading` |"
      info: "| heading-lg | 32px | 37 | -0.64px | `--text-heading-lg` |"
      info: "| display | 39px | 45 | -0.78px | `--text-display` |"
      info: "| display-lg | 48px | 48 | -0.96px | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 60px |"
      info: "| inputs | 4px |"
      info: "| buttons | 80px |"
      info: "| chat-bubbles | 20px |"

    layout:

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

  components:

    primary_pill_button:
      vai_trò: "Hero CTA và form submit"

      info: "Nền Bone White (#ffffff), chữ Midnight Ink (#151515), viền 1px Midnight Ink, border-radius 80px (full pill), padding 12px 24px, Instrument Sans 14px weight 500. Nằm trên hero Vermillion như thành phần action duy nhất được phép."

    outlined_action_button:
      vai_trò: "Secondary call-to-action trên nền sáng"

      info: "Nền trong suốt, viền 1px Vermillion (#dd3508), chữ Midnight Ink, border-radius 80px, padding 12px 24px, Instrument Sans 14px weight 500. Viền chromatic là màu duy nhất button này mang theo."

    email_input:
      vai_trò: "Hero capture form"

      info: "Nền trong suốt, viền 1px Bone White, placeholder text màu Bone White, border-radius 4px, Instrument Sans 14px, padding 12px 16px. Không đổi màu focus ring — viền giữ nguyên độ dày."

    transparent_nav_bar:
      vai_trò: "Top navigation trên hero Vermillion"

      info: "Nằm trực tiếp trên hero Vermillion, không có nền. Logo 'BACKLIGHT' căn trái màu Bone White, Instrument Sans 12px weight 600, letter-spacing rộng (uppercase tracking). Nav items màu Bone White, 14px weight 500, với gạch chân Peach Hairline (#f3b8a9) chỉ trạng thái active. Primary CTA là nút pill Bone White căn phải."

    hero_band:
      vai_trò: "Section mở đầu full-bleed"

      info: "Nền Vermillion (#dd3508) trải rộng toàn bộ chiều rộng viewport, padding dọc 64-96px, nội dung căn trái với max-width 1200px. Display headline màu Bone White ở 48px, body ở 18px màu Bone White. Hero là nơi duy nhất Vermillion xuất hiện dưới dạng surface."

    dark_contrast_band:
      vai_trò: "Section full-bleed để tạo điểm ngắt tonal"

      info: "Nền Midnight Ink (#151515), chữ Bone White, padding dọc 64-96px. Dùng một cách tiết kiệm — mỗi trang một lần — để tạo khoảnh khắc poster in ấn đảo ngược giữa các section kem ấm."

    chat_bubble_card_dark:
      vai_trò: "Team pain-point messaging trên nền sáng"

      info: "Nền Midnight Ink (#151515), chữ Bone White, border-radius 20px, padding 16px, avatar tròn nhỏ bên trái. Tên + Fragment Mono 14px timestamp phía trên message, message bằng Instrument Sans 16px weight 400. Hoạt động như một công cụ dramatization social-proof."

    chat_bubble_card_light:
      vai_trò: "Team pain-point messaging trên nền sáng (phiên bản thay thế)"

      info: "Nền Bone White, viền 1px Graphite (#4f4f4f), chữ Midnight Ink, border-radius 20px, padding 16px. Cấu trúc bên trong giống variant tối nhưng đảo ngược mối quan hệ — nằm trên canvas Cream Vellum."

    faq_accordion_row:
      vai_trò: "Danh sách câu hỏi có thể mở rộng"

      info: "Row full-width, divider hairline 1px Graphite (#4f4f4f), padding dọc 24px, chữ câu hỏi Instrument Sans 18px weight 500 màu Midnight Ink. Icon plus căn phải màu Vermillion (#dd3508), 20px. Không có nền, không có card chrome — divider làm công việc thị giác."

    carousel_arrow_button:
      vai_trò: "Điều hướng nội dung ngang"

      info: "Button hình tròn, đường kính 40px, nền Bone White, viền 1px Midnight Ink (#151515), icon chevron Midnight Ink căn giữa. Cặp trái/phải nằm phía trên các khối nội dung."

    product_card:
      vai_trò: "Danh sách tính năng hoặc sản phẩm"

      info: "Nền Bone White, viền 1px Graphite (#4f4f4f), border-radius 8px, padding 16-24px, tiêu đề Instrument Sans 18px weight 500 màu Midnight Ink, body ở 14px màu Graphite. Không shadow, không hover elevation — viền đảm nhận việc định nghĩa."

    pill_badge:
      vai_trò: "Trạng thái, danh mục, hoặc tag NEW"

      info: "Nền Ochre Tan (#d7cabb), viền 1px Graphite (#4f4f4f), border-radius 60px (pill), padding 4px 12px, Instrument Sans 12px weight 500 màu Midnight Ink. Dùng cho label 'NEW' và tag danh mục."

    sticky_promo_banner:
      vai_trò: "Thông báo cố định góc dưới bên phải"

      info: "Nền Midnight Ink (#151515), border-radius 8px, chữ Bone White, Fragment Mono 12px weight 700 cho label 'NEW' màu Vermillion, headline 16px Instrument Sans weight 500, thumbnail ảnh inline bên phải với viền Peach Hairline."

    footer:
      vai_trò: "Site footer với các cột link"

      info: "Nằm trên phần tiếp nối của hero Vermillion hoặc chuyển sang Midnight Ink. Chữ Bone White, Instrument Sans 14px, các cột link được phân cách bằng vertical rules Peach Hairline (#f3b8a9). Logo góc dưới bên trái màu Bone White uppercase."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Vermillion (#dd3508) làm nền hero full-bleed — đây là nơi duy nhất màu này xuất hiện dưới dạng surface"
      - "Đặt border-radius là 80px (full pill) cho tất cả primary buttons và 8px cho tất cả card và element hình chữ nhật"
      - "Áp dụng letter-spacing -0.02em cho tất cả chữ Instrument Sans từ 14px trở lên; dùng +0.02em ở caption 12px"
      - "Dùng Cream Vellum (#e4ddd5) làm page canvas và Bone White (#ffffff) cho tất cả card và surface nằm trên đó"
      - "Dùng Fragment Mono ở 14px với tracking -0.08em cho timestamp, metadata, và small data labels trong chat bubble"
      - "Dùng chat-bubble cards (tối hoặc sáng, radius 20px) để làm nổi bật các cuộc hội thoại nhóm và khoảnh khắc social proof"
      - "Giới hạn điểm nhấn Vermillion trên nền sáng ở viền mỏng 1px và icon nhỏ (FAQ plus, carousel arrows)"

    không_nên_làm:
      - "Không thêm drop shadow, glow effect, hoặc bất kỳ box-shadow nào vào card, button, hoặc modal — hệ thống cố tình phẳng"
      - "Không dùng Vermillion làm nền button đã tô màu — nó chỉ là viền outlined-action và hero surface"
      - "Không dùng Peach Hairline (#f3b8a9) làm màu chữ hoặc interactive fill — nó chỉ là decorative border"
      - "Không đưa vào màu accent chromatic thứ hai — hệ thống là monochromatic ấm với một màu đỏ duy nhất"
      - "Không dùng gradient ở bất kỳ đâu trong giao diện — surface chỉ là màu đặc"
      - "Không dùng Midnight Ink (#151515) làm body text trên hero Vermillion — tất cả chữ trên hero phải là Bone White"
      - "Không căn giữa headline — giọng văn editorial của Backlight là căn trái với padding trái rộng rãi"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Vellum | `#e4ddd5` | Page canvas — nền giấy ấm mang phần lớn nội dung |"
    info: "| 1 | Bone White | `#ffffff` | Card, chat bubble, nền button — lớp surface sáng phía trên canvas |"
    info: "| 2 | Midnight Ink | `#151515` | Chat bubble tối, dải tương phản full-bleed, footer — surface đảo ngược tonal |"
    info: "| 3 | Vermillion | `#dd3508` | Hero band — surface chromatic duy nhất, dùng một lần mỗi trang để tạo tác động tối đa |"

  elevation:

    info: "Phẳng theo thiết kế. Không drop shadow, không hiệu ứng elevation. Sự phân tách surface đạt được hoàn toàn thông qua tương phản màu sắc giữa canvas kem ấm và card Bone White, và thông qua viền mỏng 1px màu Graphite. Điều này củng cố cảm giác in ấn/editorial — thiết kế đọc như mực trên giấy, không phải digital elevation."

  imagery:

    info: "Backlight sử dụng ba chế độ ảnh: (1) chân dung avatar tròn nhỏ bên trong chat bubble cards, hiển thị ở ~32px với viền Peach Hairline nhẹ, (2) thumbnail sản phẩm/phương tiện inline trong sticky promo banner với stroke Peach Hairline 1px, và (3) crop phương tiện full-bleed ở cạnh phải của các section nội dung, được xử lý với cạnh hình chữ nhật sắc nét (không bo tròn) để chúng đọc như halftone in ấn. Nhiếp ảnh có tông màu ấm và editorial — không bao giờ là stock-lifestyle. Không có illustration, không 3D render, không đồ họa trừu tượng. Ngôn ngữ thị giác là print-catalog: chân dung, media stills, và chat artifacts được sắp xếp trong một grid gồm card và bubble."

  layout:

    info: "Backlight là layout căn trái, max-width 1200px với các band section full-bleed. Hero là band Vermillion full-viewport-width với headline căn trái và email capture. Bên dưới hero, layout xen kẽ giữa canvas Cream Vellum và các band full-bleed Midnight Ink thỉnh thoảng. Các khối nội dung sử dụng khoảng cách section dọc rộng rãi 64-96px. FAQ section là danh sách một cột gồm các câu hỏi căn trái với icon plus Vermillion căn phải. Carousel sections sử dụng nút mũi tên tròn trái/phải phía trên nội dung cuộn ngang. Navigation là transparent top bar phẳng với hero — không có sticky behavior, không có nền cho đến khi hero kết thúc. Trang đọc từ trên xuống dưới như một chuỗi các editorial spread: bìa cam, trang kem với card grid và chat dramatizations, một trang đảo ngược đen, sau đó là footer ấm."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #151515"
    - "text (muted/border): #4f4f4f"
    - "background (canvas): #e4ddd5"
    - "surface (cards/buttons): #ffffff"
    - "accent border (outlined action, hero surface): #dd3508"
    - "decorative border (printed rules): #f3b8a9"
    - "primary action: #dd3508 (outlined action border)"

    example_component_prompts:
    - "**Vermillion Hero Band**: Nền full-width #dd3508, padding dọc 96px. Headline ở 48px Instrument Sans weight 500, #ffffff, letter-spacing -0.96px, căn trái với container max-width 1200px. Body text ở 18px weight 400, #ffffff. Top nav: logo 'BACKLIGHT' ở 12px Instrument Sans weight 600 uppercase, #ffffff, với letter-spacing 0.24px. Nav links màu #ffffff 14px weight 500. Nút pill trắng căn phải: nền #ffffff, chữ #151515, viền 1px #151515, radius 80px, padding 12px 24px."
    - "**Cream Canvas Section with Chat Cards**: Nền #e4ddd5. Section heading ở 32px Instrument Sans weight 500, #151515, letter-spacing -0.64px, căn trái. Bên dưới: layout so le của chat bubble cards — xen kẽ giữa bubble tối #151515 (radius 20px, padding 16px, chữ #ffffff, Fragment Mono 14px weight 400 ở letter-spacing -1.12px cho timestamp) và bubble sáng #ffffff với viền 1px #4f4f4f (cùng radius 20px và cấu trúc bên trong)."
    - "**FAQ Accordion List**: Nền #e4ddd5. Danh sách câu hỏi ở 18px Instrument Sans weight 500, #151515, padding dọc 24px, được phân cách bằng divider hairline 1px #4f4f4f. Mỗi row có icon plus Vermillion (#dd3508) căn phải, kích thước 20px. Không có nền trên row — divider làm công việc."
    - "**Dark Contrast Band**: Nền full-width #151515, padding dọc 80px. Headline ở 32px Instrument Sans weight 500, #ffffff. Container nội dung max-width 1200px, căn trái."
    - "**Outlined Action Button on Cream Canvas**: Nền trong suốt, viền 1px #dd3508, border-radius 80px, chữ #151515 ở 14px Instrument Sans weight 500, padding 12px 24px. Viền chromatic là màu duy nhất button mang theo."

  similar_brands:

    - "**Frame.io** — Cùng bảng màu editorial ấm với surface cream/beige và một điểm nhấn đậm duy nhất — cả hai đều là công cụ media-workflow ưa chuộng cảm giác printed-catalog hơn là dashboard SaaS điển hình"
    - "**Pitch** — Cùng canvas kem ấm với một màu accent mạnh và headline editorial căn trái — cả hai đều sử dụng spacing rộng rãi và chat/bubble cards như signature visual devices"
    - "**Ceros** — Cùng thẩm mỹ editorial-brand tông ấm, surface phẳng, không shadow, và một giọng chromatic duy nhất — cả hai đều xem trang như một ấn phẩm in"
    - "**Stripe** — Cùng tracking chặt trên display headline, section spacing rộng rãi, và cách sử dụng tự tin bảng màu thiên ấm với một điểm nhấn mạnh"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vermillion: #dd3508;
          --color-peach-hairline: #f3b8a9;
          --color-cream-vellum: #e4ddd5;
          --color-bone-white: #ffffff;
          --color-midnight-ink: #151515;
          --color-graphite: #4f4f4f;
          --color-charcoal: #333333;
          --color-ochre-tan: #d7cabb;
          --color-press-black: #000000;
        
          /* Typography — Font Families */
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fragment-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 17;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 21;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 23;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 24;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 29;
          --tracking-heading: -0.48px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 37;
          --tracking-heading-lg: -0.64px;
          --text-display: 39px;
          --leading-display: 45;
          --tracking-display: -0.78px;
          --text-display-lg: 48px;
          --leading-display-lg: 48;
          --tracking-display-lg: -0.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 16-24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
          --radius-full: 60px;
          --radius-full-2: 80px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 60px;
          --radius-inputs: 4px;
          --radius-buttons: 80px;
          --radius-chat-bubbles: 20px;
        
          /* Surfaces */
          --surface-cream-vellum: #e4ddd5;
          --surface-bone-white: #ffffff;
          --surface-midnight-ink: #151515;
          --surface-vermillion: #dd3508;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vermillion: #dd3508;
          --color-peach-hairline: #f3b8a9;
          --color-cream-vellum: #e4ddd5;
          --color-bone-white: #ffffff;
          --color-midnight-ink: #151515;
          --color-graphite: #4f4f4f;
          --color-charcoal: #333333;
          --color-ochre-tan: #d7cabb;
          --color-press-black: #000000;
        
          /* Typography */
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fragment-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 17;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 21;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 23;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 24;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 29;
          --tracking-heading: -0.48px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 37;
          --tracking-heading-lg: -0.64px;
          --text-display: 39px;
          --leading-display: 45;
          --tracking-display: -0.78px;
          --text-display-lg: 48px;
          --leading-display-lg: 48;
          --tracking-display-lg: -0.96px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
          --radius-full: 60px;
          --radius-full-2: 80px;
        }