browserbase___style_reference:
  info: "> editorial broadsheet kết hợp data terminal — một chấm cam nóng duy nhất tô điểm trên nền gần như đơn sắc với headline GT Planar cỡ lớn, bề mặt card pastel mềm, và metadata mono nhỏ."

  theme: "light"

  info: "Browserbase mang phong cách của một developer tool hướng dữ liệu nhưng khoác lên mình lớp áo editorial broadsheet: một canvas gần như đơn sắc được neo bởi một màu cam nóng duy nhất, chỉ dùng để nhấn mạnh typography chứ không bao giờ dùng cho button. Giao diện giữ sự yên tĩnh với các bề mặt đen, trắng và trắng ngà, trong khi card và feature block giới thiệu các tông pastel mềm — tím oải hương nhạt, xanh da trời, kem — để nhóm nội dung mà không cần dùng shadow. Display headline bằng GT Planar cỡ lớn nằm cạnh label GT Standard Mono nhỏ gọn, tạo nhịp điệu của một tạp chí kỹ thuật: những câu khẳng định mạnh mẽ xen kẽ với metadata chính xác. Pill button đen đặc (filled) đảm nhận mọi hành động chính; màu cam được dành riêng cho highlight box bên trong headline và footer band, biến màu thương hiệu thành dấu câu chứ không phải tín hiệu điều hướng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, filled action buttons, card borders, dividers — xương sống cấu trúc của toàn bộ giao diện |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, icon fills trên nền tối |"
    info: "| Faint Slate | `#f8fafc` | `--color-faint-slate` | Màu trắng ngà nhẹ cho logo strip cards, nền panel phụ, tông màu xen kẽ cho section |"
    info: "| Lavender Mist | `#e2e9f3` | `--color-lavender-mist` | Bề mặt feature card và tông nền section — xám lạnh mềm giúp nhóm nội dung mà không tạo cảm giác nặng nề |"
    info: "| Blue-Gray Mist | `#c5d3e8` | `--color-blue-gray-mist` | Tông nền hero, bề mặt code-card, border mềm — lớp wash khí quyển có kết cấu |"
    info: "| Cream Wash | `#fffde6` | `--color-cream-wash` | Tông ấm nhạt cho bề mặt card phụ và nền badge — thêm hơi ấm mà không cần chroma |"
    info: "| Sky Tint | `#c4edff` | `--color-sky-tint` | Nền code/terminal block, inline highlight wash trên body text, badge fills nhạt |"
    info: "| Graphite | `#686562` | `--color-graphite` | Body text nhẹ nhàng, border phụ — bước giảm duy nhất từ đen thuần cho nội dung ít quan trọng |"
    info: "| Signal Orange | `#ff4500` | `--color-signal-orange` | Orange outline accent cho tags, dividers, và cạnh UI được focus. Không nâng cấp lên màu CTA chính |"

  tokens___typography:

    plain___body_text_và_ui_labels_ở_16px_lh_1_50_và_subheadings_ở_24px_lh_1_30__grotesque_trung_tính_với_letter_spacing_gần_như_bằng_0___vô_hình_theo_thiết_kế__để_display_face_đảm_nhận_hệ_thống_phân_cấp__thay_thế__inter_hoặc_geist_____font_plain:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 16px, 24px"
      - "**Line height:** 1.30–1.50"
      - "**Letter spacing:** 0.0070em–0.0100em (~0.11–0.24px ở 16px)"
      - "**Vai trò:** Body text và UI labels ở 16px (lh 1.50) và subheadings ở 24px (lh 1.30). Grotesque trung tính với letter-spacing gần như bằng 0 — vô hình theo thiết kế, để display face đảm nhận hệ thống phân cấp. Thay thế: Inter hoặc Geist."

    gtplanar___display_và_heading_face__đảm_nhận_mọi_editorial_headline__negative_tracking_mạnh__0_02em_đến__0_05em_siết_chặt_các_dạng_hình_học__bộ_glyph_thay_thế__ss05__là_chữ_ký___nó_định_hình_lại_letterform_thành_giọng_nói_riêng_của_thương_hiệu__kích_thước_hero_189px_là_một_tuyên_bố__không_phải_heading__thay_thế__gt_america_hoặc_s_hne_breit_cho_mật_độ_hình_học_____font_gtplanar:
      - "**Thay thế:** GT America"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 34px, 45px, 189px"
      - "**Line height:** 1.00–1.15"
      - "**Letter spacing:** -0.0500em ở 189px (-9.45px), -0.0200em ở 34–45px (-0.68 đến -0.9px)"
      - "**OpenType features:** `\"ss05\" on`"
      - "**Vai trò:** Display và heading face. Đảm nhận mọi editorial headline. Negative tracking mạnh (-0.02em đến -0.05em) siết chặt các dạng hình học; bộ glyph thay thế \"ss05\" là chữ ký — nó định hình lại letterform thành giọng nói riêng của thương hiệu. Kích thước hero 189px là một tuyên bố, không phải heading. Thay thế: GT America hoặc Söhne Breit cho mật độ hình học."

    gtstandardmono___metadata_labels__section_eyebrows__uppercase_tags__chú_thích_gần_code__positive_tracking_0_03_0_06em_mở_rộng_mono_thành_label_utility__không_phải_code_chạy__thay_thế__jetbrains_mono_hoặc_ibm_plex_mono_____font_gtstandardmono:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.0300em–0.0600em (0.42–0.84px ở 14px)"
      - "**Vai trò:** Metadata labels, section eyebrows, uppercase tags, chú thích gần code. Positive tracking (0.03–0.06em) mở rộng mono thành label utility, không phải code chạy. Thay thế: JetBrains Mono hoặc IBM Plex Mono."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.2 | 0.6px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.11px | `--text-body` |"
      info: "| subheading | 24px | 1.3 | -0.12px | `--text-subheading` |"
      info: "| heading | 34px | 1.15 | -0.68px | `--text-heading` |"
      info: "| heading-lg | 45px | 1.1 | -0.9px | `--text-heading-lg` |"
      info: "| display | 189px | 1 | -9.45px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "compact"

    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: "| 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: "| 60 | 60px | `--spacing-60` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 4px |"
      info: "| buttons | 50px |"

    layout:

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

  components:

    pill_action_button_primary:
      vai_trò: "Filled black CTA dùng cho mọi hành động chính — 'Get API key', 'Get a demo', 'Get started'"

      info: "Background #000000, text #ffffff, family plain ở 16px weight 500, padding 8px 21px (dọc/ngang), border-radius 50px. Không border. Chiều cao nhỏ gọn (~36px). Black fill đậm là bề mặt action bão hòa duy nhất trong hệ thống."

    ghost_button:
      vai_trò: "Secondary action với icon — 'Copy prompt' kèm copy icon"

      info: "Background trong suốt, border 1px #000000, text #000000, family plain 16px weight 500, padding 8px 21px, border-radius 50px. Icon nằm bên phải label với gap 6px. Hoạt động như người bạn đồng hành yên tĩnh bên cạnh primary pill."

    orange_highlight_box:
      vai_trò: "Nhấn mạnh typography inline bên trong headline — bọc một cụm từ khóa bằng khối màu cam"

      info: "Background #ff4500, text #000000, family gtPlanar ở kích thước heading với weight normal. Nằm inline trong headline, cùng baseline và kích thước với text xung quanh. Padding ~2px 6px, không border-radius hoặc rất nhẹ (~2px). Highlight là chữ ký: biến màu cam thành dấu câu, không phải control."

    navigation_bar:
      vai_trò: "Điều hướng cấp cao nhất của site"

      info: "Background #ffffff với bottom border 1px #e2e9f3, chiều cao ~56px, padding 3px ngang. Bên trái: logo (icon B màu cam + wordmark plain). Trung tâm: nav links bằng plain 16px #000000 với column gap 16px. Bên phải: 'Log in' (text link), 'Sign up' (text link), 'Get a demo' (pill button). Links cách nhau 21px."

    feature_card:
      vai_trò: "Card grid 4 cột cho feature illustrations và mô tả"

      info: "Background #e2e9f3, border-radius 4px, padding 16-24px. Chứa browser-window mockup illustration (white card với 3-dot chrome, ~3px radius, light gray border), headline bằng gtPlanar 16-24px weight 500, body text bằng plain 16px #686562, và pill button 'Get started' ở dưới cùng. Cards nằm trực tiếp trên white canvas — lavender fill tạo nhóm."

    logo_card:
      vai_trò: "Ô logo công ty trong social-proof strip"

      info: "Background #f8fafc, border-radius 4px, padding 24px dọc / 24-32px ngang. Chứa một logo công ty grayscale duy nhất được căn giữa. Sắp xếp theo hàng ngang với column gap 6-8px. Background tint nhẹ giúp logo đọc như một nhóm mà không cần divider."

    code_terminal_card:
      vai_trò: "Khối code snippet hoặc search query demonstration"

      info: "Background #c5d3e8 hoặc #c4edff, border-radius 4px, padding 16-24px. Chứa mono label ở trên cùng bằng gtStandardMono 14px (ví dụ: 'Searching for \"roundtrip flight from SFO to NYC\"') và một hoặc nhiều input field nhạt bên dưới (white fill, ~3px radius, 1px lavender border). Hoạt động như bề mặt trình diễn sản phẩm."

    browser_window_mockup:
      vai_trò: "Element minh họa bên trong feature cards — mô phỏng tab trình duyệt thật"

      info: "Bề mặt trắng với border 1px #e2e9f3, border-radius ~3px. Thanh trên cùng hiển thị ba chấm tròn nhỏ (window controls) màu #c5d3e8. Vùng nội dung chứa UI element đơn giản (sign-in form, broken-flow alert, search list) được render bằng cùng ngôn ngữ đơn sắc + một màu cam như phần còn lại của hệ thống. Luôn nằm bên trong feature card."

    section_header:
      vai_trò: "Nhóm heading căn giữa cho các content section"

      cấu_trúc_hai_dòng: "headline lớn bằng gtPlanar 34-45px weight 500, #000000, letter-spacing -0.68 đến -0.9px, với orange highlight box trên cụm từ khóa. Subtitle bên dưới bằng plain 16px weight 400, #686562, line-height 1.50. Căn giữa trên canvas với gap 16-24px giữa headline và subtitle."

    two_column_api_block:
      vai_trò: "Hàng feature sản phẩm — visual bên trái, mô tả bên phải"

      cột_trái: "code/terminal card (xem ở trên) chiếm ~55% chiều rộng. Cột phải: headline bằng plain hoặc gtPlanar 18-24px, body bằng plain 16px #686562, và text link gạch chân màu #000000. Các cột cách nhau 24-32px gap. Căn trên cùng, không căn giữa."

    mono_eyebrow_label:
      vai_trò: "Section metadata, uppercase tag nhỏ phía trên hoặc dưới nội dung"

      info: "Family gtStandardMono 14px weight 400, letter-spacing 0.06em, uppercase, màu #000000 hoặc #686562. Dùng cho các stat strip kiểu '10,000+ COMPANIES BUILDING BEYOND THE API'. Căn giữa hoặc căn trái, cách content block gần nhất 16-24px."

    footer_band:
      vai_trò: "Footer của site"

      info: "Background #ff4500 (Signal Orange), text #000000. Full-bleed. Orange band là bề mặt chromatic lớn duy nhất trong hệ thống — nó đóng khung trang và làm footer không thể nhầm lẫn. Nội dung xếp chồng căn giữa với plain text links và metadata."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng fill #000000 với border-radius 50px cho mọi primary action button — black pill là bề mặt action duy nhất."
      - "Bọc một cụm từ khóa trong bất kỳ headline nào bằng orange highlight box #ff4500 cùng kích thước font và weight với text xung quanh."
      - "Áp dụng 'ss05' font-feature-settings cho tất cả text gtPlanar — bộ glyph thay thế là bản sắc typography của thương hiệu."
      - "Dùng #e2e9f3 lavender-mist cho bề mặt feature card và #f8fafc faint-slate cho logo strip cards để tạo nhóm mà không cần divider."
      - "Đặt gtPlanar display headlines với letter-spacing -0.02em đến -0.05em (càng chặt khi kích thước tăng) — negative tracking là yếu tố làm headline mang chất editorial."
      - "Dùng gtStandardMono 14px với 0.06em letter-spacing ở dạng uppercase cho section metadata, eyebrows và stat labels."
      - "Giữ giao diện 95%+ đơn sắc — màu cam duy nhất là công cụ highlight, không phải màu bề mặt."

    không_nên_làm:
      - "Không bao giờ dùng #ff4500 làm button background, border hoặc hover state — nó chỉ là typographic accent."
      - "Không bao giờ dùng box-shadow cho card elevation — thay vào đó, truyền đạt độ sâu qua độ tương phản màu bề mặt và border 1px."
      - "Không bao giờ dùng geometric hoặc display font cho body text — plain (hoặc Inter thay thế) là UI face duy nhất dưới 24px."
      - "Không bao giờ dùng border-radius 999px đầy đủ trên buttons — 50px pill là mid-weight cụ thể, không phải capsule đầy đủ."
      - "Không bao giờ dùng màu text chromatic cho body copy — text chỉ là #000000 hoặc #686562."
      - "Không bao giờ đặt nhiều orange highlight boxes trong cùng một headline — mỗi dòng chỉ một cụm từ được nhấn mạnh."
      - "Không bao giờ dùng #0000ee hoặc browser default link blue — underlined #000000 là link style."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas chính và nền content section |"
    info: "| 1 | Faint Slate | `#f8fafc` | Logo strip band, tông màu xen kẽ section, nền panel yên tĩnh |"
    info: "| 2 | Lavender Mist | `#e2e9f3` | Bề mặt feature card, content block được nhóm, code-card base |"
    info: "| 3 | Blue-Gray Mist | `#c5d3e8` | Nền khí quyển hero, bề mặt card nâng cao, border mềm |"
    info: "| 4 | Cream Wash | `#fffde6` | Bề mặt accent ấm, nền badge, callout fills |"

  elevation:

    info: "Elevation được truyền đạt qua sự thay đổi màu bề mặt và hairline border 1px, không bao giờ dùng drop shadows. Cards nằm trên canvas nhờ độ tương phản giữa lavender/cream fills và nền trắng; border 1px đen hoặc lavender đóng kín cạnh. Box-shadow chỉ xuất hiện một lần trong hệ thống — một halo xanh-xám mềm (#c5d3e8) phía sau khu vực hero illustration. Sự phẳng này là chữ ký: thiết kế tin tưởng màu sắc và khoảng cách để tạo chiều sâu, không phải ánh sáng mô phỏng."

  imagery:

    info: "Imagery tối giản và cố tình pixelated/kỹ thuật số. Trung tâm hero là data-mountain visualization được render bằng pixel art thô: pixel xanh lá, vàng, cam và đen tạo thành các dãy núi lởm chởm trên nền trời xanh nhạt với chấm dot-texture. Product illustrations là browser-window mockups phẳng với UI đơn giản bên trong, không bao giờ photorealistic. Không có photography ở bất kỳ đâu. Iconography là mono-weight hình học, được vẽ bằng stroke 1-2px. Ngôn ngữ hình ảnh tổng thể là digital-native: pixel, halftone dots, terminal cursors và code blocks thay thế photography và illustration truyền thống. Imagery chiếm diện tích hero lớn nhưng zero-density ở mọi nơi khác."

  layout:

    info: "Full-bleed hero với nền xanh-xám khí quyển và headline + CTA stack căn giữa. Content sections căn giữa trong max-width ~1200px. Logo strip trải dài toàn bộ chiều rộng như một band yên tĩnh giữa hero và content. Feature sections xen kẽ giữa text-only headers căn giữa và two-column (visual + text) product rows. Feature card grid là 4 cột trên desktop, với cards trên bề mặt lavender. Nhịp điệu dọc rộng rãi: 64-96px giữa các section chính, 8-16px giữa các element. Trang đọc từ trên xuống dưới như sau: hero ấn tượng → social proof yên tĩnh → editorial feature sections → product showcases → orange footer. Navigation là một sticky top bar duy nhất với pill CTA. Layout tin tưởng whitespace và màu bề mặt để tạo nhóm, không bao giờ dùng visible grid lines hoặc dividers."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 / #e2e9f3"
    - "accent: #ff4500 (Signal Orange — headlines và footer chỉ)"
    - "primary action: #000000 (filled action)"
    - "muted text: #686562"

    info: "Ví dụ Component Prompts:"

    - "Hero section: Full-bleed background #c5d3e8 với dot texture. Headline căn giữa bằng gtPlanar 45px weight 500, #000000, letter-spacing -0.9px, với highlight box #ff4500 quanh cụm từ khóa (cùng kích thước, padding 2px 6px). Subtitle bằng plain 16px weight 400, #686562, line-height 1.50. Primary CTA: black pill button (#000000 bg, #ffffff text, plain 16px weight 500, padding 8px 21px, 50px radius). Secondary CTA: ghost button (transparent bg, border 1px #000000, cùng pill geometry)."

    - "Feature card: Background #e2e9f3, border-radius 4px, padding 24px. Browser window mockup bên trong (white surface, border 1px #e2e9f3, 3px radius, 3 chấm tròn #c5d3e8 window-control dots ở thanh trên cùng). Headline bằng gtPlanar 24px weight 500, #000000, letter-spacing -0.12px. Body bằng plain 16px, #686562. Black pill button 'Get started' ở dưới cùng."

    - "Section header: Căn giữa. Eyebrow bằng gtStandardMono 14px, 0.06em tracking, uppercase, #000000. Headline bằng gtPlanar 34px weight 500, #000000, letter-spacing -0.68px, với highlight box #ff4500 trên cụm từ nhấn mạnh. Subtitle bằng plain 16px, #686562, cách 16-24px bên dưới."

    - "Logo strip card: Background #f8fafc, border-radius 4px, padding 24px. Chứa một logo công ty grayscale duy nhất, căn giữa. Sắp xếp theo hàng ngang với column gap 8px trên nền section trắng."

    - "Code card: Background #c5d3e8, border-radius 4px, padding 16-24px. Mono label ở trên cùng bằng gtStandardMono 14px với 0.06em tracking. Một hoặc nhiều white input fields bên dưới (white bg, border 1px #e2e9f3, 3px radius, padding 8-12px)."

  similar_brands:

    - "**Resend** — Cùng aesthetic editorial-display-kết-hợp-developer-tool: headline hình học cỡ lớn, canvas gần như đơn sắc, một màu accent đậm duy nhất dành riêng cho typographic highlights, và compact pill CTAs"
    - "**Vercel** — Chia sẻ sự thống trị đơn sắc với black filled pill buttons, mật độ spacing chặt chẽ, và kỷ luật để một màu accent (cam ở đây, đen-trên-trắng ở kia) mang toàn bộ năng lượng thương hiệu"
    - "**Linear** — Mật độ compact tương ứng, hairline borders thay vì shadows để phân cách card, và bảng màu gần như achromatic với việc sử dụng màu phẫu thuật chỉ cho state và emphasis"
    - "**Stripe** — Cùng cách tiếp cận bề mặt card pastel mềm (lavender, xanh da trời, kem) nằm trên white canvas để nhóm nội dung mà không cần divider hoặc elevation"
    - "**Raycast** — Developer-tool sensibility với mono metadata labels, compact pill buttons, và sự tự tin để giữ toàn bộ giao diện gần như đơn sắc với màu sắc như dấu câu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-faint-slate: #f8fafc;
          --color-lavender-mist: #e2e9f3;
          --color-blue-gray-mist: #c5d3e8;
          --color-cream-wash: #fffde6;
          --color-sky-tint: #c4edff;
          --color-graphite: #686562;
          --color-signal-orange: #ff4500;
        
          /* Typography — Font Families */
          --font-plain: 'plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtplanar: 'gtPlanar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandardmono: 'gtStandardMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.11px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.12px;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --tracking-heading: -0.68px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.9px;
          --text-display: 189px;
          --leading-display: 1;
          --tracking-display: -9.45px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 4px;
          --radius-buttons: 50px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-faint-slate: #f8fafc;
          --surface-lavender-mist: #e2e9f3;
          --surface-blue-gray-mist: #c5d3e8;
          --surface-cream-wash: #fffde6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-faint-slate: #f8fafc;
          --color-lavender-mist: #e2e9f3;
          --color-blue-gray-mist: #c5d3e8;
          --color-cream-wash: #fffde6;
          --color-sky-tint: #c4edff;
          --color-graphite: #686562;
          --color-signal-orange: #ff4500;
        
          /* Typography */
          --font-plain: 'plain', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtplanar: 'gtPlanar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandardmono: 'gtStandardMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: 0.6px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.11px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.12px;
          --text-heading: 34px;
          --leading-heading: 1.15;
          --tracking-heading: -0.68px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.9px;
          --text-display: 189px;
          --leading-display: 1;
          --tracking-display: -9.45px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 50px;
          --radius-full-2: 999px;
        }