paste___style_reference:
  info: "> Đèn lồng hổ phách trên đá cẩm thạch trắng — logo gradient ấm áp của thương hiệu lơ lửng trong khoảng trắng rộng lớn, như một ô cửa sổ có ánh đèn duy nhất trong tòa nhà phủ đầy tuyết."

  theme: "light"

  info: "Mang cảm giác ánh nắng xuyên qua một gallery tối giản — khoảng trắng rộng lớn với typography đen và một điểm nhấn màu hổ phách ấm áp thu hút ánh nhìn như chiếc đèn lồng trong tuyết. Trang web bị chi phối bởi trắng tinh (#ffffff) và gần trắng (#f5f5f7) với chữ gần đen (#101010), tạo độ tương phản cực cao. system-ui ở kích thước display (54-80px) với letter-spacing chặt (-0.013em) và weight 400-700 mang lại cho headline cảm giác native-OS, củng cố bản sắc Mac-utility. Gradient logo màu hổ phách-cam (rgb(240,100,19) → rgb(254,171,48)) là yếu tố ấm áp duy nhất trên một canvas đơn sắc, khiến nó trở nên vô cùng thu hút. CTA button xanh (#0088ff) với border-radius 100px pill là lời kêu gọi hành động duy nhất — thương hiệu ấm, CTA mát, nền trắng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Amber Flame | `linear-gradient(0deg, rgb(240, 100, 19) -29.375%, rgb(254, 171, 48) 100%)` | `--color-amber-flame` | Logo, brand mark, gradient start — màu cam ấm áp neo giữ toàn bộ bản sắc như yếu tố màu sắc duy nhất trên canvas đơn sắc |"
    info: "| Honey Glow | `#feab30` | `--color-honey-glow` | Gradient end của logo, highlight ấm áp — nâng hổ phách lên vùng vàng, xuất hiện trong section headings và brand accents |"
    info: "| Signal Blue | `#0088ff` | `--color-signal-blue` | Primary CTA buttons, interactive links — xanh mát đối lập với thương hiệu hổ phách ấm, tạo sự tương phản nhiệt độ có chủ đích, phân tách bản sắc khỏi hành động |"
    info: "| Bright Blue | `#1c95ff` | `--color-bright-blue` | Hover/active state cho CTA xanh, secondary interactive highlights |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary page background, card surfaces, hero sections |"
    info: "| Snow Gray | `#f5f5f7` | `--color-snow-gray` | Alternating section backgrounds, phân biệt bề mặt tinh tế với nền trắng |"
    info: "| Mist | `#f0f0f0` | `--color-mist` | Divider backgrounds, subtle containers |"
    info: "| Silver | `#d0d0d3` | `--color-silver` | Borders, decorative dividers |"
    info: "| Pewter | `#ababb0` | `--color-pewter` | Secondary body text, captions, muted labels |"
    info: "| Smoke | `#6e6e73` | `--color-smoke` | Tertiary text, metadata, footnotes |"
    info: "| Charcoal | `#272727` | `--color-charcoal` | Dark surface backgrounds trong dark sections |"
    info: "| Ink | `#101010` | `--color-ink` | Primary heading và body text color |"
    info: "| True Black | `#000000` | `--color-true-black` | Maximum contrast text, nav links, icon color |"
    info: "| Vivid Green | `#34c759` | `--color-vivid-green` | Feature category indicator, privacy/security highlights |"
    info: "| Electric Magenta | `#cb30e0` | `--color-electric-magenta` | Feature category indicator, collaboration highlights |"
    info: "| Alert Red | `#ff383c` | `--color-alert-red` | Feature category indicator, emphasis highlights |"

  tokens___typography:

    system_ui___primary_typeface_cho_mọi_nội_dung___headlines__body__subheadings__sử_dụng_system_font_stack_là_một_lựa_chọn_có_chủ_đích__giúp_ứng_dụng_mang_cảm_giác_native_trên_macos_ios__củng_cố_bản_sắc_clipboard_manager_như_os_extension__weight_400_cho_body__600_700_cho_headlines_____font_system_ui:
      - "**Thay thế:** SF Pro Display / SF Pro Text (system default trên Apple), Inter trên hệ thống không phải Apple"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 15px, 16px, 18px, 22px, 24px, 40px, 54px, 60px, 80px"
      - "**Line height:** 0.96–1.67 (chặt ở kích thước display, thoải mái ở body)"
      - "**Letter spacing:** -1.04px ở 80px, -0.78px ở 60px, -0.70px ở 54px; tracking dương +0.36–1.01px ở kích thước nhỏ (15-18px) để dễ đọc ở tỉ lệ caption"
      - "**Vai trò:** Primary typeface cho mọi nội dung — headlines, body, subheadings. Sử dụng system font stack là một lựa chọn có chủ đích, giúp ứng dụng mang cảm giác native trên macOS/iOS, củng cố bản sắc clipboard-manager-như-OS-extension. Weight 400 cho body, 600-700 cho headlines."

    inter___dùng_cho_nhãn_section_press_media_logos___metadata_text_nhỏ_nơi_metrics_của_system_ui_có_thể_không_tối_ưu____font_inter:
      - "**Thay thế:** Inter (Google Fonts)"
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.29"
      - "**Letter spacing:** -0.41px ở 14px — tracking chặt cho compact labels"
      - "**Vai trò:** Dùng cho nhãn section press/media logos — metadata text nhỏ nơi metrics của system-ui có thể không tối ưu"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 18 | -0.41px | `--text-caption` |"
      info: "| body | 16px | 24 | — | `--text-body` |"
      info: "| subheading | 18px | 24 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 28 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 44 | -0.24px | `--text-heading` |"
      info: "| heading-lg | 54px | 56 | -0.7px | `--text-heading-lg` |"
      info: "| display | 80px | 80 | -1.04px | `--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: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 70 | 70px | `--spacing-70` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 16-20px |"
      info: "| badges | 100px |"
      info: "| images | 16-24px |"
      info: "| buttons | 100px |"
      info: "| containers | 24-40px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(16, 16, 16, 0.1) 0px 0px 30px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    primary_cta_button_filled_pill:
      vai_trò: "Main call-to-action xuyên suốt hero và sections"

      info: "Background #0088ff, chữ trắng, border-radius 100px (full pill). Padding 8px 20px. system-ui weight 600, ~16px. Không border. Hover state chuyển sang #1c95ff. Hình dạng pill với radius 100px là một điểm nhìn định hình — mọi button đều được bo tròn hoàn toàn."

    ghost_pill_button_outline:
      vai_trò: "Secondary actions, alternative CTAs"

      info: "Transparent background, border color khớp với màu chữ. border-radius 100px. Padding 10px 30px — lớn hơn một chút so với filled variant. system-ui weight 500-600."

    navigation_bar:
      vai_trò: "Top-level site navigation, sticky header"

      info: "Nền trắng, căn giữa theo chiều ngang. Logo (icon gradient hổ phách + 'Paste' màu đen) bên trái. Nav links màu #000000, system-ui weight 400-500 ở ~16px. 'Try for free' pill button căn phải màu #0088ff. Links bao gồm dropdown (ví dụ: 'Use Cases ▾')."

    hero_section:
      vai_trò: "Primary landing area với product showcase"

      info: "Nền trắng tinh (#ffffff). Layout căn giữa. Product screenshots (Mac, iPhone, iPad) được ghép lại với nhau làm hero image. Headline ở 54-60px, system-ui weight 700, #101010, letter-spacing chặt. Body text ở 18px, weight 400, #6e6e73. CTA button bên dưới body text."

    feature_section_amber_headline:
      vai_trò: "Giới thiệu section với brand-colored headline"

      info: "Background #f5f5f7 (Snow Gray). Headline lớn ở 54-80px với gradient thương hiệu hổ phách-cam — đây là signature move: display-size text được render bằng brand gradient trên nền xám nhạt. Body text màu #101010 hoặc #6e6e73."

    feature_card:
      vai_trò: "Individual feature highlight trong grid layouts"

      info: "Nền trắng (#ffffff) hoặc Snow Gray (#f5f5f7). border-radius 16-20px. Padding 20-30px. Shadow: rgba(16,16,16,0.1) 0px 0px 30px — soft ambient glow, không directional. Headline bằng system-ui weight 600, 22-24px. Body weight 400, 16px, #6e6e73."

    category_color_indicator:
      vai_trò: "Visual markers cho feature categories (privacy, collaboration, v.v.)"

      info: "Bốn chromatic accents được dùng làm category identifiers: #0088ff (productivity), #34c759 (privacy/security), #cb30e0 (collaboration), #ff383c (power features). Được áp dụng dưới dạng text color hoặc border-color trên body elements, không bao giờ làm backgrounds."

    product_screenshot_container:
      vai_trò: "Device mockup display cho product imagery"

      info: "Product screenshots được hiển thị trong device frames (MacBook, iPhone, iPad). Images có border-radius 16-24px khi không nằm trong device frames. Được sắp xếp theo bố cục chồng lên nhau — các thiết bị chồng nhẹ lên nhau để thể hiện hệ sinh thái. Không có drop shadow trên device frames."

    section_divider_surface_shift:
      vai_trò: "Phân cách trực quan giữa các page sections"

      info: "Không có đường divider nhìn thấy được — các section được phân cách bằng sự luân phiên màu nền giữa #ffffff và #f5f5f7 với khoảng cách dọc lớn 80-120px. Bản thân sự chuyển đổi CHÍNH LÀ divider."

    pricing_cta_block:
      vai_trò: "Conversion-focused pricing section"

      info: "Chứa 'Buy Now' và 'Try for Free' pill buttons. Layout có thể căn giữa với thông tin giá bằng system-ui weight 600-700 ở tỉ lệ heading. Blue filled button cho primary action, ghost/outline variant cho secondary."

  do_s_and_don_ts:

    do:
      - "Sử dụng border-radius 100px cho TẤT CẢ buttons, badges và pill-shaped elements — đây là điều bắt buộc và định hình bản sắc thị giác"
      - "Luân phiên page sections giữa nền #ffffff và #f5f5f7 để tạo nhịp điệu mà không cần divider nhìn thấy được"
      - "Đặt display headlines (40px+) bằng system-ui weight 600-700 với negative letter-spacing (-0.7px đến -1.04px) — tracking chặt ở kích thước lớn là điều thiết yếu"
      - "Dành riêng gradient hổ phách-cam (rgb(240,100,19) → rgb(254,171,48)) cho brand mark và occasional headline accents — không bao giờ dùng cho backgrounds hoặc bề mặt lớn"
      - "Giữ tất cả CTA buttons màu #0088ff với chữ trắng — sự phân tách nhiệt độ thương hiệu ấm / CTA mát là pattern tương tác cốt lõi"
      - "Sử dụng #6e6e73 hoặc #ababb0 cho secondary/body text để duy trì hệ thống phân cấp headline tương phản cao / body tương phản thấp"
      - "Áp dụng soft ambient shadow (rgba(16,16,16,0.1) 0px 0px 30px) cho elevated cards — không bao giờ dùng sharp directional shadows"

    don_t:
      - "Không bao giờ sử dụng gradient hổ phách-cam làm button fill — nó chỉ dành cho logo và decorative headline accents"
      - "Không bao giờ trộn sharp-corner containers (0px radius) với pill-radius system — minimum radius cho bất kỳ container nào là 8px, với 16-20px cho cards"
      - "Không bao giờ sử dụng nhiều hơn một chromatic accent color (#0088ff) trong một CTA context duy nhất — bốn category colors (#34c759, #cb30e0, #ff383c) dành cho indicators, không phải buttons"
      - "Không bao giờ đặt body text ở weight 700 — dành 700 cho headlines ở 40px+; body giữ ở 400-500"
      - "Không bao giờ thêm visible border lines giữa các section — sử dụng background color shifts (#ffffff ↔ #f5f5f7) và spacing thay thế"
      - "Không bao giờ sử dụng directional hoặc hard-edged shadows — shadow duy nhất trong hệ thống là ambient 30px blur ở 10% opacity"
      - "Không bao giờ áp dụng positive letter-spacing cho headlines — display type luôn dùng negative tracking; positive spacing chỉ dành cho small labels (14-18px)"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Primary page background |"
    info: "| 1 | Section Alternate | `#f5f5f7` | Alternating section backgrounds để tạo nhịp điệu thị giác |"
    info: "| 2 | Elevated Card | `#ffffff` | Cards và containers nổi lên trên Section Alternate với ambient shadow |"

  elevation:

    - "**Feature Card:** `rgba(16, 16, 16, 0.1) 0px 0px 30px 0px`"

  imagery:

    info: "Product-focused device mockups chiếm ưu thế — MacBook, iPhone và iPad được hiển thị cùng nhau trong bố cục đã được sắp xếp, nơi các thiết bị chồng nhẹ lên nhau để truyền tải sự thống nhất của hệ sinh thái. Screenshots hiển thị UI ứng dụng thực tế với các clipboard items đầy màu sắc (ảnh, text snippets, bản đồ, tin nhắn) tạo điểm nhấn thị giác trên nền trang đơn sắc. Không có lifestyle photography, không có abstract illustrations. Hero image là sự kết hợp của ba device frames căn giữa trên nền trắng, tạo cảm giác 'product showcase in a gallery'. Press logos được hiển thị bằng màu xám nhạt. Gradient hổ phách-cam chỉ xuất hiện trong logo icon và làm headline text color trong feature sections — nó được xử lý như một vật liệu quý giá, dùng một cách tiết kiệm. Phong cách icon tương tự SF Symbols của Apple: mono-weight, single-color, functional. Mật độ tổng thể thiên về text-dominant với product imagery lớn làm section anchors."

  layout:

    info: "Container căn giữa max-width ~1200px. Hero full-width trắng với headline căn giữa, body text căn giữa và multi-device product screenshot được sắp xếp bên dưới. CTA button căn giữa bên dưới body copy. Sticky navigation bar ở trên cùng với logo trái, links giữa, CTA phải. Bên dưới hero: một thanh press-logos mỏng (social proof). Sections luân phiên giữa nền #ffffff và #f5f5f7 với khoảng cách dọc 80-120px. Feature sections sử dụng amber-gradient headlines lớn căn giữa, theo sau là explanatory content. Nội dung chủ yếu là centered single-column — không có sidebars, tối thiểu multi-column grids. Nhịp điệu section: hero → social proof → feature intro (amber headline trên nền xám) → feature details → feature section tiếp theo. Trang web đọc như một vertical scroll với các section breaks rõ ràng thông qua background shifts."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #101010"
    - "Text (secondary): #6e6e73"
    - "Text (muted): #ababb0"
    - "Background (primary): #ffffff"
    - "Background (alternate): #f5f5f7"
    - "CTA: #0088ff"
    - "Brand gradient: linear-gradient(0deg, rgb(240,100,19) -29%, rgb(254,171,48) 100%)"

    example_component_prompts:

    - "Tạo một hero section: nền trắng (#ffffff). Headline căn giữa ở 54px system-ui weight 700, màu #101010, letter-spacing -0.7px, line-height 56px. Body text bên dưới ở 18px weight 400, màu #6e6e73, line-height 24px. Blue pill CTA button (#0088ff, chữ trắng, border-radius 100px, padding 8px 20px, system-ui weight 600). Khoảng cách 80px bên dưới."

    - "Tạo một feature intro section: background #f5f5f7. Headline lớn ở 60-80px với text được render bằng gradient hổ phách-cam (linear-gradient(0deg, rgb(240,100,19), rgb(254,171,48)), -webkit-background-clip: text). system-ui weight 700, letter-spacing -1.04px. Căn giữa với padding trên/dưới 120px."

    - "Tạo một navigation bar: nền trắng, max-width 1200px căn giữa. Trái: icon gradient hổ phách (20px vuông, radius 8px) + 'Paste' màu #000000 system-ui weight 600 ở 18px. Giữa: nav links ở 16px weight 400 #000000 với khoảng cách 30px. Phải: pill button 'Try for free' với background #0088ff, chữ trắng, radius 100px, padding 8px 20px."

    - "Tạo một feature card: nền trắng (#ffffff), border-radius 20px, padding 24px. Ambient shadow rgba(16,16,16,0.1) 0px 0px 30px. Headline ở 22px system-ui weight 600 #101010. Body ở 16px weight 400 #6e6e73, line-height 24px. Khoảng cách 16px giữa headline và body."

    - "Tạo một press logos bar: hàng căn giữa trên nền trắng. 5 logo placeholders màu xám (#ababb0) cách nhau 30px. Apple logo + '⭐ 4.5' rating badge bên trái. Inter 14px weight 400, letter-spacing -0.41px, màu #ababb0."

  gradient_system:

    info: "Gradient hổ phách-cam (linear-gradient(0deg, rgb(240,100,19) -29.375%, rgb(254,171,48) 100%)) là singular brand gradient. Nó xuất hiện trong chính xác hai ngữ cảnh: (1) logo icon dưới dạng background fill, và (2) large display headlines thông qua -webkit-background-clip: text để tạo gradient text. Nó KHÔNG BAO GIỜ được dùng làm section background, button fill hoặc decorative element. Gradient chảy từ deep burnt orange ở dưới cùng đến golden amber ở trên cùng — khi áp dụng cho text, nó tạo hiệu ứng warm metallic shimmer. Không có gradient nào khác trong hệ thống."

  category_color_system:

    info: "Bốn vivid chromatic colors được dùng làm feature-category indicators, áp dụng dưới dạng text color hoặc border accents trên body-level elements — không bao giờ làm backgrounds hoặc button fills:"
    - "Blue (#0088ff): productivity/general features"
    - "Green (#34c759): privacy and security features"
    - "Magenta (#cb30e0): collaboration features"
    - "Red (#ff383c): power/advanced features"
    info: "Những màu này tương tự bảng màu SF Symbols của Apple, củng cố thẩm mỹ native-OS. Chúng chỉ xuất hiện ở tỉ lệ body text (16-18px)."

  similar_brands:

    - "**Things (Cultured Code)** — Cùng thẩm mỹ system-font native của Apple với monochrome canvas, single warm accent color và device mockup hero compositions"
    - "**Bear App** — Pill-shaped buttons, bố cục nhiều khoảng trắng, brand accent hổ phách/ấm trên nền trang tối giản trắng — nhiệt độ thị giác gần như giống hệt"
    - "**Fantastical (Flexibits)** — Định vị Mac/iOS utility với hero tập trung vào product-screenshot, system-ui typography, alternating white/gray sections"
    - "**Raycast** — Developer productivity tool sử dụng pill CTAs, system font stack, single brand color trên nền đơn sắc — dù Raycast thiên về tối hơn"
    - "**Notion** — Alternating white/light-gray sections, centered single-column layout, device mockup compositions hiển thị UI sản phẩm thực tế"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-amber-flame: #f06413;
          --gradient-amber-flame: linear-gradient(0deg, rgb(240, 100, 19) -29.375%, rgb(254, 171, 48) 100%);
          --color-honey-glow: #feab30;
          --color-signal-blue: #0088ff;
          --color-bright-blue: #1c95ff;
          --color-pure-white: #ffffff;
          --color-snow-gray: #f5f5f7;
          --color-mist: #f0f0f0;
          --color-silver: #d0d0d3;
          --color-pewter: #ababb0;
          --color-smoke: #6e6e73;
          --color-charcoal: #272727;
          --color-ink: #101010;
          --color-true-black: #000000;
          --color-vivid-green: #34c759;
          --color-electric-magenta: #cb30e0;
          --color-alert-red: #ff383c;
        
          /* Typography — Font Families */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 18;
          --tracking-caption: -0.41px;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 18px;
          --leading-subheading: 24;
          --text-heading-sm: 22px;
          --leading-heading-sm: 28;
          --text-heading: 40px;
          --leading-heading: 44;
          --tracking-heading: -0.24px;
          --text-heading-lg: 54px;
          --leading-heading-lg: 56;
          --tracking-heading-lg: -0.7px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -1.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 20-30px;
          --element-gap: 16-20px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 16-20px;
          --radius-badges: 100px;
          --radius-images: 16-24px;
          --radius-buttons: 100px;
          --radius-containers: 24-40px;
        
          /* Shadows */
          --shadow-xl: rgba(16, 16, 16, 0.1) 0px 0px 30px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-section-alternate: #f5f5f7;
          --surface-elevated-card: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-amber-flame: #f06413;
          --color-honey-glow: #feab30;
          --color-signal-blue: #0088ff;
          --color-bright-blue: #1c95ff;
          --color-pure-white: #ffffff;
          --color-snow-gray: #f5f5f7;
          --color-mist: #f0f0f0;
          --color-silver: #d0d0d3;
          --color-pewter: #ababb0;
          --color-smoke: #6e6e73;
          --color-charcoal: #272727;
          --color-ink: #101010;
          --color-true-black: #000000;
          --color-vivid-green: #34c759;
          --color-electric-magenta: #cb30e0;
          --color-alert-red: #ff383c;
        
          /* Typography */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 18;
          --tracking-caption: -0.41px;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 18px;
          --leading-subheading: 24;
          --text-heading-sm: 22px;
          --leading-heading-sm: 28;
          --text-heading: 40px;
          --leading-heading: 44;
          --tracking-heading: -0.24px;
          --text-heading-lg: 54px;
          --leading-heading-lg: 56;
          --tracking-heading-lg: -0.7px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -1.04px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-xl: rgba(16, 16, 16, 0.1) 0px 0px 30px 0px;
        }