hellotime___style_reference:
  info: "> trung tâm chỉ huy biên tập đơn sắc"

  theme: "light"

  info: "Hellotime là một bề mặt năng suất gần như đơn sắc: canvas trắng, chữ gần đen, và một điểm nhấn xanh điện xuất hiện hầu như chỉ dưới dạng gradient highlight trên hero headline và các từ khóa. Hệ thống thị giác dựa vào tương phản trọng số typographic thay vì đa dạng màu sắc — headline 700-weight khổng lồ (64–80px) nằm cạnh body text 400–500 nhỏ gọn, tạo phân cấp rõ ràng mà không cần trang trí nhiễu. Các bề mặt phẳng với đường viền mảnh (1px, #c8cad0) và border-radius 16px; elevation bị loại bỏ để ưu tiên các cạnh sắc nét và khoảng trắng rộng rãi. Nút tối màu (#25272d) là UI element có màu sắc duy nhất ngoài logo màu xanh lá và accent gradient xanh dương, khiến mọi hành động đều có chủ đích thay vì trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#151619` | `--color-ink` | Văn bản chính, đường viền icon, đường viền mảnh, chân trang — màu non-background chiếm ưu thế trong hệ thống |"
    info: "| Smoke | `#7f8491` | `--color-smoke` | Văn bản phụ/mờ, văn bản link, đường viền nhẹ, placeholder label — lùi lại để body copy được đọc trước |"
    info: "| Fog | `#c8cad0` | `--color-fog` | Đường viền card và component, divider nhẹ, đường viền icon ở trạng thái nghỉ — hairline mặc định |"
    info: "| Ash | `#e1e2e5` | `--color-ash` | Divider giữa các section, tint bề mặt phụ, đường viền input ở trạng thái nghỉ |"
    info: "| Mist | `#f3f3f5` | `--color-mist` | Bề mặt card, panel elevation nhẹ, hover wash cho nút, nền input |"
    info: "| Paper | `#ffffff` | `--color-paper` | Canvas trang, nền nav, chữ nút inverted, heading reverse-color treatment |"
    info: "| Charcoal | `#25272d` | `--color-charcoal` | Nền và viền nút hành động chính, emphasis top-strip nav — bề mặt tối duy nhất, dành riêng cho CTA |"
    info: "| Graphite | `#363940` | `--color-graphite` | Màu chữ link nav, hơi nhẹ hơn #151619 để tạo cảm giác nav mềm mại hơn |"
    info: "| Pewter | `#b0b3bb` | `--color-pewter` | Đường viền nút outlined ở trạng thái nghỉ, ghost control stroke |"
    info: "| Signal Green | `#059669` | `--color-signal-green` | Accent stroke logo thương hiệu, điểm đánh dấu nhận diện thương hiệu — dấu kiểm xanh lá rực rỡ trên nền đơn sắc |"
    info: "| Electric Blue | `linear-gradient(90deg, #0560fd 0%, #3a8dff 50%, #c3d9ff 100%)` | `--color-electric-blue` | Accent thương hiệu — gradient highlight trên từ khóa hero; cũng dùng cho thanh dự án UI sản phẩm và accent biểu đồ |"

  tokens___typography:

    sf_pro_display___headlines_và_display___dùng_ở_80px_700_cho_hero__48_64px_600_700_cho_tiêu_đề_section__24_40px_500_600_cho_subheading__weight_700_ở_kích_thước_cực_lớn_là_signature__sans_in_đậm_khổng_lồ_trên_nền_trắng_trống_mang_toàn_bộ_trọng_lượng_thị_giác_mà_màu_sắc_sẽ_mang_trên_các_site_khác_____font_sf_pro_display:
      - "**Thay thế:** Inter (miễn phí, gần nhất về dải weight và hình học grotesque)"
      - "**Weights:** 500, 600, 700"
      - "**Kích thước:** 24px, 40px, 48px, 64px, 80px"
      - "**Line height:** 0.90, 1.00, 1.33, 1.50"
      - "**Vai trò:** Headlines và display — dùng ở 80px/700 cho hero, 48–64px/600–700 cho tiêu đề section, 24–40px/500–600 cho subheading. Weight 700 ở kích thước cực lớn là signature: sans in đậm khổng lồ trên nền trắng trống mang toàn bộ trọng lượng thị giác mà màu sắc sẽ mang trên các site khác."

    sf_pro_text___body__ui_label__nút__link_nav__nội_dung_card__trường_form___workhorse_ở_16px_400_cho_đoạn_văn__14px_500_cho_metadata_và_label__18_20px_600_cho_body_được_nhấn_mạnh__line_height_1_5_ở_16px_là_nhịp_điệu_mặc_định__1_2_chặt_hơn_chỉ_xuất_hiện_trên_các_dòng_ui_nhỏ_gọn_____font_sf_pro_text:
      - "**Thay thế:** Inter (miễn phí, bao phủ toàn bộ dải weight với x-height khớp)"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 14px, 16px, 18px, 20px"
      - "**Line height:** 0.80, 1.00, 1.14, 1.20, 1.33, 1.50, 1.60"
      - "**Vai trò:** Body, UI label, nút, link nav, nội dung card, trường form — workhorse ở 16px/400 cho đoạn văn, 14px/500 cho metadata và label, 18–20px/600 cho body được nhấn mạnh. Line-height 1.5 ở 16px là nhịp điệu mặc định; 1.2 chặt hơn chỉ xuất hiện trên các dòng UI nhỏ gọn."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.6 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.14 | -0.4px | `--text-heading-lg` |"
      info: "| heading-xl | 48px | 1.14 | -0.8px | `--text-heading-xl` |"
      info: "| display | 64px | 1 | -1.2px | `--text-display` |"
      info: "| display-lg | 80px | 1 | -1.6px | `--text-display-lg` |"

  tokens___spacing___shapes:

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

    mật_độ: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| tags | 9999px |"
      info: "| cards | 16px |"
      info: "| inputs | 12px |"
      info: "| buttons | 8px |"
      info: "| timeline-bars | 4px |"

    layout:

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

  components:

    top_navigation_bar:
      vai_trò: "Điều hướng toàn site"

      info: "Nền trắng, padding dọc 8px, viền dưới 1px Fog (#c8cad0). Trái: logo mark + wordmark màu #151619 ở 18px/600. Giữa: 4 link nav màu #363940 ở 14px/500 với column gap 32px. Phải: nút ghost outlined 'Request access' (viền Pewter, radius 8px, padding ngang 16px). Sticky khi cuộn."

    primary_cta_button_filled:
      vai_trò: "Hành động chuyển đổi cấp hero và section"

      info: "Nền Charcoal (#25272d), chữ Paper (#ffffff) ở 14px/600, border radius 8px, padding dọc 10px × ngang 20px. Không đổ bóng. Hover chuyển sang #151619 thuần. Dùng cho nút 'Request access' hero và bất kỳ điểm chuyển đổi toàn phần nào."

    ghost_outlined_button:
      vai_trò: "Hành động phụ trong nav hoặc ngữ cảnh inline"

      info: "Nền trong suốt, viền 1px Pewter (#b0b3bb), chữ Ink (#151619) ở 14px/500, radius 8px, padding 10px × 20px. Hover chuyển sang Mist (#f3f3f5). Dùng cho CTA cấp nav và các hành động ưu tiên thấp hơn."

    hero_gradient_highlight_text:
      vai_trò: "Nhấn mạnh từ khóa inline trong headline"

      info: "Chữ được tô bằng gradient Electric Blue (linear-gradient 90deg, #0560fd → #3a8dff → #c3d9ff), hiển thị ở 80px/700 với letter-spacing -1.6px. Gradient chạy từ trái sang phải để từ khóa 'sáng lên' về mặt thị giác so với chữ Ink (#151619) xung quanh. Dành riêng cho 1–2 từ mỗi hero."

    hero_section:
      vai_trò: "Khối chuyển đổi first-fold"

      info: "Cột căn giữa trên canvas trắng, padding trên 64–80px. Eyebrow: link pill nhỏ 'A different kind of pricing →' với viền 1px Ink, radius 9999px, 12px/500. Headline: 80px/700, căn giữa, tracking -1.6px, với một cụm từ được gradient highlight. Subtext: 18px/400 màu Smoke (#7f8491), max-width ~640px. CTA: nút tối filled căn giữa bên dưới."

    product_screenshot_frame:
      vai_trò: "Bằng chứng sản phẩm inline bên dưới hero"

      info: "Ảnh chụp sản phẩm full-width trên canvas trắng không khung, không đổ bóng, không viền — screenshot chảy edge-to-edge trong page max-width 1200px. Bản thân UI sản phẩm chứa các element có màu sắc duy nhất trên trang (thanh timeline xanh dương, xanh lá, cam, hồng cánh sen, xanh mòng két)."

    testimonial_card:
      vai_trò: "Khối bằng chứng xã hội trong lưới 2 cột"

      info: "Nền trắng, viền 1px Fog (#c8cad0), border radius 16px, padding 32px. Bố cục: logo đối tác nhỏ trên cùng bên trái ở chiều cao 20px, sau đó quote body ở 16px/400 màu Ink, khối ghi công ở 14px/500 (tên) + 14px/400 Smoke (vai trò). Lưới 2 cột với gap 24px, responsive xuống 1 cột dưới 768px."

    logo_strip:
      vai_trò: "Dải uy tín đối tác/agency"

      info: "Một hàng căn giữa, chỉ wordmark thang độ xám (không logo màu). Section padding dọc 40px trên và dưới. Không nền card — logo nổi trên nền trắng với letter-spacing rộng giữa chúng. Caption section 'Used by the most innovative agencies worldwide' ở 14px/500 Smoke phía trên hàng."

    timeline___gantt_bar:
      vai_trò: "Trực quan hóa phân công dự án trong UI sản phẩm"

      info: "Hình chữ nhật bo tròn, radius 4px, chiều cao 24px, fill đặc theo dự án (màu rực rỡ: #0560fd xanh dương, #059669 xanh lá, #f59e0b cam, #e11d48 hồng cánh sen, #14b8a6 xanh mòng két). Chữ trắng ở 12px/500 thụt vào 8px từ trái. Bar là vật mang duy nhất của độ bão hòa màu trong product screenshot."

    person_row_card:
      vai_trò: "Mục sidebar trong UI sản phẩm"

      info: "Nền Mist (#f3f3f5) trên hàng đang hoạt động, trong suốt trên các hàng còn lại, padding ngang 8px, padding dọc 4px mỗi hàng. Avatar hình tròn 24×24, tên ở 14px/500 Ink, dự án được gán ở 12px/400 Smoke."

    pill_tag___eyebrow_link:
      vai_trò: "Điều hướng inline hoặc nhãn danh mục"

      info: "Border radius 9999px, viền 1px Ink, padding dọc 12px × ngang 12px, chữ 12px/500 Ink, gap 4px trước chevron/mũi tên. Xuất hiện phía trên hero headline như một tín hiệu điều hướng ngữ cảnh."

    dark_filled_card_footer_cta:
      vai_trò: "Khối tối emphasis cao"

      info: "Nền Charcoal (#25272d), chữ Paper (#ffffff), radius 16px, padding 32px. Đảo ngược hệ thống đơn sắc sáng của trang để thu hút mắt đến khối chuyển đổi cuối cùng."

  do_s_and_don_ts:

    nên:
      - "Đặt body copy ở 16px/400 với line-height 1.5 màu Ink (#151619); dùng Smoke (#7f8491) cho bất kỳ thứ gì là metadata, helper hoặc phụ"
      - "Dùng radius 16px trên tất cả card, section và khung ảnh; dùng radius 8px trên nút, input và element nav"
      - "Chỉ dùng gradient Electric Blue trên inline keyword highlight bên trong headline — không bao giờ dùng làm nền nút, không bao giờ dùng làm nền lớn"
      - "Dùng nút filled Charcoal (#25272d) làm hành động chính duy nhất mỗi section; tất cả hành động khác là ghost/outlined màu Pewter"
      - "Đặt headline ở 64–80px / weight 700 với letter-spacing từ -1.2 đến -1.6px; body giữ 16px / weight 400 — khoảng cách kích thước là phân cấp"
      - "Duy trì nhịp dọc 64–80px giữa các section và padding 32px bên trong card"
      - "Giữ thanh timeline UI sản phẩm là nguồn màu bão hòa duy nhất trên trang; mọi thứ khác giữ trung tính"

    không_nên:
      - "Không dùng #0560fd hoặc bất kỳ tông xanh nào làm nền nút phẳng, fill card hoặc bề mặt lớn — gradient highlight là cách sử dụng accent color được cho phép duy nhất"
      - "Không áp dụng drop shadow, glow hoặc colored elevation cho card hoặc nút — hệ thống này phẳng có chủ đích, phân cấp đến từ viền và trọng số chữ"
      - "Không dùng nhiều accent color trong một section — logo xanh lá và gradient xanh dương là element màu sắc duy nhất được phép bên ngoài product screenshot"
      - "Không dùng border radius trên 20px cho bất kỳ UI element nào — 16px là trần cho card, mọi thứ chặt hơn là 8–12px"
      - "Không căn giữa đoạn văn body — chỉ căn giữa headline, CTA và text label ngắn"
      - "Không dùng màu cho trạng thái — truyền đạt trạng thái qua thay đổi weight, fill hoặc viền (Mist wash, Charcoal fill, Pewter border)"
      - "Không đưa vào serif, display hoặc script face; hệ thống chỉ dùng grotesque và phụ thuộc vào tương phản weight, không phải tương phản phong cách"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Canvas trang, nền nav, lớp nền mọi thứ đặt trên |"
    info: "| 1 | Mist | `#f3f3f5` | Bề mặt card, hàng sidebar, wash nhẹ cho item hovered/active |"
    info: "| 2 | Ash | `#e1e2e5` | Divider section, nền trường input ở trạng thái nghỉ |"
    info: "| 3 | Charcoal | `#25272d` | Bề mặt inverse — nút hành động chính và khối tối footer/CTA |"

  imagery:

    info: "Product screenshot chiếm ưu thế — ảnh chụp Gantt-style timeline full-bleed ở đầu trang, hiển thị không khung hoặc device chrome, để giao diện là hero. Một hình minh họa linh vật gấu trúc vẽ tay xuất hiện như một điểm nghỉ tông giữa logo strip và lưới testimonial — chỉ line-art, mực đen trên trắng, không tô màu. Testimonial card dùng wordmark đối tác (thang độ xám) thay vì chân dung. Không ảnh lifestyle, không abstract gradient, không 3D render. Chế độ ảnh tổng thể là 'product-first, illustration-second, photography-absent.'"

  layout:

    info: "Hero cột đơn căn giữa trên canvas max-width 1200px với nhịp dọc rộng 64–80px. Các section xếp chồng dọc với luồng trắng nối trắng liền mạch chỉ được phân cách bằng hairline border hoặc khoảng trắng. Product screenshot nằm full-bleed trong content max-width. Lưới testimonial là 2×2 (thu gọn thành 1 cột trên mobile) với gap 24px. Logo strip là một hàng căn giữa. Layout không bao giờ dùng sidebar, không bao giờ dùng văn bản nhiều cột, và không bao giờ dùng element chồng chéo — mọi thứ xếp chồng và thở."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #151619"
    - "background: #ffffff"
    - "card surface: #f3f3f5"
    - "border: #c8cad0"
    - "muted text: #7f8491"
    - "primary action: #25272d (filled action)"

    info: "Ví dụ Component Prompts:"
    - "Tạo hero căn giữa: nền trắng (#ffffff), eyebrow pill 'A different kind of pricing →' với viền 1px #151619, radius 9999px, chữ 12px/500. Headline ở 80px weight 700, #151619, letter-spacing -1.6px, với cụm từ 'schedule teams' được tô bằng gradient xanh dương 90deg (#0560fd → #3a8dff → #c3d9ff). Subtext 18px/400 màu #7f8491, căn giữa, max-width 640px. Nút tối filled bên dưới: nền #25272d, chữ trắng ở 14px/600, radius 8px, padding 10px×20px."
    - "Tạo testimonial card: nền trắng, viền 1px #c8cad0, radius 16px, padding 32px. Logo đối tác ở chiều cao 20px trên cùng bên trái. Quote ở 16px/400 màu #151619. Tên ở 14px/500 màu #151619, vai trò ở 14px/400 màu #7f8491."
    - "Tạo top nav bar: nền trắng, padding dọc 8px, viền dưới 1px #c8cad0. Trái: logo + wordmark 'hellotime' ở 18px/600 #151619. Giữa: 4 link nav ở 14px/500 #363940, column gap 32px. Phải: ghost button — nền trong suốt, viền 1px #b0b3bb, radius 8px, chữ #151619."
    - "Tạo product timeline bar: fill đặc #0560fd, radius 4px, chiều cao 24px, chữ trắng ở 12px/500, thụt trái 8px. Nằm bên trong product screenshot canvas trắng không khung hoặc đổ bóng."
    - "Tạo person sidebar row: nền trong suốt (Mist #f3f3f5 khi active), avatar 24×24, tên ở 14px/500 #151619, dự án ở 12px/400 #7f8491, padding ngang 8px, padding dọc 4px."

  elevation_philosophy:

    info: "Hệ thống cố tình không có đổ bóng. Sự phân cách card và section đến từ viền 1px #c8cad0 và tương phản bề mặt Mist (#f3f3f5) với Paper (#ffffff) — không phải từ box-shadow hoặc blur. Tín hiệu 'elevation' duy nhất là nút filled Charcoal (#25272d), đảo ngược độ sáng của trang thay vì nổi lên trên nó. Điều này giữ ngôn ngữ thị giác phẳng, biên tập và giống in ấn; drop shadow sẽ cảm thấy như nhiễu so với phân cấp typographic đậm vốn đã làm công việc nặng nhọc."

  gradient_system:

    info: "Một gradient duy nhất tồn tại trong hệ thống: Electric Blue text highlight (linear-gradient 90deg, #0560fd → #3a8dff → #c3d9ff). Nó được áp dụng độc quyền cho cụm từ khóa inline bên trong headline, không bao giờ cho nền, nút hoặc bề mặt lớn. Gradient chạy từ trái sang phải để đầu sáng thẳng hàng với hướng đọc tự nhiên của từ, tạo hiệu ứng 'được highlight' tương tự nét bút đánh dấu. Đây là nơi duy nhất trên trang biến thể màu sắc xuất hiện — hãy coi nó như dấu câu, không phải trang trí."

  similar_brands:

    - "**Linear** — Cùng theme sáng gần đơn sắc với headline sans-serif đậm khổng lồ và một CTA tối filled duy nhất làm điểm nhấn tương tác"
    - "**Vercel** — Cách tiếp cận giống hệt: canvas trắng, phân cấp type-driven tối thiểu, viền mảnh trên card radius 16px, và một khoảnh khắc accent mỗi màn hình"
    - "**Loom** — Display headline lớn với inline accent treatment, hero cột đơn căn giữa, card phẳng với viền nhẹ và không đổ bóng"
    - "**Raycast** — Landing page product-screenshot-first nơi bản thân UI ứng dụng cung cấp toàn bộ màu sắc, để lại bề mặt marketing hoàn toàn trung tính"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #151619;
          --color-smoke: #7f8491;
          --color-fog: #c8cad0;
          --color-ash: #e1e2e5;
          --color-mist: #f3f3f5;
          --color-paper: #ffffff;
          --color-charcoal: #25272d;
          --color-graphite: #363940;
          --color-pewter: #b0b3bb;
          --color-signal-green: #059669;
          --color-electric-blue: #0560fd;
          --gradient-electric-blue: linear-gradient(90deg, #0560fd 0%, #3a8dff 50%, #c3d9ff 100%);
        
          /* Typography — Font Families */
          --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.4px;
          --text-heading-xl: 48px;
          --leading-heading-xl: 1.14;
          --tracking-heading-xl: -0.8px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -1.2px;
          --text-display-lg: 80px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 32px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-tags: 9999px;
          --radius-cards: 16px;
          --radius-inputs: 12px;
          --radius-buttons: 8px;
          --radius-timeline-bars: 4px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-mist: #f3f3f5;
          --surface-ash: #e1e2e5;
          --surface-charcoal: #25272d;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #151619;
          --color-smoke: #7f8491;
          --color-fog: #c8cad0;
          --color-ash: #e1e2e5;
          --color-mist: #f3f3f5;
          --color-paper: #ffffff;
          --color-charcoal: #25272d;
          --color-graphite: #363940;
          --color-pewter: #b0b3bb;
          --color-signal-green: #059669;
          --color-electric-blue: #0560fd;
        
          /* Typography */
          --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.4px;
          --text-heading-xl: 48px;
          --leading-heading-xl: 1.14;
          --tracking-heading-xl: -0.8px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -1.2px;
          --text-display-lg: 80px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-240: 240px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        }