flowmapp___style_reference:
  info: "> White blueprint desk with one blue pen"

  theme: "light"

  info: "Flowmapp sử dụng ngôn ngữ sáng sủa, thoáng đãng, gần giống như một cuốn lab-notebook: nền gần như trắng tinh, headline đen đậm cỡ lớn, CTA hình pill màu xanh dương, và một chùm các mockup sản phẩm nhỏ nổi lơ lửng — đóng vai trò như bằng chứng chứ không phải trang trí. Hệ thống chỉ dùng một màu xanh dương sống động duy nhất (#0080ff) làm tín hiệu bão hòa, mọi thứ còn lại giữ achromatic hoặc gần xám để màu sắc được hiểu là hành động, không phải nhiễu. Hình dạng được bo tròn mạnh — card bo 20–32px, button và tag thành pill tròn ở 1600px, và hero CTA còn có đuôi vẽ tay lượn sóng khiến hành động chính trông như được phác thảo chứ không phải dùng template. Layout được giới hạn max-width với nhiều khoảng thở; nội dung được ngắt quãng bằng các screenshot sản phẩm nhỏ, mảnh UI nổi, và một hàng icon badge tròn pastel dùng để chấm câu cho các đoạn văn dài."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#0080ff` | `--color-signal-blue` | Accent xanh dương hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính |"
    info: "| Voltage Violet | `#0050ff` | `--color-voltage-violet` | Viền card trang trí phát sáng, hero gradient bloom, accent outline màu trên mockup nổi — nằm sâu hơn Signal Blue một bậc cho các khoảnh khắc thương hiệu phân lớp |"
    info: "| Sky Wash | `#c5e0fb` | `--color-sky-wash` | Accent xám hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính |"
    info: "| Pencil Gray | `#8c9baa` | `--color-pencil-gray` | Body text mờ, border mảnh, nav divider, step badge, metadata cấp ba |"
    info: "| Graphite | `#636f7b` | `--color-graphite` | Body copy phụ, nav item không hoạt động, mô tả hỗ trợ |"
    info: "| Ink | `#000000` | `--color-ink` | Headline, body chính, button text, logo wordmark — giọng nói chủ đạo của hệ thống ở độ tương phản AAA trên nền trắng |"
    info: "| Carbon | `#222222` | `--color-carbon` | Navigation text, label UI dày đặc khi màu đen thuần cảm giác nặng |"
    info: "| Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card, button text trên Signal Blue, bề mặt inverted |"

  tokens___typography:

    inter___hệ_thống_một_font__display_dùng_weight_700_ở_64_118px_với_tracking_chặt__0_06em_và_line_height_gần_vuông_0_94_1_09_để_headline_xếp_chồng_thành_một_khối_typography_gọn__body_và_ui_dùng_400_500_ở_14_18px_với_line_height_1_4_1_67__weight_600_700_dành_riêng_cho_heading__cta__và_section_label__weight_500_dùng_cho_button_text_và_badge_dạng_small_caps_____font_inter:
      - "**Thay thế:** DM Sans, Manrope, hoặc system-ui sans-serif"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 10, 12, 13, 14, 16, 18, 24, 30, 36, 48, 64, 72, 84, 96, 118"
      - "**Line height:** 0.94, 1.00, 1.04, 1.09, 1.14, 1.25, 1.30, 1.40, 1.43, 1.67"
      - "**Letter spacing:** -0.0600em ở 118px display, giảm dần xuống -0.0150em ở 14px body, normal (0) ở 12px trở xuống"
      - "**OpenType features:** `\"cv11\", \"ss01\" on, \"tnum\" cho số dạng bảng trong pricing/data`"
      - "**Vai trò:** Hệ thống một font. Display dùng weight 700 ở 64–118px với tracking chặt (-0.06em) và line-height gần vuông (0.94–1.09) để headline xếp chồng thành một khối typography gọn. Body và UI dùng 400–500 ở 14–18px với line-height 1.4–1.67. Weight 600–700 dành riêng cho heading, CTA, và section label; weight 500 dùng cho button text và badge dạng small caps."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.015px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.015px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.02px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.02px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.14 | -0.03px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.09 | -0.036px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -0.053px | `--text-display` |"
      info: "| display-xl | 118px | 0.94 | -0.06px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    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: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 184 | 184px | `--spacing-184` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 6px |"
      info: "| tags | 1600px |"
      info: "| cards | 20px |"
      info: "| images | 24px |"
      info: "| inputs | 12px |"
      info: "| buttons | 1600px |"
      info: "| iconBadges | 1600px |"
      info: "| featureCards | 32px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px` | `--shadow-lg` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    hero_cta_button:
      vai_trò: "Hành động chuyển đổi chính"

      info: "Hình pill (1600px radius) với phần mở rộng đuôi bên phải dạng lượn sóng/viên ngậm đặc trưng. Fill: Signal Blue (#0080ff). Text: trắng, Inter 600 ở 18–24px, letter-spacing -0.02em. Padding: 16px 32px (có thêm padding phải để chứa đuôi lượn sóng). Shadow phát sáng Sky Wash nhẹ ở rgba(197,224,251,0.6) offset 18px. Không border."

    nav_login_button:
      vai_trò: "Hành động phụ trong nav"

      info: "Pill dạng outline, 1600px radius, border 1px Pencil Gray (#8c9baa), fill trong suốt, text Carbon (#222222) ở 14px weight 500. Padding: 8px 20px."

    nav_try_for_free_button:
      vai_trò: "Hành động chính trong nav"

      info: "Pill dạng filled, 1600px radius, nền Ink (#000000), text trắng, 14px weight 500. Padding: 8px 20px. Icon mũi tên phải nhỏ ở 12px."

    step_badge:
      vai_trò: "Label tiêu đề section"

      info: "Pill (1600px radius) với border 1px Pencil Gray, fill trong suốt. Bên trái: 'STEP 1' màu Ink ở 11px weight 600, uppercase. Dấu chấm phân cách. Bên phải: mô tả Pencil Gray ở 11px weight 400. Padding: 6px 12px."

    feature_card_two_column:
      vai_trò: "Làm nổi bật tính năng sản phẩm"

      info: "Bề mặt trắng, radius 20–32px, border 1px Pencil Gray (#8c9baa ở 1px). Padding: 32–48px. Cột trái: icon Pencil Gray 16–18px phía trên heading 16–18px weight 600 màu Ink, rồi body 14–16px Pencil Gray weight 400. Cột phải: screenshot hoặc mockup sản phẩm với 24px radius."

    section_heading_block:
      vai_trò: "Mở đầu section lớn"

      info: "Display weight 700, kích thước 48–72px, line-height 1.0–1.09, letter-spacing -0.036 đến -0.053em, màu Ink. Không clamp max-width — text wrap tự nhiên ở 2–4 dòng. Căn giữa hoặc căn trái tùy section."

    icon_badge_pastel_circles:
      vai_trò: "Biểu tượng tính năng inline"

      info: "Hình tròn full-pill radius (1600px) đường kính 28–32px. Fill pastel mềm (vàng, bạc hà, hồng, oải hương, đào) với icon stroke tối 1–1.5px bên trong. Đặt inline trong body text để chấm câu cho danh sách tính năng."

    product_phone_mockup:
      vai_trò: "Hình ảnh hero/tính năng"

      info: "Khung điện thoại dọc với outer radius 32–48px, bề mặt trong trắng, border 1px Pencil Gray. Chứa các phần UI xếp chồng (Header, Menu, Cards) mỗi phần là một chip màu: pastel vàng, bạc hà, hồng, đào. Drop shadow: rgba(0,0,0,0.06) 0px 0px 18px."

    feature_tile_card_ai_generator:
      vai_trò: "Card tính năng nổi bật"

      info: "Card trắng, 20px radius, border 1px. Chứa tag uppercase nhỏ màu pastel (ví dụ 'AI GENERATOR' màu hồng), button pill tối bên trong (fill Ink, text trắng, '✨ Generate Sitemap'), và hình minh họa con trỏ. Padding: 24px."

    sitemap_node_card:
      vai_trò: "Phần tử sơ đồ cấu trúc"

      info: "Card trắng nhỏ, 12px radius, border 1px Pencil Gray. Chứa: dòng tiêu đề, label chip mã màu (vàng/hồng/xanh lá ở 6px radius), thumbnail, và footer meta. Dùng trong layout dạng cây/đồ thị."

    top_rated_product_badge:
      vai_trò: "Label bằng chứng xã hội"

      info: "Pill nhỏ, 1600px radius, fill trắng, border 1px Pencil Gray, 'Top Rated Product' ở 12px weight 500 màu Ink với icon tick xanh lá nhỏ. Padding: 4px 12px."

    avatar_stack:
      vai_trò: "Bằng chứng xã hội"

      info: "Hàng ngang 5–6 avatar hình tròn đường kính 28px, chồng lên nhau -8px, mỗi avatar có border ring trắng 2px. Bên dưới: caption 'Over 400,000 users' màu Pencil Gray ở 13px."

    logo_trust_bar:
      vai_trò: "Bằng chứng xã hội doanh nghiệp"

      info: "Hàng ngang căn giữa full-width gồm 6 logo doanh nghiệp dạng grayscale (Intel, IBM, Tesla, EA, UNICEF, Deloitte) ở độ mờ ~60%, chiều cao 24px, fill Pencil Gray. Phía trên là caption 'You're in good company' ở 13px Pencil Gray. Padding: 48px 0."

    floating_annotation_card:
      vai_trò: "Callout phụ trong hero"

      info: "Card trắng nhỏ, 12px radius, shadow mềm rgba(0,0,0,0.06) 0px 0px 18px. Chứa chú thích 2 dòng: label đậm + mô tả Pencil Gray. Kết nối với các phần tử hero qua đường cong mảnh màu Signal Blue."

  do_s_and_don_ts:

    do:
      - "Dùng Signal Blue (#0080ff) làm màu bão hòa duy nhất trên trang — không bao giờ đưa thêm màu thương hiệu thứ hai cho action, link, hoặc highlight."
      - "Làm mọi control tương tác thành pill (1600px radius) trừ khi đó là form input (dùng 12px)."
      - "Đặt display headline ở 48–118px Inter 700 với letter-spacing từ -0.036em đến -0.06em để type nén thành một khối typography chặt thay vì trải rộng thoáng."
      - "Dùng border 1px Pencil Gray (#8c9baa) để phân cách card khỏi nền trắng thay vì dùng shadow — shadow chỉ dành cho phần tử hero nổi."
      - "Neo long-form copy bằng icon badge tròn pastel đặt inline (radius 1600px, 28–32px) để danh sách tính năng dễ quét bằng mắt."
      - "Padding feature card 24–48px ở mọi phía và dùng radius 20–32px — không bao giờ dùng góc vuông trên bất kỳ bề mặt card nào."
      - "Thả nổi product UI mockup trong hero với shadow mềm rgba(0,0,0,0.06) 18px và kết nối chúng bằng đường cong mảnh màu Signal Blue để làm bằng chứng trực quan."

    don_t:
      - "Không thêm màu thương hiệu bão hòa thứ hai cho button, link, hoặc active state — hệ thống là đơn sắc với một tín hiệu xanh duy nhất."
      - "Không dùng góc vuông trên card, button, hoặc tag; mọi thứ người dùng nhìn thấy đều được bo tròn ít nhất 6px và hầu hết control là full pill."
      - "Không dùng drop shadow nặng trên content card; shadow duy nhất được phép là 0.06 alpha 18px blur, và chỉ dành cho product mockup nổi và modal."
      - "Không để body copy vượt quá 16–18px hoặc dùng weight trên 500 — bất cứ thứ gì nặng hơn đều thuộc về heading."
      - "Không dùng display weight dưới 600 cho heading; hệ thống dựa vào giọng nói đậm để mang bảng màu tối giản."
      - "Không tô section bằng xanh dương đặc, gradient mesh, hoặc dải màu — nền luôn trắng, màu chỉ xuất hiện dưới dạng accent hoặc phát sáng."
      - "Không dùng xám trung tính cho action text hoặc fill chính — màu text duy nhất cho button là trắng trên Signal Blue hoặc Ink, không bao giờ là Pencil Gray."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 0 | Paper | `#ffffff` | Canvas trang, nền section |"
    info: "| 1 | Card | `#ffffff` | Feature card nổi, product mockup, step panel — phân biệt với canvas bằng border 1px Pencil Gray thay vì shadow |"
    info: "| 2 | Elevated | `#ffffff` | Hover state và modal — thêm shadow mềm 0.06 alpha ở 18px blur |"
    info: "| 3 | Signal | `#0080ff` | Bề mặt action chính, nav indicator đang hoạt động |"

  elevation:

    - "**Product mockup nổi và annotation card:** `rgba(0, 0, 0, 0.06) 0px 0px 18px 0px`"
    - "**Hero CTA button glow:** `0px 0px 18px 0px rgba(197, 224, 251, 0.6)`"

  imagery:

    info: "Hình ảnh chủ yếu là product mockup trong ứng dụng thay vì nhiếp ảnh: screenshot UI trong khung điện thoại, annotation card nhỏ nổi, sitemap tree node card, và tile preview AI-generator. Chúng được xử lý như vật thể vật lý — có shadow mềm, xoay nhẹ, và kết nối bằng đường cong xanh mảnh. Mô típ phụ là icon badge tròn pastel (vàng, bạc hà, hồng, oải hương, đào ở ~28px) đặt inline trong body copy để chấm câu cho các đề cập tính năng. Hàng avatar trust dùng ảnh người thật ở 28px với border ring trắng. Mật độ tổng thể nhẹ: khoảng 60% text, 40% product mockup, không có lifestyle photography, không hero video, không có hình minh họa trang trí ngoài các mảnh UI."

  layout:

    info: "Layout được giới hạn max-width ở 1200px, căn giữa, với section gap dọc 96px+ rộng rãi. Hero là một khối headline căn giữa với product mockup nổi rải rác bất đối xứng xung quanh — không phải layout split text+image. Bên dưới hero, các section xen kẽ giữa 'logo trust bar' (full-width, căn giữa, mật độ thấp) và feature block hai cột 'text-left / mockup-right' luôn mở đầu bằng heading căn trái cỡ lớn. Feature block dùng card bo tròn 20–32px làm khung cho mockup. Trang không bao giờ dùng full-bleed màu, không bao giờ dùng sidebar, và dựa vào sticky top nav với logo container radius 6px, link căn giữa, và CTA pill đen bên phải."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (headline, copy chính), #222222 (nav), #636f7b (phụ), #8c9baa (mờ/border)"
    - "Background: #ffffff (canvas, card)"
    - "Border: 1px solid #8c9baa"
    - "Accent: #0080ff (Signal Blue) — link, active state, brand wordmark arrow"
    - "primary action: không có màu CTA riêng biệt"
    - "Decorative glow: #c5e0fb (Sky Wash), #0050ff (Voltage Violet, chỉ dùng cho accent border)"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì phát minh màu CTA filled."

    - "**Feature Section Card**: Bề mặt trắng, 32px radius, border 1px solid #8c9baa. Padding 48px mọi phía. Cột trái: icon tối 20px (Inter hoặc outline stroke) phía trên heading 18px Inter 600 #000000, rồi body 16px Inter 400 #636f7b. Cột phải: product mockup với 24px radius và shadow rgba(0,0,0,0.06) 0px 0px 18px."

    - "**Display Heading Block**: Inter 700, 72px, line-height 1.0, letter-spacing -0.053em, color #000000. Căn giữa, không clamp max-width — để nó wrap tự nhiên ở 2–3 dòng."

    - "**Step Badge**: 1600px pill radius, border 1px solid #8c9baa, fill trong suốt. Đoạn trái: 'STEP 1' ở Inter 600 11px #000000, uppercase. Đoạn phải sau dấu • phân cách: 'AI SITEMAP' ở Inter 400 11px #8c9baa. Padding 6px 12px."

    - "**Pastel Icon Badge**: Hình tròn đầy đủ 1600px, đường kính 32px. Fill một trong các màu {pastel vàng #fff3c4, bạc hà #c8f0d8, hồng #ffd6e0, oải hương #e0d4ff, đào #ffe0c4}. Icon stroke tối 1.5px căn giữa bên trong. Dùng inline trong body text để đánh dấu tên tính năng."

  typography_voice:

    info: "Giọng nói của hệ thống này là 'cỡ lớn và yên tĩnh.' Headline thống trị trang ở 48–118px Inter 700 nhưng không mang tín hiệu màu sắc — chúng là màu đen thuần. Sự tương phản giữa type khổng lồ và action Signal Blue duy nhất tạo ra hệ thống phân cấp nơi người dùng biết chính xác nơi để nhấp mà không cần đọc label. Body copy nhỏ (14–16px), xám, và mang tính đàm thoại, với icon badge pastel đóng vai trò như bullet point trực quan. CTA và heading là những thứ lên tiếng; mọi thứ khác chỉ hỗ trợ."

  button_geometry:

    info: "Hình học button đặc trưng là pill 1600px radius, nhưng hero CTA còn đi xa hơn: cạnh phải của nó không phải hình bán nguyệt hoàn hảo mà là một đường viền lượn sóng vẽ tay (giống như nét cọ hoặc sóng), mang lại cho action chính một tính cách phác thảo, phi doanh nghiệp. Tất cả các button khác (nav login, nav try-free, in-card actions) đều là pill tiêu chuẩn. Chỉ dùng geometry đuôi lượn sóng cho CTA quan trọng nhất trên mỗi trang — không bao giờ dùng cho action phụ hoặc button lặp lại."

  similar_brands:

    - "**Linear** — Cùng kỷ luật một accent-color duy nhất (một xanh dương sống động trên UI achromatic) và pill-shaped CTA với display headline tracking chặt"
    - "**Framer** — Cùng playbook marketing sản phẩm: canvas trắng, display type đậm cỡ lớn, product mockup nổi rải rác trong hero, chip accent pastel"
    - "**Pitch** — Khớp bề mặt card border 1px với shadow tối thiểu, hình học button full-pill, và đen trên trắng với một accent chromatic"
    - "**Notion** — Bảng màu hai tông hạn chế tương tự, geometric sans kiểu Inter cho mọi thứ, và thói quen hiển thị sản phẩm dưới dạng mảnh UI nổi trong hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #0080ff;
          --color-voltage-violet: #0050ff;
          --color-sky-wash: #c5e0fb;
          --color-pencil-gray: #8c9baa;
          --color-graphite: #636f7b;
          --color-ink: #000000;
          --color-carbon: #222222;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.015px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.015px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.02px;
          --text-heading: 36px;
          --leading-heading: 1.14;
          --tracking-heading: -0.03px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: -0.036px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.053px;
          --text-display-xl: 118px;
          --leading-display-xl: 0.94;
          --tracking-display-xl: -0.06px;
        
          /* 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-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-144: 144px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 1600px;
        
          /* Named Radii */
          --radius-nav: 6px;
          --radius-tags: 1600px;
          --radius-cards: 20px;
          --radius-images: 24px;
          --radius-inputs: 12px;
          --radius-buttons: 1600px;
          --radius-iconbadges: 1600px;
          --radius-featurecards: 32px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-card: #ffffff;
          --surface-elevated: #ffffff;
          --surface-signal: #0080ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #0080ff;
          --color-voltage-violet: #0050ff;
          --color-sky-wash: #c5e0fb;
          --color-pencil-gray: #8c9baa;
          --color-graphite: #636f7b;
          --color-ink: #000000;
          --color-carbon: #222222;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.015px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.015px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.02px;
          --text-heading: 36px;
          --leading-heading: 1.14;
          --tracking-heading: -0.03px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.09;
          --tracking-heading-lg: -0.036px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.053px;
          --text-display-xl: 118px;
          --leading-display-xl: 0.94;
          --tracking-display-xl: -0.06px;
        
          /* 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-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-144: 144px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 48px;
          --radius-full-2: 1600px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 0px 18px 0px;
        }