mockups_made_easy___style_reference:
  info: "> Editorial design studio trên nền giấy trắng"

  theme: "light"

  info: "Hệ thống thị giác của Maneken mang phong cách gallery-first: nền gần như trắng giúp ảnh mockup chiếm ưu thế, trong khi một tông xanh bão hòa duy nhất đóng vai trò là giọng nói màu sắc duy nhất trong giao diện. Typography đảm nhận phần nặng nhất — một display face tùy chỉnh (TWKEverett) chiếm không gian trang với headline cỡ lớn 77–110px, leading dày 1.0–1.2, tạo cảm giác tạp chí editorial thay vì dashboard SaaS thông thường. Inter xử lý mọi chức năng ở kích thước compact 14–18px, tạo sự đối lập có chủ đích giữa display type sân khấu và UI tiện dụng. Các bề mặt giữ phẳng với border-radius 10px, đường viền chủ yếu là hairline đen tuyền, và độ nâng (elevation) chỉ dành riêng cho nội dung ảnh thông qua soft drop shadow nhiều lớp."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#0050b7` | `--color-signal-blue` | Primary action buttons, logo dot accent, active nav strokes — màu sắc duy nhất trong hệ thống tạo điểm nhấn rõ ràng trên nền đơn sắc |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, icon fills, hairline borders, image outlines — đen tuyền neo cấu trúc đơn sắc với độ tương phản tối đa (21:1 trên nền trắng) |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, button text trên nền tối, image backgrounds — bề mặt sáng giúp nội dung ảnh nổi bật |"
    info: "| Carbon | `#10151c` | `--color-carbon` | Dark surface backgrounds, body text trên card sáng, nav bar fills — gần như đen với sắc xanh nhẹ khó thấy, làm ấm tông trung tính đậm |"
    info: "| Fog | `#f4f4f4` | `--color-fog` | Page canvas background, hero section fill, soft card surfaces — trắng ấm nhẹ giúp phân biệt page chrome với content card trắng |"
    info: "| Ash | `#eaeaea` | `--color-ash` | Hairline dividers, subtle section borders, input outlines — nằm giữa fog và trắng để tạo sự phân cách cấu trúc nhẹ nhàng nhất |"
    info: "| Graphite | `#86868b` | `--color-graphite` | Muted subheadings, secondary metadata, heading accents — xám trung bình giúp giảm cấp text mà không chuyển sang xám hoàn toàn |"
    info: "| Graphite Smoke | `#3e3e3e` | `--color-graphite-smoke` | Alternate button background, dark UI surface variant — xám đậm ấm cho secondary filled actions khi xanh quá nổi |"
    info: "| Stone | `#a6a6a6` | `--color-stone` | Nav background overlays, tertiary surface tint — xám chức năng nhạt nhất dùng để tạo lớp ngữ cảnh |"

  tokens___typography:

    inter___toàn_bộ_ui_chrome__navigation__buttons__body_text__card_labels__footer__links__inputs__icons__weight_800_cho_wordmark_maneken_và_các_điểm_nhấn_chính__weight_500_cho_nav_items__weight_400_làm_mặc_định_ui__instance_200px_là_xử_lý_oversized_trang_trí__không_phải_kích_thước_type_làm_việc_thực_tế_____font_inter:
      - "**Thay thế:** system-ui hoặc -apple-system làm fallback"
      - "**Weights:** 400, 500, 600, 800"
      - "**Kích thước:** 10px, 14px, 15px, 18px, 24px, 28px, 40px, 200px"
      - "**Line height:** 1.00, 1.20, 1.25, 1.40"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Toàn bộ UI chrome: navigation, buttons, body text, card labels, footer, links, inputs, icons. Weight 800 cho wordmark MANEKEN và các điểm nhấn chính; weight 500 cho nav items; weight 400 làm mặc định UI. Instance 200px là xử lý oversized trang trí, không phải kích thước type làm việc thực tế."

    twkeverett___display_headlines_và_hero_copy_ở_55_110px_với_leading_gần_như_bằng_0_1_0_1_1__kiểu_chữ_lai_serif_grotesque_tùy_chỉnh_mang_lại_trọng_lượng_editorial_cho_trang___headline_hoạt_động_như_bìa_tạp_chí__không_phải_card_saas__dùng_ở_22_28px_cho_lead_paragraph_khi_inter_quá_trung_tính_____font_twkeverett:
      - "**Thay thế:** GT Sectra, Recoleta, hoặc Tiempos Headline"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 16px, 22px, 24px, 28px, 55px, 60px, 77px, 110px"
      - "**Line height:** 1.00, 1.10, 1.20, 1.45"
      - "**Letter spacing:** normal (không điều chỉnh tracking — kích thước dày và condensed letterforms tự tạo mật độ)"
      - "**Vai trò:** Display headlines và hero copy ở 55–110px với leading gần như bằng 0 (1.0–1.1). Kiểu chữ lai serif-grotesque tùy chỉnh mang lại trọng lượng editorial cho trang — headline hoạt động như bìa tạp chí, không phải card SaaS. Dùng ở 22–28px cho lead paragraph khi Inter quá trung tính."

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_arial:
      - "**Weights:** 400, 500"
      - "**Kích thước:** 13px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | — | `--text-body-sm` |"
      info: "| body-lg | 18px | 1.4 | — | `--text-body-lg` |"
      info: "| subheading | 22px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 55px | 1.1 | — | `--text-heading-lg` |"
      info: "| display | 77px | 1 | — | `--text-display` |"
      info: "| display-xl | 110px | 1 | — | `--text-display-xl` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| hero | 15px |"
      info: "| cards | 10px |"
      info: "| icons | 3px |"
      info: "| pills | 100px |"
      info: "| images | 10px |"
      info: "| buttons | 10px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.01) 0px 90px 40px 0px, rgba(0, 0, 0, 0.05...` | `--shadow-xl` |"
      info: "| xl-2 | `rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0....` | `--shadow-xl-2` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    primary_action_button:
      vai_trò: "Filled CTA — điểm neo màu sắc duy nhất cho các hành động chuyển đổi"

      info: "Nền #0050b7, chữ trắng (#ffffff), Inter weight 500 ở 15px. Padding 10px 20px. Border-radius 10px. Không border, không shadow. Hậu tố mũi tên (→) cùng màu trắng. Đây là filled chromatic button duy nhất trong hệ thống — dùng tiết kiệm để giữ giá trị tín hiệu."

    secondary_outline_button:
      vai_trò: "Ghost/outline variant cho các CTA ít nhấn mạnh hơn"

      info: "Nền trong suốt, border 1px solid #000000, chữ đen Inter weight 500 ở 15px. Padding 10px 20px. Border-radius 10px. Dùng khi primary blue button đã tồn tại trên trang và cần một hành động thứ hai."

    navigation_link:
      vai_trò: "Menu items trên top nav"

      info: "Inter weight 500 ở 15px, màu #000000, không gạch chân. Horizontal padding 6–10px. Khoảng cách giữa các nav items 18–20px. Trạng thái active không được trang trí trực quan — dựa vào ngữ cảnh."

    logo_lockup:
      vai_trò: "Brand mark trong header"

      info: "\"MANEKEN\" đặt bằng Inter weight 800, viết hoa toàn bộ, tracking dày, màu #000000. Theo sau là chấm tròn 4px solid #0050b7 ở mức baseline. Chấm xanh là chromatic mark duy nhất trong wordmark."

    display_headline:
      vai_trò: "Hero và section titles — khoảnh khắc type đặc trưng của trang"

      info: "TWKEverett weight 400 ở 77–110px, line-height 1.0, màu #000000. Hai dòng xếp chồng phổ biến (\"Mockups / made easy\"). Dòng đầu mang danh từ, dòng thứ hai mang động từ — tạo khoảng dừng khi đọc. Không italic, không gradient, không trang trí."

    section_subtitle:
      vai_trò: "Dòng hỗ trợ bên dưới display headline"

      info: "Inter weight 400 ở 18–24px, màu #86868b hoặc #000000, căn giữa, max-width ~600px. Thắt chặt mối quan hệ giữa hero headline và CTA bên dưới."

    mockup_image_card:
      vai_trò: "Gallery tiles hiển thị output của người sáng tạo"

      info: "Ảnh photographic full-bleed, không padding bên trong, border-radius 10px, border 1px solid #000000. Soft drop shadow nhiều lớp: rgba(0,0,0,0.01) 0px 90px 40px, rgba(0,0,0,0.05) 0px 50px 30px, rgba(0,0,0,0.09) 0px 20px 20px, rgba(0,0,0,0.1) 0px 6px 10px. Shadow rộng và nhẹ, không sắc — nâng ảnh lên khỏi canvas mà không tạo độ sâu sân khấu."

    creator_profile_card:
      vai_trò: "Ảnh kèm overlay ghi công người sáng tạo"

      info: "Cùng radius 10px và border như image card. Hàng ghi công nằm bên dưới hoặc overlay ở đáy: label Inter 14px nhỏ với avatar tròn 20px (hoặc pill). Không box shadow trên card — shadow chỉ trên ảnh."

    section_header_block:
      vai_trò: "Khối text căn giữa giới thiệu một gallery hoặc section tính năng"

      info: "Display headline (TWKEverett 40–60px) + subtitle (Inter 18px #86868b) + optional primary CTA button, tất cả căn giữa. Vertical padding 80px phía trên và dưới. Khối tạo khoảng thở rõ ràng giữa các visual gallery."

    cookie_consent_banner:
      vai_trò: "Thông báo có thể đóng ở góc dưới-bên trái"

      info: "Nền trắng (#ffffff), border-radius 10px, border 1px nhẹ. Body text hai dòng (Inter 14px đen) + nút \"Okay\" đen filled (Inter 500 chữ trắng, radius 10px). Cố định góc dưới-bên trái với margin ~16px từ mép viewport."

    top_navigation_bar:
      vai_trò: "Site header sticky/fixed"

      info: "Nền trắng (#ffffff) hoặc trong suốt, không border ở trạng thái đã cuộn, full-width với nav links căn giữa. Logo flush trái, auth actions flush phải (\"Log in\" text + nút \"Sign up\" xanh filled). Nav items căn giữa theo nhóm. Min-height ~56px."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng TWKEverett ở 77–110px với line-height 1.0 cho hero và section display headlines — leading dày là chữ ký của trang"
      - "Chỉ dùng #0050b7 Signal Blue cho primary action buttons, logo dot và active states; không bao giờ dùng cho body text, icons hoặc decorative borders"
      - "Áp dụng border-radius 10px cho tất cả cards, buttons, images và interactive surfaces làm ngôn ngữ góc chung"
      - "Xếp lớp soft drop shadow bốn tầng trên photographic image cards để nâng chúng lên khỏi canvas #f4f4f4"
      - "Đặt Inter body text ở 14–18px weight 400–500 — giọng UI là compact và chức năng, không sân khấu"
      - "Dùng #000000 cho hairlines, icons và text — đen tuyền ở 1px cung cấp khung xương cấu trúc cho layout"
      - "Giữ section gaps ở 80px để tạo khoảng thở editorial giữa các khối nội dung"

    không_nên_làm:
      - "Không thêm accent colors phụ — hệ thống là đơn sắc cộng một màu xanh; sắc thứ hai phá vỡ tín hiệu"
      - "Không dùng shadow sắc, alpha cao trên UI elements — soft, low-alpha, large-radius shadows chỉ dành cho photographic content"
      - "Không đặt display headlines bằng Inter — TWKEverett là face duy nhất được phép trên 40px; dùng Inter ở 77px làm phẳng khoảnh khắc editorial"
      - "Không dùng filled blue buttons cho secondary actions; ghost/outline (border #000000) giữ sự khan hiếm của màu xanh"
      - "Không thêm gradients, glows hoặc glassmorphism — hệ thống phẳng với single-layer surfaces"
      - "Không giảm border-radius dưới 10px cho primary surfaces; góc 10px là baseline của hệ thống, không phải 8px hay 6px"
      - "Không dùng màu cho phân cấp thông tin — dựa vào type weight, kích thước và bước #86868b Graphite để giảm cấp text, không phải biến thể màu sắc"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f4f4` | Nền trang — trắng ấm nhẹ phân biệt chrome với nội dung |"
    info: "| 1 | Card | `#ffffff` | Bề mặt nội dung, image cards, navigation bar, modals |"
    info: "| 2 | Dark Surface | `#10151c` | Dark mode cards, dark section backgrounds, gần như đen text trên card sáng |"

  elevation:

    - "**Image Card:** `rgba(0, 0, 0, 0.01) 0px 90px 40px 0px, rgba(0, 0, 0, 0.05) 0px 50px 30px 0px, rgba(0, 0, 0, 0.09) 0px 20px 20px 0px, rgba(0, 0, 0, 0.1) 0px 6px 10px 0px`"
    - "**Elevated Card:** `rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0.05) 0px 310px 190px 0px, rgba(0, 0, 0, 0.09) 0px 140px 140px 0px, rgba(0, 0, 0, 0.1) 0px 35px 75px 0px`"

  imagery:

    info: "Nhiếp ảnh là sản phẩm. Mọi section ngoài hero đều là dense image grid hiển thị mockup output trên các bề mặt thực tế — cốc cà phê, túi tote, billboard, laptop, biển hiệu, quần áo, bao bì. Ảnh được crop sát vào chủ thể, không có lifestyle staging, không có sự ấm áp của stock photography. Grid dùng 4–5 cột ở desktop width với gap 8–10px để tiles trông như contact sheet hơn là card gallery. Ảnh mang border 1px đen cộng soft shadow bốn lớp, đây là border treatment duy nhất trong hệ thống. Không có illustration, không có abstract graphic, không có product screenshot của editor trên bề mặt nhìn thấy — mockups CHÍNH LÀ câu chuyện sản phẩm."

  layout:

    info: "Page canvas full-bleed trong #f4f4f4 với nội dung căn giữa ở max-width ~1200px. Hero là centered text stack: display headline hai dòng khổng lồ, Inter subtitle một dòng, và một filled blue CTA — không hero image, không side-by-side split. Bên dưới hero, trang xen kẽ giữa full-bleed edge-to-edge image grid và centered section header blocks. Gallery đầu tiên hiển thị 4 cột mockup tiles xếp chặt với gap tối thiểu; các section sau dùng 4-column creator cards kèm ghi công. Navigation là fixed top bar với links căn giữa, logo flush trái, auth actions flush phải. Nhịp section rộng rãi: vertical padding 80px ngăn cách mỗi band. Trang đọc từ trên xuống dưới dạng headline → gallery → headline → gallery, giống editorial portfolio hơn là feature checklist."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #f4f4f4 (canvas) / #ffffff (surface)"
    - "border: #000000 (hairline) / #eaeaea (subtle divider)"
    - "accent: #0050b7 (Signal Blue — logo dot, active states)"
    - "primary action: #0050b7 (filled action)"
    - "dark surface: #10151c"

    3_5_example_component_prompts:

    - "*Tạo một hero section*: Nền #f4f4f4. Headline ở 110px TWKEverett weight 400, #000000, line-height 1.0. Hai dòng. Subtitle ở 18px Inter weight 400, #86868b, căn giữa, max-width 600px. Primary CTA: radius 10px, nền #0050b7, chữ #ffffff ở 15px Inter weight 500, padding 10px 20px, hậu tố \"→\" trắng."

    - "*Tạo một mockup image card*: Ảnh photographic full-bleed lấp đầy card, border-radius 10px, border 1px solid #000000, soft shadow nhiều lớp (rgba đen bốn tầng ở 0.01/0.05/0.09/0.1, blur radii 90/50/20/6px). Không padding bên trong."

    - "Tạo một Primary Action Button: Nền #0050b7, chữ #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA."

    - "*Tạo một section header block*: Căn giữa. TWKEverett 55px weight 400 #000000 headline. Inter 18px weight 400 #86868b subtitle bên dưới với gap 20px. Optional primary CTA button 30px bên dưới subtitle. Padding 80px trên và dưới khối."

    - "*Tạo một ghost button*: Nền trong suốt, border 1px solid #000000, border-radius 10px, Inter 15px weight 500 #000000 text, padding 10px 20px. Không shadow."

  similar_brands:

    - "**Linear** — Cùng cách tiếp cận monochrome-first với một accent xanh bão hòa duy nhất trên nền off-white; cả hai dùng compact Inter-based UI type kết hợp với oversized display moments"
    - "**Framer** — Editorial gallery-driven landing page với image grids làm bề mặt nội dung chính, spacing dày, và chromatic palette hạn chế"
    - "**Read.cv** — Magazine-style layout rhythm với centered text stacks, editorial headlines lớn, và dense image grids bên dưới fold"
    - "**Are.na** — Thẩm mỹ design tool yên tĩnh, white-canvas để nội dung do người dùng tạo chiếm ưu thế trong khi chrome tối giản và chức năng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #0050b7;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-carbon: #10151c;
          --color-fog: #f4f4f4;
          --color-ash: #eaeaea;
          --color-graphite: #86868b;
          --color-graphite-smoke: #3e3e3e;
          --color-stone: #a6a6a6;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twkeverett: 'TWKEverett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.25;
          --text-heading-lg: 55px;
          --leading-heading-lg: 1.1;
          --text-display: 77px;
          --leading-display: 1;
          --text-display-xl: 110px;
          --leading-display-xl: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-80: 80px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 10px;
          --radius-xl: 15px;
          --radius-2xl: 18px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-hero: 15px;
          --radius-cards: 10px;
          --radius-icons: 3px;
          --radius-pills: 100px;
          --radius-images: 10px;
          --radius-buttons: 10px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 90px 40px 0px, rgba(0, 0, 0, 0.05) 0px 50px 30px 0px, rgba(0, 0, 0, 0.09) 0px 20px 20px 0px, rgba(0, 0, 0, 0.1) 0px 6px 10px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0.05) 0px 310px 190px 0px, rgba(0, 0, 0, 0.09) 0px 140px 140px 0px, rgba(0, 0, 0, 0.1) 0px 35px 75px 0px;
        
          /* Surfaces */
          --surface-canvas: #f4f4f4;
          --surface-card: #ffffff;
          --surface-dark-surface: #10151c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #0050b7;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-carbon: #10151c;
          --color-fog: #f4f4f4;
          --color-ash: #eaeaea;
          --color-graphite: #86868b;
          --color-graphite-smoke: #3e3e3e;
          --color-stone: #a6a6a6;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twkeverett: 'TWKEverett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.25;
          --text-heading-lg: 55px;
          --leading-heading-lg: 1.1;
          --text-display: 77px;
          --leading-display: 1;
          --text-display-xl: 110px;
          --leading-display-xl: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-80: 80px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 10px;
          --radius-xl: 15px;
          --radius-2xl: 18px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 90px 40px 0px, rgba(0, 0, 0, 0.05) 0px 50px 30px 0px, rgba(0, 0, 0, 0.09) 0px 20px 20px 0px, rgba(0, 0, 0, 0.1) 0px 6px 10px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.01) 0px 550px 220px 0px, rgba(0, 0, 0, 0.05) 0px 310px 190px 0px, rgba(0, 0, 0, 0.09) 0px 140px 140px 0px, rgba(0, 0, 0, 0.1) 0px 35px 75px 0px;
        }