shade___style_reference:
  info: "> Editorial paper cutouts trên nền trắng"

  theme: "light"

  info: "Shade vận hành trong ngôn ngữ thiết kế gần như đơn sắc: canvas trắng, chữ màu than ấm nhẹ, và một điểm nhấn violet duy nhất xuất hiện hầu như chỉ ở dạng đường viền mảnh (hairline borders) và một gradient logo. Giao diện mang phong cách editorial và thong thả — Inter Display với tracking âm nén tạo cho headline vẻ điêu khắc, kiểu trang bìa tạp chí, thay vì vẻ thoáng đãng điển hình của SaaS. Button có dạng pill với offset shadow màu đặc, cứng (không blur, không khuếch tán), trông như những miếng giấy cắt thay vì Material elevation. Màu sắc được dùng như dấu câu hiếm hoi: violet không bao giờ lấp đầy mảng lớn, nó chỉ vạch đường viền và đánh dấu trạng thái được chọn, để nội dung ảnh đảm nhận vai trò tạo cảm xúc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Charcoal Ink | `#131315` | `--color-charcoal-ink` | Chữ chính, fill button pill tối, đường viền heading — màu gần đen ấm, màu fill button duy nhất trong hệ thống |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt card, chữ trên button, nền ghost button |"
    info: "| Bone | `#f7f5ff` | `--color-bone` | Canvas phụ, màu trắng ngà pha violet nhẹ cho các section xen kẽ |"
    info: "| Cutout Gray | `#f1f1f1` | `--color-cutout-gray` | Màu offset shadow đặc dưới primary button và bề mặt phụ |"
    info: "| Slate Mid | `#717173` | `--color-slate-mid` | Chữ body mờ, metadata phụ, helper copy |"
    info: "| Hairline | `#d0d0d0` | `--color-hairline` | Đường viền mảnh, divider, indicator tab không hoạt động |"
    info: "| Deep Charcoal | `#444444` | `--color-deep-charcoal` | Đường viền input, divider đậm hơn Hairline |"
    info: "| Logo Violet | `#855cf7` | `--color-logo-violet` | Điểm cuối gradient brand mark, fill logo cube — màu bão hòa duy nhất trong hệ thống |"
    info: "| Lavender Trace | `#dacefd` | `--color-lavender-trace` | Gạch dưới tab được chọn, đường viền violet mảnh, viền announcement pill — violet ở âm lượng thì thầm |"

  tokens___typography:

    sans_serif___sans_serif___phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    inter_display___typeface_chính_cho_mọi_ui_text__body_và_heading__chỉ_một_weight_400_duy_nhất_đảm_nhận_toàn_bộ_hệ_thống_phân_cấp_thông_qua_size_và_tracking___không_bold__không_light__các_stylistic_sets_tùy_chỉnh_ss01__ss07__ss08_định_hình_lại_đầu_chữ_g__a__l_thành_dáng_hình_học__editorial_hơn__phân_biệt_với_inter_gốc_____font_inter_display:
      - "**Thay thế:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 14px, 16px, 18px, 20px, 21px, 24px, 28px, 32px, 36px, 40px, 48px, 56px, 72px"
      - "**Line height:** 1.0–1.57 (phụ thuộc size)"
      - "**Letter spacing:** -0.01em đến -0.03em (càng chặt khi size tăng: -0.01em ở body, -0.03em ở display)"
      - "**OpenType features:** `\"ss01\", \"ss07\", \"ss08\", \"cv03\", \"cv04\", \"cv09\", \"cv11\", \"blwf\"`"
      - "**Vai trò:** Typeface chính cho mọi UI text, body và heading. Chỉ một weight 400 duy nhất đảm nhận toàn bộ hệ thống phân cấp thông qua size và tracking — không bold, không light. Các stylistic sets tùy chỉnh (ss01, ss07, ss08) định hình lại đầu chữ g, a, l thành dáng hình học, editorial hơn, phân biệt với Inter gốc."

    aux_mono___font_monospaced_cho_label_section_eyebrow_ví_dụ__day_1___let_s_chat__nav_items__badge_text__đặt_ở_14px_với_tracking__0_04em_tạo_cho_timestamp_và_label_cảm_giác_kỹ_thuật__lưu_trữ__tương_phản_với_display_type_editorial_____font_aux_mono:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.29"
      - "**Letter spacing:** -0.04em"
      - "**Vai trò:** Font monospaced cho label section eyebrow (ví dụ 'DAY 1', 'LET'S CHAT', nav items, badge text). Đặt ở 14px với tracking -0.04em tạo cho timestamp và label cảm giác kỹ thuật, lưu trữ, tương phản với display type editorial."

    inter___fallback_phụ___utility_text_cấp_hệ_thống_khi_không_cần_custom_display_features____font_inter:
      - "**Thay thế:** system-ui"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.2–1.5"
      - "**Vai trò:** Fallback phụ / utility text cấp hệ thống khi không cần custom display features"

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.22 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.15 | -1.44px | `--text-heading-lg` |"
      info: "| display | 72px | 1.1 | -2.16px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tabs | 2px |"
      info: "| cards | 14px |"
      info: "| inputs | 9px |"
      info: "| buttons | 35px |"
      info: "| smallChips | 2px |"
      info: "| secondaryButtons | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(241, 241, 241) 8px 8px 0px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(226, 226, 227, 0.5) 10px 10px 0px -2px` | `--shadow-subtle-2` |"
      info: "| sm | `rgba(19, 19, 21, 0.12) 0px 1px 4px 0px` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.2) 0px 3px 4px 0px` | `--shadow-sm-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 100px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10px"

  components:

    primary_pill_button:
      vai_trò: "Action có độ ưu tiên cao nhất"

      info: "Fill than tối (#131315), chữ trắng, border-radius 35px, padding dọc ~15px / ngang 24px, Inter Display 16px weight 400 với màu trắng. Mang offset shadow đặc cứng 8px 8px 0px 0px #f1f1f1 bên dưới — không blur, trông như một miếng cắt lơ lửng trên trang."

    ghost_pill_button:
      vai_trò: "Secondary action đi kèm primary"

      info: "Không fill, viền 1.5px solid #131315, chữ #131315, radius 35px, padding giống primary. Offset shadow 8px hiển thị ở dạng xám bán trong suốt (rgba(226,226,227,0.5) 10px 10px 0px -2px) để button trông như nằm trên một mặt phẳng giấy hơi nâng lên."

    top_navigation_bar:
      vai_trò: "Navigation toàn site"

      info: "Thanh trắng sticky với hairline 1px dưới cùng (#d0d0d0). Logo cube bên trái, tiếp theo là 5–6 link Inter Display 14px màu #131315 với gap 20px; bên phải: link text 'Log In' cộng với primary pill CTA. Padding dọc ~20px."

    announcement_pill:
      vai_trò: "Inline news/feature flag phía trên hero"

      info: "Viền 1px Lavender Trace (#dacefd), bo tròn hoàn toàn (~999px hoặc bằng radius button), text Aux Mono 14px màu violet. Không fill, không shadow. Nổi giữa, căn giữa phía trên hero headline."

    hero_headline:
      vai_trò: "Display cấp trang"

      info: "Inter Display 72px (desktop) / 48px (tablet) weight 400, #131315, line-height 1.1, letter-spacing -0.03em. Căn giữa, max-width ~900px. Không gradient, không mixed weight — size và negative tracking đảm nhận mọi việc."

    tab_navigation_strip:
      vai_trò: "Content switcher trong section"

      info: "Bốn label (Search / Access / Share / Archive) bằng Inter Display 16px, cách đều nhau, phân cách bởi hairline divider. Tab đang hoạt động được đánh dấu bằng gạch dưới violet (#855cf7) cao 2px ngay bên dưới chữ — không phải nền pill, chỉ là một đường accent chính xác. Tab không hoạt động có màu #717173."

    product_screenshot_card:
      vai_trò: "Bằng chứng tính năng"

      info: "Product UI hiển thị dưới dạng screenshot khung trình duyệt, hơi nghiêng hoặc thẳng, nằm trên bề mặt bone (#f7f5ff). Card có hairline inset 1px #00000014, radius 14px, không có outer shadow. Ảnh gần như chạm mép card."

    logo_strip:
      vai_trò: "Social proof / partner bar"

      info: "Hàng ngang 7–8 logo đối tác màu xám trung bình (#717173 hoặc desaturated), cách đều với gap ~40px, tất cả hiển thị ở chiều cao đồng nhất (~20px). Không label, không border — chỉ là những dấu hiệu lặng lẽ."

    timeline_onboarding_row:
      vai_trò: "Giải thích theo bước"

      info: "Ba cột với label Aux Mono 14px ('DAY 1', 'DAY 14', 'DAY 21') màu #717173, sau đó là heading Inter Display 24px màu #131315, rồi body text. Bên dưới các cột là hairline chạy suốt chiều rộng với vòng tròn đặc 2px màu than tại mỗi bước; bước đang hoạt động được tô đặc, bước tương lai là outline."

    cookie_consent_banner:
      vai_trò: "Thông báo tuân thủ ở góc dưới bên phải"

      info: "Card cố định góc dưới bên phải, fill trắng, border 1px #d0d0d0, radius 9px, padding ~16px. Body text 12px #717173, button 'Okay' nhỏ với chữ #131315 và không nền."

    brand_logo_mark:
      vai_trò: "Nhận diện thương hiệu"

      info: "Một glyph cube/diamond nhỏ được fill với conic gradient từ transparent đến #855cf7, kích thước ~24px vuông, theo sau là wordmark 'shade' bằng Inter Display 20px weight 400, #131315. Gradient là dấu màu bão hòa duy nhất trong hệ thống."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng hard offset shadow (8px 8px 0px 0px #f1f1f1) trên primary pill buttons — không bao giờ thêm blur hoặc khuếch tán vào elevation"
      - "Chỉ đặt Inter Display ở weight 400; để size và tracking -0.03em đảm nhận hệ thống phân cấp, không bao giờ chuyển sang bold"
      - "Dành #855cf7 cho logo gradient và gạch dưới tab đang hoạt động — mọi điểm nhấn khác phải là màu oải hương muted #dacefd"
      - "Luôn ghép mỗi primary CTA với một ghost secondary button có cùng radius 35px và padding"
      - "Dùng 100px giữa các section chính, 10–12px giữa các inline element, 24px bên trong card"
      - "Xử lý ảnh chụp dưới dạng full-bleed và không viền — để canvas trắng đóng khung nó như một bức tường gallery"
      - "Áp dụng Aux Mono 14px -0.04em cho mọi eyebrow label, timestamp và tab heading"

    don_t:
      - "Không thêm màu thương hiệu bổ sung hoặc fill bão hòa — hệ thống có chủ đích 99% không màu"
      - "Không dùng soft blurred shadow trên button; signature là hard offset shadow đặc, kiểu giấy cắt"
      - "Không làm đậm headline hoặc dùng weight 500+ trong Inter Display — hệ thống phân cấp một weight là có chủ đích"
      - "Không bo tròn tab đang hoạt động thành nền pill; gạch dưới violet 2px là indicator duy nhất được chấp nhận"
      - "Không thêm gradient nền vào section hoặc card — gradient chỉ dành cho brand mark"
      - "Không dùng border-radius ngoài scale đã định (35/20/14/9/2px)"
      - "Không căn giữa đoạn body text dài hơn hai dòng — hệ thống căn trái, chỉ display headline được căn giữa"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang chính |"
    info: "| 1 | Bone | `#f7f5ff` | Nền section xen kẽ, dải màu trắng ngà pha violet nhẹ |"
    info: "| 2 | Cutout | `#f1f1f1` | Mặt phẳng offset shadow dưới button và card được nâng lên |"

  elevation:

    - "**Primary CTA Button:** `#f1f1f1 8px 8px 0px 0px (hard solid offset, không blur — trông như giấy cắt)`"
    - "**Ghost/Link Button:** `rgba(226,226,227,0.5) 10px 10px 0px -2px (hard offset, một phần nằm sau element)`"
    - "**Secondary Action Button:** `rgba(19,19,21,0.12) 0px 1px 4px 0px (subtle soft shadow cho button nhỏ)`"
    - "**Product Card:** `rgba(0,0,0,0.05) 0px 0px 0px 1px inset (inset hairline, không outer shadow)`"

  imagery:

    ảnh_chụp_là_động_cơ_cảm_xúc: "ảnh hành động và lifestyle full-bleed, bão hòa cao (lướt sóng, thời trang, crop sản phẩm sống động) tương phản mạnh với giao diện trắng xương. Ảnh được xử lý thô — không overlay, không duotone, không bo góc, không viền. Giao diện đóng khung ảnh như một bức tường gallery. Product UI hiển thị dưới dạng screenshot khung trình duyệt nghiêng nổi trên canvas. Logo strip là partner mark thang độ xám desaturated ở độ mờ trung bình, mỗi mark đơn sắc và nhỏ. Icon tối giản: một cube/diamond gradient tím cho brand mark, ngoài ra không có hoặc chỉ là hairline."

  layout:

    info: "Cột nội dung căn giữa max-width 1200px trên canvas trắng toàn chiều rộng. Hero được căn giữa theo chiều dọc với display headline, đoạn văn mờ ngắn, và hai pill CTA cạnh nhau; không có hero image — điểm dừng thị giác đầu tiên là logo strip, sau đó là một bức ảnh full-bleed lớn. Section xen kẽ các dải trắng và bone (#f7f5ff) với khoảng cách dọc 100px. Feature blocks sử dụng lưới card 4 cột cho product screenshots, mỗi card trên bề mặt bone với hairline inset 1px. Onboarding sử dụng timeline 3 cột với circle checkpoint trên hairline rule. Navigation là một top bar cố định: logo trái, link cluster trái-giữa, login + dark pill CTA phải. Không sidebar, không mega-menu."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    text: "#131315 (charcoal)"
    background: "#ffffff (canvas), #f7f5ff (bone secondary)"
    border: "#d0d0d0 (hairline), #444444 (input)"
    accent: "#855cf7 (logo/active tab), #dacefd (lavender whisper)"
    primary_action: "#131315 (filled action)"

    info: "3-5 Example Component Prompts:"

    - "Hero section: canvas trắng #ffffff. Display headline 72px Inter Display weight 400, màu #131315, letter-spacing -0.03em (-2.16px), line-height 1.1. Đoạn văn mờ 18px weight 400, #717173. Hai button cạnh nhau: ghost pill (viền 1.5px #131315, radius 35px, chữ #131315, padding 15px 24px) + dark pill (fill #131315, chữ trắng, radius 35px, hard shadow 8px 8px 0px 0px #f1f1f1, padding 15px 24px). Stack căn giữa, max-width 900px."

    - "Announcement pill: viền 1px #dacefd, bo tròn hoàn toàn (999px), text Aux Mono 14px màu #855cf7, fill trong suốt, padding 6px 14px, căn giữa phía trên hero với bottom margin 16px."

    - "Tab nav strip: bốn label Inter Display 16px #717173, cách đều trên toàn chiều rộng, hairline 1px #d0d0d0 bên dưới toàn bộ hàng, gạch dưới 2px solid #855cf7 ngay bên dưới label tab đang hoạt động."

    - "Product screenshot card: radius 14px, border inset 1px rgba(0,0,0,0.05), không outer shadow, padding 24px, nằm trên bề mặt bone #f7f5ff. Ảnh lấp đầy card từ mép này sang mép kia, không có inner clipping bo tròn."

    - "Timeline step row: ba cột với eyebrow Aux Mono 14px màu #717173, heading Inter Display 24px màu #131315, body text 16px màu #717173. Rule 1px #d0d0d0 toàn chiều rộng bên dưới, marker vòng tròn 2px solid #131315 (đường kính 10px) tại vị trí mỗi cột bước; vòng tròn outline cho bước không hoạt động."

  similar_brands:

    - "**Linear** — Cùng single-weight display type, canvas gần như đơn sắc, pill CTA với offset flat shadows, và editorial negative tracking trên headline"
    - "**Vercel** — Typography họ Inter với letter-spacing nén, canvas trắng xương, ảnh full-bleed ngắt quãng, và trang trí component tối thiểu"
    - "**Frame.io** — Tập trung media-product, dark pill primary button trên nền trắng, và bảng màu hạn chế để ảnh mang thương hiệu"
    - "**Pitch** — Editorial SaaS sensibility với single-weight display headlines, khoảng cách section thoáng, và một accent màu muted duy nhất trên nền UI đơn sắc"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-charcoal-ink: #131315;
          --color-pure-white: #ffffff;
          --color-bone: #f7f5ff;
          --color-cutout-gray: #f1f1f1;
          --color-slate-mid: #717173;
          --color-hairline: #d0d0d0;
          --color-deep-charcoal: #444444;
          --color-logo-violet: #855cf7;
          --color-lavender-trace: #dacefd;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aux-mono: 'Aux Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -1.44px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.16px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 100px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 9px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-2xl-2: 23px;
          --radius-3xl: 35px;
        
          /* Named Radii */
          --radius-tabs: 2px;
          --radius-cards: 14px;
          --radius-inputs: 9px;
          --radius-buttons: 35px;
          --radius-smallchips: 2px;
          --radius-secondarybuttons: 20px;
        
          /* Shadows */
          --shadow-subtle: rgb(241, 241, 241) 8px 8px 0px 0px;
          --shadow-subtle-2: rgba(226, 226, 227, 0.5) 10px 10px 0px -2px;
          --shadow-sm: rgba(19, 19, 21, 0.12) 0px 1px 4px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 3px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-bone: #f7f5ff;
          --surface-cutout: #f1f1f1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-charcoal-ink: #131315;
          --color-pure-white: #ffffff;
          --color-bone: #f7f5ff;
          --color-cutout-gray: #f1f1f1;
          --color-slate-mid: #717173;
          --color-hairline: #d0d0d0;
          --color-deep-charcoal: #444444;
          --color-logo-violet: #855cf7;
          --color-lavender-trace: #dacefd;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aux-mono: 'Aux Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.22;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -1.44px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.16px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 9px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-2xl-2: 23px;
          --radius-3xl: 35px;
        
          /* Shadows */
          --shadow-subtle: rgb(241, 241, 241) 8px 8px 0px 0px;
          --shadow-subtle-2: rgba(226, 226, 227, 0.5) 10px 10px 0px -2px;
          --shadow-sm: rgba(19, 19, 21, 0.12) 0px 1px 4px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 3px 4px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
        }