tracky___style_reference:
  info: "> Doodled planner trên nền giấy ấm"

  theme: "light"

  info: "Tracky mang phong cách bullet journal của một người sáng tạo được biến thành sản phẩm: một nền canvas sáng ấm (#f2f2f2) làm chỗ dựa cho navy gần đen (#151b31) — màu chủ lực cho text, border và primary actions, trong khi coral đỏ (#ff5858) và mint xanh (#86e0c1) xuất hiện như những dấu câu chức năng nhỏ để nhấn mạnh và thể hiện trạng thái live. GRIFTER đảm nhận giọng thương hiệu ở display scale — chunky, hand-printed, tracking hơi lỏng — còn Inter xử lý toàn bộ UI và body text ở kích thước compact, tracking chặt. Các component nằm trên nền soft 8px và 16px radii với shadow siêu nhẹ, khoảng cách section rộng rãi, và các điểm nhấn minh họa vẽ tay (doodles, organic blobs, bunny mascot) khiến việc quản lý dự án giống như vẽ vời trong sổ tay chứ không phải ghi ticket."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Inkwell Navy | `#151b31` | `--color-inkwell-navy` | Primary buttons, text và border chủ đạo, nền dark feature card — màu gần đen chủ lực, đọc mềm và ấm hơn #000 thuần |"
    info: "| Coral Emphasis | `#ff5858` | `--color-coral-emphasis` | Accent text cho từ khóa trong headline, điểm nhấn nổi bật, và link chọn lọc — đỏ ấm kết hợp navy tạo năng lượng vui tươi không mang tính công ty |"
    info: "| Mint Pulse | `#86e0c1` | `--color-mint-pulse` | Green state accent cho badge, bề mặt xác nhận, và status label ngắn |"
    info: "| Butter Yellow | `#fedf89` | `--color-butter-yellow` | Top announcement banner, highlight washes — pastel vàng ấm cho thông báo thân thiện không la hét |"
    info: "| Graphite | `#333333` | `--color-graphite` | Secondary text, hairline borders, icon strokes — nằm giữa navy và đen thuần cho các phần tử ít chịu lực hơn |"
    info: "| Slate | `#6d6f75` | `--color-slate` | Muted helper text, subdued borders, caption-level content — xám lạnh cho UI bị giảm chú ý |"
    info: "| Ash Canvas | `#f2f2f2` | `--color-ash-canvas` | Nền trang — xám nhạt ấm giúp white card nổi bật mà không lạnh lẽo như trắng thuần |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, button labels, overlapping panels — lớp bề mặt phía trên Ash Canvas |"
    info: "| Pure Ink | `#000000` | `--color-pure-ink` | Icon cần độ nhấn tối đa, border mạnh nhất, logo mark — dùng tiết kiệm khi cần tương phản tuyệt đối |"
    info: "| Warm Stone | `#e8e7e5` | `--color-warm-stone` | Tông màu drop-shadow của card — beige ấm bão hòa thấp thay thế shadow đen lạnh, tạo chiều sâu giống giấy |"

  tokens___typography:

    grifter___display_và_brand_voice_headings___hero__section_openers__decorative_labels__nét_chữ_chunky_hand_printed_mang_cá_tính_notebook__tracking_hơi_lỏng_0_03em_giữ_khả_năng_đọc_ở_display_scale_____font_grifter:
      - "**Font thay thế:** Bagel Fat One, Permanent Marker, hoặc Bowlby One (Google Fonts)"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 12px, 24px, 36px, 48px, 64px"
      - "**Line height:** 1.0, 1.1, 1.2, 1.41, 2.0"
      - "**Letter spacing:** 0.03em — luôn dương ngay cả ở kích thước lớn, ngược với hầu hết display type thường thắt chặt khi scale"
      - "**Vai trò:** Display và brand-voice headings — hero, section openers, decorative labels. Nét chữ chunky hand-printed mang cá tính notebook. Tracking hơi lỏng (0.03em) giữ khả năng đọc ở display scale."

    inter___toàn_bộ_ui_và_body_text___buttons__navigation__body_copy__card_content__badges__form_labels__tracking_chặt__0_01em_ở_mọi_kích_thước_tạo_nhịp_đọc_compact__hiệu_quả__giá_trị_108px_ngoại_lệ_có_thể_dùng_cho_một_hero_element_siêu_lớn_____font_inter:
      - "**Font thay thế:** Inter (đã có trên Google Fonts) hoặc DM Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 12px, 16px, 18px, 20px, 22px, 24px, 36px, 108px"
      - "**Line height:** 1.0, 1.1, 1.16, 1.18, 1.3, 1.4, 1.5, 1.55, 1.74"
      - "**Letter spacing:** -0.01em — đồng nhất chặt, không có nới lỏng ở display-grade"
      - "**Vai trò:** Toàn bộ UI và body text — buttons, navigation, body copy, card content, badges, form labels. Tracking chặt (-0.01em) ở mọi kích thước tạo nhịp đọc compact, hiệu quả. Giá trị 108px ngoại lệ có thể dùng cho một hero element siêu lớn."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.55 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.55 | -0.16px | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.36px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.16 | 1.44px | `--text-heading-lg` |"
      info: "| display | 64px | 1.1 | 1.92px | `--text-display` |"
      info: "| display-xl | 108px | 1 | -1.08px | `--text-display-xl` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 16px |"
      info: "| badges | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| featureCards | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0...` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) ...` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(138, 133, 125, 0.2) 0px 1px 4px 0px` | `--shadow-sm-2` |"

    layout:

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

  components:

    filled_primary_button:
      vai_trò: "Main call-to-action (Get started, Sign up)"

      info: "Nền Inkwell Navy (#151b31), text Paper White (#ffffff), Inter 16px weight 500-600, 8px radius, padding dọc 13px / ngang 20px, subtle shadow 0 1px 3px. Tracking chặt và kích thước compact giữ nó ở vai trò chức năng thay vì phô trương."

    outlined_ghost_button:
      vai_trò: "Secondary action trên nền sáng (Login / Sign up)"

      info: "Nền trắng hoặc trong suốt, border 1px màu #e8e7e5 hoặc Slate (#6d6f75), Inter 16px weight 500 màu Inkwell Navy. 8px radius, padding dọc 8px / ngang 16px. Không shadow."

    inverse_button:
      vai_trò: "Action trên dark feature card (Try me)"

      info: "Nền trắng hoặc text trắng trên card Inkwell Navy, 8px radius, padding dọc 13px-16px. Xử lý Inter compact giống primary button, đảo màu cho bề mặt tối."

    top_announcement_banner:
      vai_trò: "Thanh thông báo toàn trang full-width"

      info: "Nền Butter Yellow (#fedf89) trải dài toàn bộ viewport width, Inter 14-16px căn giữa, text Inkwell Navy với link 'Let's Talk' màu Coral Emphasis. Nút Close (×) ở cạnh phải."

    navigation_header:
      vai_trò: "Site header với logo và auth"

      tối_giản: "logo mark (vòng tròn Inkwell Navy với hình play trắng) + wordmark 'Tracky' Inter 600 bên trái, Outlined Ghost Button bên phải. Nền trong suốt hoặc Ash Canvas, không shadow."

    hero_display_headline:
      vai_trò: "Headline mở đầu trang"

      info: "GRIFTER 64px-108px weight 700 màu Inkwell Navy, với một cụm từ đổi sang Coral Emphasis để tạo năng lượng. Căn giữa hoặc căn trái, line-height 1.0-1.1, tracking 1.92px. Thường kết hợp với minh họa SVG vẽ tay inline giữa các cụm từ."

    dark_feature_card:
      vai_trò: "Phần nội dung inverted (Note your thoughts, v.v.)"

      info: "Nền Inkwell Navy (#151b31), 16-24px radius, padding trong rộng 40-48px. Heading GRIFTER hoặc Inter display màu trắng, body text Paper White độ mờ 70%, Inverse Button cho action. Warm stone shadow: 0 1px 4px rgba(138,133,125,0.2)."

    overlap_white_card:
      vai_trò: "Element xem trước sản phẩm chồng lên dark feature card"

      info: "Bề mặt Paper White (#ffffff), 16px radius, xoay nhẹ (-3 đến -8 độ), đặt chồng lên cạnh phải của dark card. Không border nhìn thấy, dựa vào tương phản với bề mặt tối."

    timer_widget:
      vai_trò: "Element demo sản phẩm inline hiển thị tính năng timer"

      info: "Card hình pill màu trắng, text Inkwell Navy hiển thị '0:00:00', nút play hình tròn màu Mint Pulse (#86e0c1), icon button nhỏ bên phải. Nằm inline trong hero text để demo sản phẩm theo ngữ cảnh."

    annotation_label:
      vai_trò: "Chú thích hướng dẫn kiểu viết tay (start → stop → continue, click me)"

      info: "GRIFTER hoặc font hand-printed tương tự ở 24-36px, thường là nét vẽ màu xanh hoặc Inkwell Navy, kèm mũi tên cong vẽ tay. Đặt phía trên hoặc bên cạnh các interactive element để gợi ý 'thử cái này'. Gạch chân là đường nguệch ngoạc vẽ tay màu Coral Emphasis."

    text_link:
      vai_trò: "Inline text links và CTA kiểu 'Let's Talk'"

      info: "Inter 16-18px weight 500-600, Coral Emphasis (#ff5858) cho emphasis links hoặc Inkwell Navy cho utility links. Không underline mặc định; underline xuất hiện khi hover cùng màu hoặc màu Graphite."

    badge___tag:
      vai_trò: "Chỉ báo trạng thái nhỏ và nhãn danh mục"

      info: "8px radius, padding dọc 8-10px / ngang 12-16px, Inter 12px weight 500. Nền: Mint Pulse cho success, Butter Yellow cho highlight, Ash Canvas cho neutral. Text màu Inkwell Navy."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng GRIFTER 64px+ weight 700 cho hero và section openers — nét chữ hand-printed là giọng thương hiệu, không phải trang trí"
      - "Áp Coral Emphasis (#ff5858) cho đúng một từ hoặc cụm từ trên mỗi headline để tạo năng lượng — không bao giờ tô toàn bộ heading"
      - "Kết hợp nền Inkwell Navy (#151b31) với text Paper White (#ffffff) trên primary buttons ở 8px radius — đây là CTA chuẩn"
      - "Dùng Ash Canvas (#f2f2f2) làm nền trang phổ quát — nó giúp white card nổi bật với cảm giác giấy ấm"
      - "Áp warm stone shadow rgba(138,133,125,0.2) 0 1px 4px trên feature cards thay vì shadow đen lạnh"
      - "Dùng Inter ở tracking -0.01em cho toàn bộ UI text — để GRIFTER mang cá tính ở display scale"
      - "Chồng một Paper White card nghiêng lên dark Inkwell Navy feature card để tạo khoảnh khắc demo sản phẩm trực quan"

    không_nên_làm:
      - "Không dùng GRIFTER cho body text, buttons, navigation, hoặc form labels — nó mất khả năng đọc dưới 24px và làm loãng giọng thương hiệu"
      - "Không áp Coral Emphasis (#ff5858) cho nhiều hơn một element trên mỗi vùng thị giác — nó mất tác dụng nhấn mạnh khi dùng quá nhiều"
      - "Không dùng #000000 thuần làm nền hoặc fill lớn — Inkwell Navy (#151b31) là màu đen của hệ thống, đen thuần chỉ dành cho icon strokes"
      - "Không chồng nhiều bold shadow lên các component được nâng lên — hệ thống dựa vào blur 1-4px với opacity dưới 25%"
      - "Không dùng radius dưới 8px trên interactive elements — sự mềm mại là một phần của cá tính thân thiện"
      - "Không dùng drop-shadow xám lạnh (rgba(0,0,0,*)) trên cards — warm stone shadow là signature depth treatment"
      - "Không thêm accent color mới — hệ thống giao tiếp qua navy, coral, mint, và butter yellow; thêm màu phá vỡ bảng màu notebook"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Ash Canvas | `#f2f2f2` | Nền trang — lớp giấy ấm cơ bản |"
    info: "| 1 | Paper White | `#ffffff` | Bề mặt card, panel nâng lên, button labels |"
    info: "| 2 | Butter Yellow | `#fedf89` | Announcement banner — bề mặt tạm thời thu hút chú ý cao |"
    info: "| 3 | Inkwell Navy | `#151b31` | Dark feature card — bề mặt inverted cho các phần tương phản |"

  elevation:

    - "**Primary buttons:** `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)`"
    - "**Feature cards:** `0 1px 4px rgba(138,133,125,0.2) — warm stone shadow thay thế shadow đen lạnh`"

  imagery:

    info: "Ngôn ngữ thị giác ưu tiên minh họa, không có photography. Nhân vật SVG vẽ tay (bunny mascot), hình blob hữu cơ màu Mint Pulse và xanh nhạt rải rác làm bầu không khí trang trí, và chú thích doodle inline với mũi tên cong và nhãn viết tay ('start → stop → continue', 'click me'). Minh họa có đường viền và tô nhẹ bằng màu thương hiệu, đặt chồng lên text và card thay vì nằm trong container hình ảnh riêng. Nhân vật bunny và hình hữu cơ là bầu không khí trang trí, không phải nội dung giải thích — chúng báo hiệu sự sáng tạo và dễ tiếp cận. Không có product screenshots theo nghĩa truyền thống; thay vào đó, các element sản phẩm live (timer widget) xuất hiện inline trong headline như demo theo ngữ cảnh. Mật độ tổng thể thiên về text với minh họa làm dấu câu nhấn mạnh, không bao giờ là hero imagery."

  layout:

    info: "Luồng nội dung single-column max-width 1200px. Hero full-width trên Ash Canvas với display headline căn giữa kết hợp minh họa vẽ tay inline và Filled Primary Button căn giữa. Bên dưới hero, nội dung chảy theo các section dọc với gap 80px, xen kẽ giữa section sáng (Ash Canvas với Paper White cards) và section tối (Inkwell Navy feature cards với white product-preview cards xoay -3 đến -8 độ chồng lên). Không có multi-column grids trong luồng chính — hệ thống giữ single-column, để dark feature cards tạo sự đa dạng thị giác thông qua inversion thay vì độ phức tạp cột. Navigation là top bar tối giản sticky hoặc static với logo trái và một auth button phải, không mega-menu. Một Butter Yellow announcement banner full-width nằm phía trên header. Các section cảm giác rộng rãi và thoáng, với mỗi dark card hoạt động như một khoảnh khắc full-bleed inversion trước khi quay lại canvas sáng."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text (primary): #151b31 (Inkwell Navy)"
    - "text (muted): #6d6f75 (Slate)"
    - "background: #f2f2f2 (Ash Canvas)"
    - "surface (card): #ffffff (Paper White)"
    - "border: #333333 (Graphite) / #6d6f75 (Slate)"
    - "accent: #ff5858 (Coral Emphasis)"
    - "primary action: #151b31 (filled action)"

    ví_dụ_component_prompts:

    - "*Tạo một hero section:* Nền Ash Canvas (#f2f2f2) full-width. Headline căn giữa ở 64px GRIFTER weight 700, #151b31, letter-spacing 1.92px. Cụm từ 'actually love' đặt màu #ff5858. Subtext ở 18px Inter weight 400, #6d6f75. Primary button: nền #151b31, text #ffffff, Inter 16px weight 500, 8px radius, padding dọc 13px / ngang 20px."

    - "*Tạo một dark feature card:* Nền #151b31, 16px radius, 48px padding. Heading GRIFTER 36px weight 700 màu #ffffff. Body ở 16px Inter weight 400, #ffffff độ mờ 80%. Inverse Button trắng: nền #ffffff, text #151b31, 8px radius, padding 16px / 24px. Chồng một Paper White card xoay -5 độ, 16px radius, không border, đặt tràn ra cạnh phải."

    - "*Tạo một top announcement banner:* Nền #fedf89 full-width, padding dọc 40px. Inter 14px weight 500 căn giữa màu #151b31, với 'Let's Talk' là link #ff5858. Nút × close bên phải màu #151b31."

    - "*Tạo một timer widget demo element:* Nền #ffffff hình pill, 8px radius, padding dọc 12px / ngang 16px. '0:00:00' ở Inter 16px weight 600, #151b31. Nút play hình tròn: đường kính 32px, nền #86e0c1, icon tam giác #151b31."

    - "*Tạo một feature badge:* Nền #86e0c1, 8px radius, padding dọc 8px / ngang 12px. Inter 12px weight 500, text #151b31."

  similar_brands:

    - "**Notion** — Cùng cá tính hand-crafted với display type, muted canvas, và dấu câu accent một màu trong headlines"
    - "**Trello** — Cùng không gian quản lý dự án với điểm nhấn minh họa vui tươi và canvas sáng ấm, dù Trello thiên về brand blue bão hòa hơn"
    - "**Pitch** — Cùng display typography đậm kết hợp Inter UI, spacing rộng rãi, và micro-illustrations giàu cá tính"
    - "**Height** — Cùng không gian quản lý sản phẩm với một màu tối chủ đạo làm workhorse, UI compact, và dark feature cards inverted"
    - "**Linear** — Cùng tracking Inter chặt, component 8px-radius compact, và navy gần đen làm primary workhorse color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-inkwell-navy: #151b31;
          --color-coral-emphasis: #ff5858;
          --color-mint-pulse: #86e0c1;
          --color-butter-yellow: #fedf89;
          --color-graphite: #333333;
          --color-slate: #6d6f75;
          --color-ash-canvas: #f2f2f2;
          --color-paper-white: #ffffff;
          --color-pure-ink: #000000;
          --color-warm-stone: #e8e7e5;
        
          /* Typography — Font Families */
          --font-grifter: 'GRIFTER', 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: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.55;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.55;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --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: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.36px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.16;
          --tracking-heading-lg: 1.44px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: 1.92px;
          --text-display-xl: 108px;
          --leading-display-xl: 1;
          --tracking-display-xl: -1.08px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-featurecards: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
          --shadow-sm-2: rgba(138, 133, 125, 0.2) 0px 1px 4px 0px;
        
          /* Surfaces */
          --surface-ash-canvas: #f2f2f2;
          --surface-paper-white: #ffffff;
          --surface-butter-yellow: #fedf89;
          --surface-inkwell-navy: #151b31;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-inkwell-navy: #151b31;
          --color-coral-emphasis: #ff5858;
          --color-mint-pulse: #86e0c1;
          --color-butter-yellow: #fedf89;
          --color-graphite: #333333;
          --color-slate: #6d6f75;
          --color-ash-canvas: #f2f2f2;
          --color-paper-white: #ffffff;
          --color-pure-ink: #000000;
          --color-warm-stone: #e8e7e5;
        
          /* Typography */
          --font-grifter: 'GRIFTER', 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: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.55;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.55;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --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: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.36px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.16;
          --tracking-heading-lg: 1.44px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: 1.92px;
          --text-display-xl: 108px;
          --leading-display-xl: 1;
          --tracking-display-xl: -1.08px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
          --shadow-sm-2: rgba(138, 133, 125, 0.2) 0px 1px 4px 0px;
        }