flying_papers___style_reference:
  info: "> Saturday morning cartoon confessional"

  theme: "light"

  info: "Flying Papers hoạt động như một bộ phim hoạt hình sáng thứ Bảy in trên giấy riso dày: một sân khấu tím nhạt phẳng, một dàn nhân vật nhỏ với màu sắc bão hòa rực rỡ, và typography cỡ lớn đến mức nuốt chửng viewport. Giọng thương hiệu to, táo bạo và không hề hối lỗi — nó không xin sự chú ý, nó cướp lấy. Mỗi màn hình phải giống như một poster đơn lẻ mạnh mẽ: một display headline chủ đạo, một mascot illustration hỗ trợ, một inline action, và khoảng thở rộng rãi. Borders đảm nhận vai trò chính thay vì shadows; màu sắc được dùng như sơn vẽ, không phải dữ liệu. Bề mặt luôn phẳng, góc cạnh sắc nét ở 6px, và thứ duy nhất mềm mại trong hệ thống là pill 100px trên gate button."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Dusk Violet | `#8584bd` | `--color-dusk-violet` | Primary canvas và hero background — sân khấu nơi mọi màu sắc khác biểu diễn |"
    info: "| Hi-Vis Yellow | `#f4ed36` | `--color-hi-vis-yellow` | Yellow accent cho outlined action borders, linked labels, và lightweight interactive emphasis. Không nâng cấp nó thành primary CTA color |"
    info: "| Buttery Yellow | `#f9cc73` | `--color-buttery-yellow` | Secondary display text và border mềm hơn — phiên bản dịu nhẹ hơn của Hi-Vis khi Hi-Vis quá mạnh |"
    info: "| Lilac Shadow | `#61609a` | `--color-lilac-shadow` | Card và block backgrounds — một violet đậm hơn cho bề mặt lồng trên sân khấu violet |"
    info: "| Bubblegum Pink | `#f8c1ba` | `--color-bubblegum-pink` | Decorative borders và confetti accent — một hồng ấm dùng tiết kiệm để tạo điểm nhấn |"
    info: "| Matcha Cream | `#b5c995` | `--color-matcha-cream` | Decorative borders và confetti accent — một sage phủ bụi cho dàn card phụ |"
    info: "| Magenta Punch | `#ac4f98` | `--color-magenta-punch` | Accent card surface — dành riêng cho standout blocks cần nổi bật hơn sân khấu |"
    info: "| Firecracker Red | `#c94245` | `--color-firecracker-red` | Red wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung |"
    info: "| Bone White | `#f9f5f2` | `--color-bone-white` | Hairline borders, dividers, input outlines, và card edges trên bề mặt sáng. Không nâng cấp nó thành primary CTA color |"
    info: "| Ink Black | `#1a1a1a` | `--color-ink-black` | Body text, primary borders, và outlined button strokes — gần-đen thực hiện công việc typographic trên bề mặt kem |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Hard borders, icons, và text trên bề mặt vàng — pure black khi cần độ tương phản cạnh tối đa |"

  tokens___typography:

    obviouslyvariable___display_và_large_heading_family___font_duy_nhất_đủ_to_cho_hệ_thống__kích_thước_mở_rộng_từ_18px_body_lên_đến_341px_poster_scale_display__tight_leading_0_80_1_00_làm_cho_multi_line_headlines_xếp_chồng_thành_khối_màu_đặc__calt_bị_tắt_để_giữ_các_dạng_hình_học_rộng_không_bị_trang_trí__thay_thế__founders_grotesk_condensed__knockout__hoặc_druk_wide_____font_obviouslyvariable:
      - "**Thay thế:** Founders Grotesk Condensed"
      - "**Weights:** 800, 900"
      - "**Kích thước:** 18, 20, 30, 100, 113, 130, 133, 149, 184, 241, 244, 341"
      - "**Line height:** 0.80–1.00"
      - "**Letter spacing:** 0.02em"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Vai trò:** Display và large heading family — font duy nhất đủ to cho hệ thống. Kích thước mở rộng từ 18px body lên đến 341px poster-scale display. Tight leading 0.80–1.00 làm cho multi-line headlines xếp chồng thành khối màu đặc; calt bị tắt để giữ các dạng hình học rộng không bị trang trí. Thay thế: Founders Grotesk Condensed, Knockout, hoặc Druk Wide."

    degularvariable___ultra_small_ui_text___nav__footer_micro_copy__và_inline_labels_ở_10px__con_ngựa_thồ_trung_tính_biến_mất_bên_cạnh_giọng_display__thay_thế__inter__ibm_plex_sans_____font_degularvariable:
      - "**Thay thế:** Inter"
      - "**Weights:** 400"
      - "**Kích thước:** 10"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Ultra-small UI text — nav, footer micro-copy, và inline labels ở 10px. Con ngựa thồ trung tính biến mất bên cạnh giọng display. Thay thế: Inter, IBM Plex Sans."

    bergen_monoregular___monospaced_micro_type_cho_nav__tags__và_small_data_labels___tạo_nhịp_điệu_máy_chữ_đối_lập_với_display_tròn__leading_0_80_trên_monospace_là_signature__mono_xếp_chặt_giống_như_một_hóa_đơn__thay_thế__jetbrains_mono__ibm_plex_mono_____font_bergenmonoregular:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 12, 14"
      - "**Line height:** 0.80, 1.00"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"calt\" 0`"
      - "**Vai trò:** Monospaced micro-type cho nav, tags, và small data labels — tạo nhịp điệu máy chữ đối lập với display tròn. Leading 0.80 trên monospace là signature: mono xếp chặt giống như một hóa đơn. Thay thế: JetBrains Mono, IBM Plex Mono."

    degulardisplay_bold___small_bold_body_text_cho_ctas__button_labels__và_emphasized_micro_copy__tracking_0_05em_mở_rộng_letterforms_đủ_để_đọc_ở_16px_mà_không_bị_chật__thay_thế__degular_bold__s_hne_bold_____font_degulardisplay_bold:
      - "**Thay thế:** Söhne Bold"
      - "**Weights:** 700"
      - "**Kích thước:** 16"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.05em"
      - "**Vai trò:** Small bold body text cho CTAs, button labels, và emphasized micro-copy. Tracking 0.05em mở rộng letterforms đủ để đọc ở 16px mà không bị chật. Thay thế: Degular Bold, Söhne Bold."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | — | `--text-caption` |"
      info: "| body | 16px | 1 | 0.8px | `--text-body` |"
      info: "| body-lg | 18px | 0.9 | 0.36px | `--text-body-lg` |"
      info: "| subheading | 30px | 0.9 | 0.6px | `--text-subheading` |"
      info: "| heading-sm | 100px | 0.9 | 2px | `--text-heading-sm` |"
      info: "| heading | 149px | 0.85 | 2.98px | `--text-heading` |"
      info: "| heading-lg | 184px | 0.85 | 3.68px | `--text-heading-lg` |"
      info: "| display | 341px | 0.8 | 6.82px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 100px |"
      info: "| cards | 6px |"
      info: "| buttons | 100px |"

    layout:

      - "**Section gap:** 40px"
      - "**Card padding:** 17px"
      - "**Element gap:** 17px"

  components:

    gate_pill_button:
      vai_trò: "Primary age-gate / entry action"

      info: "Primary action duy nhất của hệ thống. Fill màu kem (#f9f5f2), border-radius 100px, horizontal padding 17px, DegularDisplay-Bold 16px / tracking 0.05em màu Pure Black (#000000). Không drop shadow; hình dạng pill tròn và độ tương phản cao với sân khấu violet tự đảm nhận mọi việc."

    outlined_display_button:
      vai_trò: "Secondary action đặt trên hero surfaces"

      info: "Fill trong suốt với border 2–3px Hi-Vis Yellow (#f4ed36). Text Hi-Vis Yellow, DegularDisplay-Bold 16px, horizontal padding 17px, radius 100px. Border đảm nhận vai trò của fill — đây là chromatic outlined action, không phải filled CTA."

    underline_text_link:
      vai_trò: "Tertiary action (ví dụ: age-decline link)"

      info: "Bone White (#f9f5f2) trên sân khấu violet, không background, underline 1px. Bergen Mono 12px / leading 0.80. Letter-spaced đủ rộng để giống disclaimer, không phải button."

    hero_display_headline:
      vai_trò: "Tuyên bố chính của trang"

      info: "ObviouslyVariable 800–900 ở 184–341px, line-height 0.80–0.85, tracking 0.02em. Màu sắc luân phiên giữa Hi-Vis Yellow (#f4ed36) và Buttery Yellow (#f9cc73). Kích thước đủ để lấp đầy 60–80% chiều cao viewport. Không max-width — type tràn ra mép canvas."

    brand_wordmark:
      vai_trò: "Nhận diện trang web trong nav"

      info: "ObviouslyVariable 800 màu Hi-Vis Yellow, 30px, căn giữa phía trên hero. Hoạt động như logo một dòng — tên thương hiệu CHÍNH LÀ mark, không có logotype riêng."

    mascot_illustration:
      vai_trò: "Nhân vật đồng hành cùng headline"

      info: "Nhân vật hoạt hình với outline đen dày, fill kem, và flat color accents (Bone White, Hi-Vis Yellow). Hiển thị phía sau hoặc ló ra qua display headline ở tỷ lệ viewport. Không gradients, không shading — chỉ flat 2–3 color fills."

    confetti_card:
      vai_trò: "Decorative content blocks rải rác trên trang"

      info: "Card vuông hoặc chữ nhật với một trong các accent surface colors (Matcha Cream #b5c995, Bubblegum Pink #f8c1ba, Magenta Punch #ac4f98, Firecracker Red #c94245). Radius 6px, padding 17px, không shadow, không border. Mỗi card là một mảng sơn phẳng — màu sắc CHÍNH LÀ nội dung."

    dark_text_card:
      vai_trò: "Information blocks hoặc blocks nhiều chữ"

      info: "Fill Bone White (#f9f5f2), radius 6px, padding 17px, text Ink Black (#1a1a1a). Tùy chọn border 1px Ink Black. Dùng DegularVariable hoặc bergen_mono cho body."

    color_swatch_card:
      vai_trò: "Trưng bày bảng màu thương hiệu"

      info: "Solid fill với một trong các brand hoặc accent colors, radius 6px, padding 17px, kèm tên màu và hex đặt trong DegularDisplay-Bold 16px. Vừa là decoration vừa là legend."

    top_nav_bar:
      vai_trò: "Minimal site navigation"

      info: "Trong suốt trên sân khấu violet. Brand wordmark căn giữa, không có menu items hiển thị ở hero. Padding 17px trên/dưới, border dưới 1px màu Dusk Violet (#8584bd) hoặc trong suốt."

    mono_label_tag:
      vai_trò: "Category, date, hoặc metadata tag"

      info: "Bergen Mono 12px / leading 0.80, không fill, tùy chọn border 1px cùng màu text hiện tại. Letter-spaced 0.05em. Đọc như một nhãn đóng dấu hơn là pill button."

    footer_block:
      vai_trò: "Nội dung cuối trang"

      info: "Solid block — thường là brand hoặc accent color (ví dụ: #375027 xanh đậm đã quan sát). Bergen Mono 12px, text Bone White, padding 17–25px. Không decorative borders."

  do_s_and_don_ts:

    nên_làm:
      - "Đặt hero display type từ 184px đến 341px trong ObviouslyVariable 800–900, line-height 0.80–0.85, tracking 0.02em"
      - "Dùng Hi-Vis Yellow (#f4ed36) làm outlined action border duy nhất; kết hợp với pattern Outlined Display Button, không bao giờ dùng filled button"
      - "Xếp chồng một headline khổng lồ, một mascot illustration, và một inline action trên mỗi màn hình — để phần còn lại thở"
      - "Giữ radii chính xác 6px cho cards và 100px cho buttons/tags — sự tương phản giữa khối sắc cạnh và pill mềm là signature"
      - "Đặt cards trên sân khấu violet với padding 17px và không shadows; để flat color fills tự làm công việc thị giác"
      - "Dùng accent palette (Bubblegum Pink, Matcha Cream, Magenta Punch, Firecracker Red) mỗi lần một card, không bao giờ đặt cạnh nhau trên cùng một hàng"
      - "Đặt micro-copy trong Bergen Mono ở 12px với leading 0.80 — mono xếp chặt là texture của hóa đơn trên giấy riso"

    không_nên_làm:
      - "Không thêm filled CTA button — hệ thống chỉ dùng outlined Hi-Vis Yellow actions và pill cream buttons"
      - "Không dùng ObviouslyVariable dưới 18px hoặc trên 341px — ngoài khoảng đó nó mất tác động poster"
      - "Không thêm drop shadows, glow effects, hoặc inner shadows — mọi bề mặt đều là sơn phẳng"
      - "Không kết hợp quá hai accent colors trong một composition — confetti được rải rác, không phải confetti-confetti"
      - "Không làm mềm violet canvas bằng white hoặc cream page background — Dusk Violet (#8584bd) LÀ sân khấu, không phải section accent"
      - "Không làm tròn card corners quá 6px — bất cứ thứ gì mềm hơn làm hệ thống giống SaaS, không phải riso"
      - "Không dùng contextual alternates của ObviouslyVariable — calt bị tắt ở mọi nơi để giữ các dạng hình học rộng không bị trang trí"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Dusk Violet Stage | `#8584bd` | Full-bleed page canvas và hero background |"
    info: "| 1 | Bone White Card | `#f9f5f2` | Light card và button surface trên sân khấu violet |"
    info: "| 2 | Lilac Shadow Block | `#61609a` | Nested surface cho content blocks nằm trên sân khấu violet |"
    info: "| 3 | Hi-Vis Yellow Surface | `#f4ed36` | Accent surface cho element quan trọng nhất trên một màn hình nhất định |"
    info: "| 4 | Accent Paint Card | `#f8c1ba` | Decorative confetti card surface (luân phiên: #b5c995, #ac4f98, #c94245) |"

  elevation:

    info: "Elevation cố tình không có. Hệ thống là risograph phẳng: chiều sâu đến từ độ tương phản màu sắc và thứ tự xếp chồng, không bao giờ từ shadows. Một card 6px trên sân khấu violet đọc như một swatch in ấn, không phải panel nổi."

  imagery:

    info: "Chỉ illustration — không photography, không 3D renders, không abstract gradients. Ngôn ngữ thị giác là hand-drawn cartoon với outline đen dày (2–3px), flat 2–3 color fills, và không shading. Nhân vật là mascots tương tác với type (ló ra, dựa vào, đứng trên một chữ cái). Icons là line-drawn màu Pure Black hoặc Bone White, stroke 1.5–2px. Imagery là decorative atmosphere trước tiên, không bao giờ giải thích — type mang thông điệp, character mang tâm trạng."

  layout:

    info: "Full-bleed poster layouts không có max-width constraint. Mỗi màn hình là một composition duy nhất theo kích thước viewport: một ObviouslyVariable headline khổng lồ căn giữa hoặc căn trái, một mascot illustration chồng lên type, và một inline action nhỏ bên dưới. Các section không luân phiên sáng tối — toàn bộ trang nằm trên Dusk Violet canvas với flat color cards đặt lên trên. Navigation là một wordmark căn giữa, không có menu bar. Card grids là sắp xếp 2–3 cột lỏng lẻo với gap 40px rộng rãi; cards được định kích thước theo nội dung, không đồng đều. Density là cực đoan: một ý tưởng trên mỗi màn hình, bao quanh bởi khoảng thở violet."

  agent_prompt_guide:

    quick_color_reference:
    - "text trên nền sáng: #1a1a1a"
    - "text trên nền vàng: #000000"
    - "reverse text trên violet: #f9f5f2"
    - "background: #8584bd (Dusk Violet)"
    - "card surface: #f9f5f2 (Bone White)"
    - "accent: #f4ed36 (Hi-Vis Yellow) cho element quan trọng nhất"
    - "primary action: #f4ed36 (outlined action border)"

    3_example_component_prompts:

    - "**Hero screen với mascot**: Full-bleed Dusk Violet (#8584bd) background. Brand wordmark 'Flying Papers' căn giữa trong ObviouslyVariable 800 ở 30px, #f4ed36, đầu viewport. Main headline ở 244px ObviouslyVariable 900, line-height 0.82, letter-spacing 0.02em, fill #f4ed36 (luân phiên với #f9cc73 theo từng từ). Một mascot illustration với outline đen 2px và flat fills, đặt để ló ra qua type gần trung tâm dọc. Bên dưới headline, một Outlined Display Button: transparent fill, border 2px #f4ed36, radius 100px, horizontal padding 17px, 'I'M OVER 18, LET ME IN' trong DegularDisplay-Bold 16px, #f4ed36. Bên dưới, một Underline Text Link màu #f9f5f2, Bergen Mono 12px, leading 0.80, underline 1px."

    - "**Confetti card grid section**: Dusk Violet (#8584bd) background tiếp nối từ hero. Một grid 3 cột lỏng lẻo của Confetti Cards với gap 40px. Mỗi card: solid fill với một trong các màu #f8c1ba, #b5c995, #ac4f98, hoặc #c94245; radius 6px; padding 17px; không border, không shadow. Bên trong mỗi card, một Mono Label Tag trong Bergen Mono 12px / leading 0.80, tracking 0.05em, màu #1a1a1a hoặc #f9f5f2 tùy độ sáng card, và một dòng body ngắn trong DegularVariable 16px."

    - "**Color swatch legend block**: Bone White (#f9f5f2) card, radius 6px, padding 17px, nằm trên sân khấu violet. Heading 'PALETTE' trong DegularDisplay-Bold 16px, tracking 0.05em, #1a1a1a. Bên dưới, một grid 2 hàng của Color Swatch Cards — mỗi card là hình vuông radius 6px được fill với một brand hoặc accent color, kèm giá trị hex đặt trong Bergen Mono 12px / leading 0.80 trực tiếp trên swatch với text tương phản."

  similar_brands:

    - "**Bumble** — Cùng cách dùng một saturated vàng đơn lẻ không sợ hãi trên nền màu phẳng, với oversized rounded display type và pill-shaped actions"
    - "**Skittles / candy brand microsites** — Confetti-bright accent palette rải rác trên dominant canvas color, cartoon character mascots, và poster-scale headline type"
    - "**Kakao Entertainment** — Heavy condensed display type ở tỷ lệ viewport, flat colored surfaces, và characters đâm xuyên qua type"
    - "**Dazed Magazine** — Riso-print aesthetic với loud display headlines, tight leading, và một chromatic palette giới hạn nhưng tự tin trên một stage color duy nhất"
    - "**Telfar** — Anti-corporate flat colored backgrounds, oversized custom display type, và pill buttons với bold black-on-cream contrast"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-dusk-violet: #8584bd;
          --color-hi-vis-yellow: #f4ed36;
          --color-buttery-yellow: #f9cc73;
          --color-lilac-shadow: #61609a;
          --color-bubblegum-pink: #f8c1ba;
          --color-matcha-cream: #b5c995;
          --color-magenta-punch: #ac4f98;
          --color-firecracker-red: #c94245;
          --color-bone-white: #f9f5f2;
          --color-ink-black: #1a1a1a;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-obviouslyvariable: 'ObviouslyVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-degularvariable: 'DegularVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bergenmonoregular: 'bergen_monoregular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-degulardisplay-bold: 'DegularDisplay-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1;
          --tracking-body: 0.8px;
          --text-body-lg: 18px;
          --leading-body-lg: 0.9;
          --tracking-body-lg: 0.36px;
          --text-subheading: 30px;
          --leading-subheading: 0.9;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 100px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: 2px;
          --text-heading: 149px;
          --leading-heading: 0.85;
          --tracking-heading: 2.98px;
          --text-heading-lg: 184px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: 3.68px;
          --text-display: 341px;
          --leading-display: 0.8;
          --tracking-display: 6.82px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-160: 160px;
        
          /* Layout */
          --section-gap: 40px;
          --card-padding: 17px;
          --element-gap: 17px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 6px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-dusk-violet-stage: #8584bd;
          --surface-bone-white-card: #f9f5f2;
          --surface-lilac-shadow-block: #61609a;
          --surface-hi-vis-yellow-surface: #f4ed36;
          --surface-accent-paint-card: #f8c1ba;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-dusk-violet: #8584bd;
          --color-hi-vis-yellow: #f4ed36;
          --color-buttery-yellow: #f9cc73;
          --color-lilac-shadow: #61609a;
          --color-bubblegum-pink: #f8c1ba;
          --color-matcha-cream: #b5c995;
          --color-magenta-punch: #ac4f98;
          --color-firecracker-red: #c94245;
          --color-bone-white: #f9f5f2;
          --color-ink-black: #1a1a1a;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-obviouslyvariable: 'ObviouslyVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-degularvariable: 'DegularVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bergenmonoregular: 'bergen_monoregular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-degulardisplay-bold: 'DegularDisplay-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1;
          --tracking-body: 0.8px;
          --text-body-lg: 18px;
          --leading-body-lg: 0.9;
          --tracking-body-lg: 0.36px;
          --text-subheading: 30px;
          --leading-subheading: 0.9;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 100px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: 2px;
          --text-heading: 149px;
          --leading-heading: 0.85;
          --tracking-heading: 2.98px;
          --text-heading-lg: 184px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: 3.68px;
          --text-display: 341px;
          --leading-display: 0.8;
          --tracking-display: 6.82px;
        
          /* Spacing */
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 100px;
        }