aboard___style_reference:
  info: "> pastel paper notebook on a white desk"

  theme: "light"

  info: "Aboard là một workspace people-ops nhẹ nhàng, thoáng đãng sống trên nền gần trắng với một màu xanh dương đậm duy nhất đóng vai trò là brand color và bảng năm màu pastel làm bề mặt card để tạo cảm giác ấm áp. Typography dựa trên system-ui với tracking nén: headline rất to, rất tight (64px ở -0.64px) nằm trên body text xám trung tính, khiến trang đọc mang phong cách editorial tự tin thay vì marketing ồn ào. Các component mềm mại và bo tròn — card radius 24px, pill buttons 99px, 10px trên các element nhỏ — và elevation được thay thế bằng các lớp màu pastel thay vì đổ bóng, giữ cho interface mang cảm giác như giấy stationery hơn là kính. Emoji trang trí được inline trong copy và pastel product-mockup cards mang đến cho thương hiệu tính cách vui tươi, gần như notebook."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Canvas | `#fafafa` | `--color-canvas` | Nền trang, surface mặc định — tạo nền off-white, giống giấy cho toàn bộ hệ thống |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Product UI panels, card surfaces, các khối nội dung nâng cao — giữ nội dung sắc nét trên nền canvas off-white |"
    info: "| Ink | `#262626` | `--color-ink` | Heading chính và body text — màu đen làm mềm, đọc ấm áp thay vì gắt |"
    info: "| Graphite | `#757577` | `--color-graphite` | Secondary text, caption, nav labels, muted borders — màu xám hàng ngày cho supporting copy |"
    info: "| Ash | `#aeaeaf` | `--color-ash` | Tertiary text, disabled labels, divider mờ — màu xám nhẹ nhất trong hệ thống |"
    info: "| Outline | `#000000` | `--color-outline` | Hairline borders, icon strokes, divider lines ở độ dày mỏng — cung cấp cạnh cấu trúc mà không gây nhiễu tông màu |"
    info: "| Shadow | `#cdcdcd` | `--color-shadow` | Tông màu đổ bóng một lớp hiếm khi dùng cho floating panels và AI chat popover |"
    info: "| Signal Blue | `#008ae8` | `--color-signal-blue` | Blue outline accent cho tags, divider, và các cạnh UI được focus. Không nâng lên thành primary CTA color |"
    info: "| Sky Tint | `#e0f2fe` | `--color-sky-tint` | Notification pill background, lớp màu xanh nhẹ trên interactive surfaces — tiếng vọng muted của Signal Blue dùng cho các highlight không phải action |"
    info: "| Blush | `#fbcfe8` | `--color-blush` | Decorative card surface — lớp màu hồng ấm làm khung cho product screenshots và feature blocks |"
    info: "| Lavender Mist | `#e6dafd` | `--color-lavender-mist` | Decorative card surface — lớp màu tím nhẹ cho variety blocks và callout cards |"
    info: "| Mint Foam | `#b6edee` | `--color-mint-foam` | Decorative card surface — lớp màu xanh ngọc mát cho product mockup containers và accent cards |"
    info: "| Powder Blue | `#afe4ff` | `--color-powder-blue` | Decorative card surface — lớp màu xanh nhạt dùng cùng các pastel khác để tạo nhịp điệu tông màu |"
    info: "| Butter | `#ffe77a` | `--color-butter` | Decorative card surface — lớp màu vàng ấm, pastel có độ tương phản cao nhất, dùng tiết kiệm cho emphasis cards |"

  tokens___typography:

    system_ui___tất_cả_ui_và_editorial_copy___body_ở_16_400__subheadings_ở_18_20_500__section_headings_ở_24_44_600__hero_display_ở_56_64_600__stack_là_system_ui_san_francisco___segoe_ui___inter_fallback_để_thương_hiệu_kế_thừa_cảm_giác_os_native_mà_không_cần_cấp_phép_webfont_____font_system_ui:
      - "**Thay thế:** Inter, -apple-system, Segoe UI, Roboto, sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 12, 15, 16, 18, 20, 24, 44, 56, 64"
      - "**Line height:** 1.20–1.60"
      - "**Letter spacing:** Thắt chặt khi kích thước tăng: -0.64px ở 64px, -0.50px ở 56px, -0.26px ở 44px, -0.14px ở 24px, -0.10px ở 20px, normal ở 12px. Negative tracking trên display sizes là signature — headline có cảm giác như được đúc bằng kim loại, không phải spacing mặc định của màn hình."
      - "**Vai trò:** Tất cả UI và editorial copy — body ở 16/400, subheadings ở 18–20/500, section headings ở 24–44/600, hero display ở 56–64/600. Stack là system-ui (San Francisco / Segoe UI / Inter fallback) để thương hiệu kế thừa cảm giác OS-native mà không cần cấp phép webfont."

    sans_serif___caption_level_fallback___metadata_text_ở_12px____font_sans_serif:
      - "**Thay thế:** system-ui"
      - "**Weights:** 400"
      - "**Kích thước:** 12"
      - "**Line height:** 1.20"
      - "**Vai trò:** Caption-level fallback / metadata text ở 12px"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.5 | -0.08px | `--text-body-sm` |"
      info: "| subheading | 18px | 1.5 | -0.09px | `--text-subheading` |"
      info: "| subheading-lg | 20px | 1.4 | -0.1px | `--text-subheading-lg` |"
      info: "| heading | 24px | 1.3 | -0.14px | `--text-heading` |"
      info: "| heading-lg | 44px | 1.1 | -0.26px | `--text-heading-lg` |"
      info: "| display | 56px | 1.05 | -0.5px | `--text-display` |"
      info: "| display-xl | 64px | 1 | -0.64px | `--text-display-xl` |"

  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: "| 13 | 13px | `--spacing-13` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      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: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 99px |"
      info: "| cards | 24px |"
      info: "| inputs | 10px |"
      info: "| buttons | 99px |"
      info: "| productMockup | 24px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 40px"
      - "**Element gap:** 10px"

  components:

    primary_filled_button:
      vai_trò: "Một CTA chính duy nhất trong hero và section leads"

      info: "Hình pill (99px radius), nền Signal Blue (#008ae8), chữ trắng, padding dọc 12px × padding ngang 24px, system-ui ở 16px/500. Chỉ hai instance trên mỗi viewport — sự nổi bật của màu xanh được giữ gìn nhờ sự khan hiếm."

    ghost_outlined_button:
      vai_trò: "Secondary action nằm cạnh primary CTA"

      info: "Hình pill (99px radius), nền trong suốt, viền 1px Signal Blue (#008ae8), chữ Signal Blue, padding 12×24px giống filled button. Luôn đi cặp với filled variant để tạo sự căng thẳng primary/secondary rõ ràng."

    header_cta_pill:
      vai_trò: "Persistent book-demo action trong sticky nav"

      info: "Cấu trúc giống Primary Filled Button nhưng nhỏ hơn một chút (padding 10px) và dùng nền Sky Tint (#e0f2fe) với chữ Signal Blue — một nav-level call mềm hơn, không cạnh tranh với hero buttons."

    notification_badge:
      vai_trò: "Compact announcement pill phía trên hero headline"

      info: "Nền Sky Tint (#e0f2fe), radius 99px, padding dọc 4px × ngang 12px, chữ system-ui 12px màu Signal Blue, có ký tự sparkle/dot nhỏ ở đầu. Nằm centered phía trên hero headline."

    pastel_product_card:
      vai_trò: "Full-bleed product mockup container trong hero và các section transition"

      info: "Lớp nền pastel (Blush, Lavender Mist, Mint Foam, Powder Blue, hoặc Butter — xoay vòng giữa chúng) với radius 24px, internal padding rộng 40px, và một white product screenshot inset hơi tràn xuống dưới cạnh card để tạo cảm giác được đặt bằng tay. Pastel card là sự thay thế signature của hệ thống cho drop shadows."

    feature_column:
      vai_trò: "Three-up value-prop block ở mid-page section"

      centered_stack: "một custom line-icon nhỏ (thin stroke, màu Ink) ở ~32px, sau đó là subheading 16–18px màu Ink, rồi dòng supporting body-sm màu Graphite. Gap dọc 32px giữa icon và label, 8px giữa label và body. Không có card chrome — nằm trực tiếp trên canvas."

    in_product_app_card:
      vai_trò: "White panel đại diện cho giao diện ứng dụng Aboard trong mockups"

      info: "Bề mặt Pure White, radius 10px, viền 1px pha màu #fafafa, shadow mềm 0 2px 8px #cdcdcd. Được dùng bên trong pastel product cards để làm cho ứng dụng có cảm giác như một sản phẩm thực thay vì một hình minh họa phẳng."

    task_checklist_card:
      vai_trò: "In-product component hiển thị trong mockups — danh sách task được gán"

      info: "White card, radius 10px, viền accent mỏng ở cạnh trên, icon check màu xanh lá ở cạnh trái, dòng tiêu đề Ink/500, progress counter màu Graphite, các checklist items là các hàng 16px với dot indicator nhỏ bên trái."

    ai_chat_panel:
      vai_trò: "Floating assistant drawer hiển thị ở cạnh phải của mockups"

      info: "White panel, radius 10px, shadow đơn 0 4px 16px #cdcdcd, rộng 320px. User message bubbles trong Sky Tint (#e0f2fe) với chữ Ink, assistant replies là các hàng text thuần, input field ở dưới cùng với radius 10px và send icon màu Signal Blue."

    sticky_top_navigation:
      vai_trò: "Persistent header trên tất cả các trang"

      info: "Nền trắng, viền dưới 1px tông #fafafa, cao 64px, logo Aboard (kèm lockup 'by Teamtailor' ở 12px) bên trái, ba text links (Product / Price / Resources) centered màu Graphite 15px/500, và một CTA pill nhỏ màu xanh bên phải. Không có mega-menu — nav luôn tối giản."

    sticky_mini_nav:
      vai_trò: "Compact scroll-triggered navigation xuất hiện trên đầu các pastel product mockup sections"

      info: "Thanh pill trắng (99px radius), shadow 0 2px 8px #cdcdcd, chứa mini logo lockup, ba text links, và một nút Book demo filled. Float centered, cách 16px từ đỉnh viewport."

    three_column_value_grid:
      vai_trò: "Section-level layout cho khối 'Built for people'"

      info: "Ba cột bằng nhau với column gap 32px, nội dung centered, và headline trải dài toàn bộ chiều rộng phía trên. Emoji inline trong headline (kiểu 💜 😎 🦋) được đặt ở cùng kích thước display 44px với màu đầy đủ — sự nhượng bộ duy nhất của thương hiệu cho trang trí."

    outlined_action_link:
      vai_trò: "Inline text link dùng trong body copy"

      info: "Màu Ink (#262626) mặc định, màu Signal Blue (#008ae8) khi hover, không gạch chân mặc định, gạch chân 1px Signal Blue khi hover. Kế thừa kích thước và weight của body xung quanh."

  do_s_and_don_ts:

    do:
      - "Dùng Signal Blue (#008ae8) cho đúng một filled button trên mỗi viewport — sự khan hiếm mới làm nó nổi bật"
      - "Dùng pastel card surfaces (Blush, Lavender Mist, Mint Foam, Powder Blue, Butter) thay vì drop shadows khi cần đóng khung product screenshot hoặc feature block"
      - "Đặt tất cả headline ở kích thước đã trích xuất với negative letter-spacing tương ứng — 64px dùng -0.64px, 44px dùng -0.26px, 24px dùng -0.14px"
      - "Dùng radius 99px trên mọi button, tag, và notification pill — hình pill là signature của hệ thống"
      - "Giữ radius 24px trên mọi card và product mockup container; chỉ dùng radius 10px trên inner product UI panels"
      - "Đặt padding 40px trên pastel product cards và gap 32px giữa các feature columns"
      - "Giữ canvas ở #fafafa (off-white) thay vì pure white — sự ấm áp mới làm pastel nổi bật"

    don_t:
      - "Không đưa thêm một saturated accent color thứ hai — Signal Blue là giọng nói màu sắc duy nhất trong hệ thống"
      - "Không dùng multi-layer drop shadows nặng; hệ thống chỉ dùng một shadow #cdcdcd duy nhất ở 0 2px 8px và chỉ cho floating panels"
      - "Không dùng letter-spacing thẳng (0px) trên bất kỳ headline nào trên 20px — negative tracking là yếu tố chịu lực cho cảm giác editorial"
      - "Không ghép ghost button với bất kỳ thứ gì khác ngoài filled blue button — hai cái là một cặp, không phải lựa chọn thay thế"
      - "Không đặt pure white cards trên pastel washes với cạnh cứng; làm mềm bằng radius 24px và để pastel loang ra"
      - "Không dùng emoji trong body copy — chúng chỉ xuất hiện bên trong display headline của value-prop section"
      - "Không vượt quá page max-width 1200px; hệ thống được thiết kế cho một cột đọc centered, có giới hạn"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Canvas | `#fafafa` | Nền trang, bề mặt bàn off-white |"
    info: "| 1 | Pure White | `#ffffff` | Product UI panels, white cards, và các khối nội dung nâng cao |"
    info: "| 2 | Pastel Wash | `#fbcfe8` | Decorative product-mockup card frames và feature highlight blocks |"
    info: "| 2 | Pastel Wash Alt | `#e0f2fe` | Notification pill và soft interactive highlight backgrounds |"

  elevation:

    - "**AI Chat Panel:** `0 4px 16px rgba(205, 205, 205, 0.5)`"
    - "**Sticky Mini Nav:** `0 2px 8px rgba(205, 205, 205, 0.6)`"
    - "**In-Product App Card:** `0 2px 8px rgba(205, 205, 205, 0.4)`"

  imagery:

    info: "Imagery chủ yếu là product UI mockups được trình bày bên trong pastel card frames thay vì ảnh chụp độc lập. Các product screenshots hiển thị ứng dụng Aboard — nav bar, task lists, employee cards, AI chat panel — được render sắc nét ở 1x với viền mỏng 1px. Emoji trang trí inline trong display headline thêm tính cách mà không cam kết với một hệ thống minh họa. Không có lifestyle photography, không 3D renders, không abstract graphics. Khi hệ thống cần bầu không khí, nó dùng pastel wash + product UI, không phải stock imagery."

  layout:

    info: "Mô hình trang centered, max-width 1200px với khoảng trống dọc rộng rãi. Hero là một centered stack trên canvas: announcement pill → display headline (hai dòng, 56–64px) → supporting paragraph → dual-button pair → full-bleed pastel product card bên dưới. Mid-page dùng một three-column value grid full-width (32px gaps) dưới một display headline centered với inline emoji. Section gap là 64px giữa các khối chính. Sticky nav vẫn là một thanh trắng cố định 64px; một floating pill-shaped mini nav xuất hiện khi người dùng cuộn vào product mockup section. Nhịp điệu tổng thể là: trắng → pastel card → trắng → pastel card → trắng, tạo ra nhịp điệu xếp chồng giấy thay vì các dải tối/sáng xen kẽ."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #fafafa"
    - "surface: #ffffff"
    - "text: #262626 (Ink)"
    - "muted text: #757577 (Graphite)"
    - "border: #000000 ở độ dày mỏng, tông #fafafa cho soft dividers"
    - "accent: #008ae8 (Signal Blue) — màu bão hòa duy nhất, dùng cho actions và active states"
    - "pastel card surfaces: #fbcfe8 (Blush), #e6dafd (Lavender Mist), #b6edee (Mint Foam), #afe4ff (Powder Blue), #ffe77a (Butter)"
    - "soft highlight wash: #e0f2fe (Sky Tint)"
    - "primary action: không có CTA color riêng biệt"

    example_component_prompts:

    - "*Build the hero block*: Nền Canvas #fafafa. Centered stack. Announcement pill ở trên cùng — radius 99px, nền #e0f2fe, chữ system-ui 12px/500 màu #008ae8, có sparkle prefix nhỏ, padding 4px 12px. Display headline ở 64px system-ui/600 màu #262626, letter-spacing -0.64px, hai dòng. Subtitle paragraph ở 18px system-ui/400 màu #757577, max-width 560px. Hàng button: filled pill (nền #008ae8, chữ trắng, radius 99px, padding 12px 24px, 16px/500) cạnh ghost pill (nền trong suốt, viền 1px #008ae8, chữ #008ae8, cùng radius và padding). Sau đó là pastel product card full-width bên dưới — radius 24px, internal padding 40px, nền #fbcfe8, chứa white app screenshot với radius 10px và shadow 0 2px 8px #cdcdcd."

    - "*Build a pastel feature card*: Chọn một pastel từ năm màu (ví dụ #b6edee Mint Foam). Outer radius 24px, padding 40px. Bên trong: white panel ở radius 10px chứa nội dung feature, với line-icon nhỏ màu Ink (32px, stroke 1.5px) ở góc trên bên trái, heading 18px/500 màu #262626, và description 15px/400 màu #757577. Không shadow trên outer card — pastel wash làm nhiệm vụ phân cách."

    - "*Build the three-column value grid*: Section full-width trên nền #fafafa. Display headline centered ở 44px system-ui/600 màu #262626, letter-spacing -0.26px, với một inline emoji đặt ở cùng kích thước (ví dụ 💜 🦋 ✨). Bên dưới, ba cột bằng nhau với gap 32px. Mỗi cột: line-icon 32px centered màu #262626, sau đó label 16px/500 màu #262626, rồi dòng supporting 15px/400 màu #757577. Không card chrome — nội dung nằm trực tiếp trên canvas."

    - "*Build the AI chat floating panel*: White panel rộng 320px, radius 10px, shadow đơn 0 4px 16px rgba(205,205,205,0.5). Hàng header với tên assistant ở 15px/500 #262626. Khu vực chat: user messages dạng bubble #e0f2fe với chữ #262626, padding 12px 16px, radius 16px; assistant messages là các hàng text thuần #262626. Input ở dưới cùng — viền 1px #aeaeaf, radius 10px, placeholder 15px màu #757577, send icon màu #008ae8 ở bên phải."

    - "*Build a task checklist card (in-product)*: White card, radius 10px, viền 1px tông #fafafa, shadow 0 2px 8px rgba(205,205,205,0.4). Hàng tiêu đề: icon check xanh lá nhỏ (bên trái), 'Tasks' ở 16px/500 #262626, counter 'Assigned' ở 13px/400 #757577 (bên phải). Bên dưới: bốn hàng 16px/400 màu #262626, mỗi hàng có dot indicator nhỏ bên trái màu #aeaeaf và khoảng cách dọc 8px giữa các hàng."

  similar_brands:

    - "**Linear** — Cùng pattern hero centered-display-headline, negative letter-spacing tight trên large type, và pastel accent washes thay thế drop shadows"
    - "**Notion** — System-ui type stack, off-white canvas, và một accent color duy nhất làm tất cả công việc chromatic trong khi decorative surfaces vẫn nhạt và giống giấy"
    - "**Loom** — Layout nhẹ nhàng thoáng đãng với product mockups được đóng khung trong colored card backgrounds và một primary action color đậm duy nhất"
    - "**Teamtailor** — Affinity với thương hiệu mẹ — cùng category HR/people-ops, cùng từ vựng pastel card thân thiện, cùng pattern pill-button CTA"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas: #fafafa;
          --color-pure-white: #ffffff;
          --color-ink: #262626;
          --color-graphite: #757577;
          --color-ash: #aeaeaf;
          --color-outline: #000000;
          --color-shadow: #cdcdcd;
          --color-signal-blue: #008ae8;
          --color-sky-tint: #e0f2fe;
          --color-blush: #fbcfe8;
          --color-lavender-mist: #e6dafd;
          --color-mint-foam: #b6edee;
          --color-powder-blue: #afe4ff;
          --color-butter: #ffe77a;
        
          /* Typography — Font Families */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 15px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.08px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.09px;
          --text-subheading-lg: 20px;
          --leading-subheading-lg: 1.4;
          --tracking-subheading-lg: -0.1px;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: -0.14px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.26px;
          --text-display: 56px;
          --leading-display: 1.05;
          --tracking-display: -0.5px;
          --text-display-xl: 64px;
          --leading-display-xl: 1;
          --tracking-display-xl: -0.64px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 40px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 99px;
        
          /* Named Radii */
          --radius-tags: 99px;
          --radius-cards: 24px;
          --radius-inputs: 10px;
          --radius-buttons: 99px;
          --radius-productmockup: 24px;
        
          /* Surfaces */
          --surface-canvas: #fafafa;
          --surface-pure-white: #ffffff;
          --surface-pastel-wash: #fbcfe8;
          --surface-pastel-wash-alt: #e0f2fe;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas: #fafafa;
          --color-pure-white: #ffffff;
          --color-ink: #262626;
          --color-graphite: #757577;
          --color-ash: #aeaeaf;
          --color-outline: #000000;
          --color-shadow: #cdcdcd;
          --color-signal-blue: #008ae8;
          --color-sky-tint: #e0f2fe;
          --color-blush: #fbcfe8;
          --color-lavender-mist: #e6dafd;
          --color-mint-foam: #b6edee;
          --color-powder-blue: #afe4ff;
          --color-butter: #ffe77a;
        
          /* Typography */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 15px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.08px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.09px;
          --text-subheading-lg: 20px;
          --leading-subheading-lg: 1.4;
          --tracking-subheading-lg: -0.1px;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: -0.14px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.26px;
          --text-display: 56px;
          --leading-display: 1.05;
          --tracking-display: -0.5px;
          --text-display-xl: 64px;
          --leading-display-xl: 1;
          --tracking-display-xl: -0.64px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 99px;
        }