general_intelligence_company___style_reference:
  info: "> thành phố minh họa ẩn sau lớp kính mờ"

  theme: "light"

  info: "General Intelligence Company mang phong cách ấn phẩm biên tập về AI ứng dụng: nền canvas ấm áp màu trắng kem (#fefffc) kết hợp headline serif gần như đen và body text sans-serif gọn gàng, với một điểm nhấn xanh dương duy nhất (#0081c0) được dùng rất tiết chế. Tranh minh họa full-bleed (phong cảnh thành phố chạng vạng, cánh đồng hoa) tạo không khí, trong khi các thẻ text kính mờ nổi trên đó để truyền tải thông điệp — hero là một tableau văn học, không phải ảnh chụp sản phẩm. Serif display tùy chỉnh 'ppmondwest' với tracking -0.02em chặt chẽ tạo giọng điệu đo lường, gần như học thuật; sans-serif 'af' giữ mọi bề mặt khác yên tĩnh và chức năng. Các component có cảm giác như giấy và nhẹ: viền hairline, ring shadow mềm, border-radius lớn trên thẻ (12-24px), và pill controls nổi thay vì panel đặc nặng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Hudson Blue | `#0081c0` | `--color-hudson-blue` | Blue wash cho highlight background, decorative bands, và điểm nhấn mềm phía sau nội dung. Không nâng lên thành màu CTA chính |"
    info: "| Slate Cyan | `#41a1cf` | `--color-slate-cyan` | Blue accent cho viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. Không nâng lên thành màu CTA chính |"
    info: "| Graphite Night | `#282834` | `--color-graphite-night` | Fill của floating navigation island và icon strokes — bề mặt tối làm neo cho pill-shaped nav trên nền canvas sáng |"
    info: "| Ink | `#171717` | `--color-ink` | Text chính và màu viền chủ đạo. Chiếm 619 occurrences — xương sống cấu trúc của giao diện |"
    info: "| Carbon | `#2c2c2c` | `--color-carbon` | Text heading phụ và UI elements tối — mềm hơn Ink một chút cho subheadings và khối text dày |"
    info: "| Iron | `#444141` | `--color-iron` | Viền button, icon strokes, cạnh bề mặt tối vừa. Nằm giữa Ink và Steel trên thang tối |"
    info: "| Steel | `#646464` | `--color-steel` | Muted helper text và link borders. Bước đầu tiên từ text chính — dùng cho body captions và metadata ít nổi bật |"
    info: "| Fog | `#b4b8b4` | `--color-fog` | Hairline sáng và faint surface fills — divider nhẹ nhàng phân tách nội dung mà không gây chú ý |"
    info: "| Ash | `#a5afaf` | `--color-ash` | Xám trung cho subtle background fills và muted borders trên inactive elements |"
    info: "| Mist | `#cfd3cf` | `--color-mist` | Soft fill cho inactive hoặc decorative surface layers — tone không trắng nhẹ nhất trước khi border xuất hiện |"
    info: "| Sage | `#dee2de` | `--color-sage` | Viền ring của card và button — đường viền gần như vô hình tạo cạnh cho bề mặt thay vì shadow |"
    info: "| Cream | `#fefffc` | `--color-cream` | Page canvas — trắng kem ấm áp ngăn site trông lạnh lẽo. Background nổi bật nhất |"
    info: "| Linen | `#f9faf7` | `--color-linen` | Secondary surface và nav fill — mát hơn Cream một bước, dùng cho floating panels và alternating bands |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, elevated panels, và lớp trên cùng trong surface stack. Trắng tinh khiết cho content blocks nổi trên Cream canvas |"
    info: "| Obsidian | `#1f1f29` | `--color-obsidian` | High-contrast neutral action fill cho primary buttons trên bề mặt sáng. |"

  tokens___typography:

    ppmondwest___display_headings___serif_biên_tập_mang_lại_giọng_văn_học__gần_như_học_thuật_cho_thương_hiệu__dùng_ở_40_54px_với_tracking__0_02em_chặt_chẽ__cài_đặt__liga__0_cố_tình_tắt_ligatures__giữ_khoảng_cách_và_tính_hình_học_nhẹ_của_từng_chữ_____font_ppmondwest:
      - "**Thay thế:** Source Serif 4, Lora, hoặc PT Serif"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 40px, 48px, 54px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.02em"
      - "**OpenType features:** `\"liga\" 0`"
      - "**Vai trò:** Display headings — serif biên tập mang lại giọng văn học, gần như học thuật cho thương hiệu. Dùng ở 40-54px với tracking -0.02em chặt chẽ. Cài đặt 'liga' 0 cố tình tắt ligatures, giữ khoảng cách và tính hình học nhẹ của từng chữ."

    af___body_text__ui_elements__navigation__buttons__và_inline_links__ngựa_thồ_chức_năng___gọn_gàng__yên_tĩnh__và_dễ_đọc_cao__light_negative_tracking__0_01_đến__0_012em_thắt_chặt_ui_text_dày_đặc_mà_không_cảm_thấy_cách_điệu_____font_af:
      - "**Thay thế:** Inter, Söhne, hoặc Geist Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 13px, 15px, 16px, 18px"
      - "**Line height:** 1.20-1.50"
      - "**Letter spacing:** -0.0120em, -0.0100em"
      - "**Vai trò:** Body text, UI elements, navigation, buttons, và inline links. Ngựa thồ chức năng — gọn gàng, yên tĩnh, và dễ đọc cao. Light negative tracking (-0.01 đến -0.012em) thắt chặt UI text dày đặc mà không cảm thấy cách điệu."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|------|"
      info: "| caption | 13px | 1.4 | -0.156px | `--text-caption` |"
      info: "| body-sm | 15px | 1.5 | -0.15px | `--text-body-sm` |"
      info: "| subheading | 18px | 1.3 | -0.18px | `--text-subheading` |"
      info: "| heading | 40px | 1.1 | -0.8px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -0.96px | `--text-heading-lg` |"
      info: "| display | 54px | 1.1 | -1.08px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 50px |"
      info: "| cards | 12px |"
      info: "| buttons | 4px |"
      info: "| heroCards | 24px |"
      info: "| elevatedCards | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|------|"
      info: "| sm | `rgba(0, 0, 0, 0.15) 0px 2px 6px 0px` | `--shadow-sm` |"
      info: "| subtle | `rgb(222, 226, 222) 0px 0px 0px 1px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) ...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle-3` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.05) 0px 1px 8px 0px` | `--shadow-sm-2` |"

    layout:

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

  components:

    floating_pill_navigation:
      vai_trò: "Primary site navigation — một dark glassmorphic island nổi ở đầu trang"

      info: "Dark fill (#282834) với border-radius ~50px tạo hình pill hoàn hảo. Chứa icon, text nav items (trắng #ffffff, 15px af weight 400), và CTA 'Get Cofounder'. Subtle drop shadow: rgba(0,0,0,0.15) 0px 2px 6px. Canh giữa theo chiều ngang, không full-width — nằm như một compact floating element."

    pill_cta_button:
      vai_trò: "Primary action trong navigation"

      info: "Dark fill (#1f1f29 hoặc gần đen) với text trắng ('Get Cofounder'), 15px af weight 500, padding dọc 4px-8px, padding ngang 12px-16px, border-radius 4px với inline arrow icon. Gọn gàng và tự tin — không dùng full pill radius dù nằm bên trong pill nav."

    frosted_hero_text_card:
      vai_trò: "Thẻ thông điệp phủ lên trên full-bleed illustrated backgrounds"

      info: "Card tròn lớn (24px radius) với hiệu ứng frosted/blur glass và blue-tinted wash. White headline text ở display size, white body text, và link 'Get to know us' màu trắng với mũi tên. Nổi trên tranh minh họa thành phố hoặc đồng cỏ. Padding khoảng 16-20px."

    large_display_headline:
      vai_trò: "Primary content heading trên các section trắng"

      info: "ppmondwest ở 40-54px, line-height 1.10, letter-spacing -0.02em, màu Ink (#171717). Có thể trải dài 2-3 dòng ở full width. Inline links trong headline dùng Hudson Blue (#0081c0) với gạch chân — các từ như 'multiple fields' trở nên tương tác giữa câu."

    diagram_card:
      vai_trò: "Container minh họa hỗ trợ trong content sections"

      info: "Bề mặt trắng (#ffffff) với viền Sage (#dee2de) 1px, border-radius 16-24px, và soft layered shadows (rgba(0,0,0,0.08) 0px 1px 1px + rgba(0,0,0,0.08) 0px 4px 5px). Chứa geometric diagrams thưa thớt — các hình vuông outlined rải rác đại diện cho các hệ thống biệt lập."

    outlined_action_button:
      vai_trò: "Secondary hoặc ghost action"

      info: "Transparent hoặc Linen fill với viền Slate Cyan (#41a1cf) hoặc Iron (#444141) 1px, border-radius 4-8px, padding dọc 4-8px, padding ngang 12-16px. Text cùng màu, af 15px weight 500."

    sidebar_label:
      vai_trò: "Section identifier trong bố cục nhiều cột"

      info: "Khối text nhỏ uppercase hoặc có nhãn trong Iron (#444141), af 13-15px, với heading đậm ('Isolated systems') và body text muted trong Steel (#646464). Nằm bên trái diagram card."

    timezone_indicator:
      vai_trò: "Live status element trong nav"

      info: "Text tối thiểu ở góc trên bên phải của floating nav hiển thị giờ địa phương ('8:30 PM NYC') với icon đồng hồ nhỏ. White text trên nền nav tối, af 13px."

    full_bleed_illustrated_section:
      vai_trò: "Background không khí — tranh thành phố hoặc phong cảnh thiên nhiên trải dài toàn bộ viewport"

      info: "Không border-radius, không card wrapping. Minh họa CHÍNH LÀ background của section. Nội dung được truyền tải qua frosted text card phủ lên. Tạo cảm giác văn học, gần như điện ảnh — thương hiệu tự định vị mình trong một thế giới được vẽ thực tế, không phải trên nền màu phẳng."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng ppmondwest ở 40-54px cho tất cả major headings với letter-spacing -0.02em và line-height 1.10"
      - "Dùng pattern frosted card (radius lớn 16-24px, blur backdrop, text trắng) cho thông điệp phủ trên painted full-bleed backgrounds"
      - "Giữ floating nav là dark pill (~50px radius) với shadow rgba(0,0,0,0.15) 0px 2px 6px, không phải thanh full-width"
      - "Dùng Hudson Blue (#0081c0) độc quyền cho inline links trong headlines — đây là màu chromatic duy nhất trong hệ thống"
      - "Dùng Cream (#fefffc) làm page canvas và Paper (#ffffff) cho elevated card surfaces để duy trì nền trắng kem ấm áp"
      - "Đặt inline links trong display headings với gạch chân 1px màu Hudson Blue — các từ giữa câu trở nên tương tác mà không phá vỡ dòng đọc"
      - "Mặc định dùng hairline Sage (#dee2de) borders và soft layered shadows cho chiều sâu card thay vì heavy drop shadows"

    không_nên_làm:
      - "Không thêm màu chromatic bổ sung — hệ thống cố tình đơn sắc với một accent xanh duy nhất"
      - "Không dùng filled solid-color CTA buttons trên content canvas — action là dark pills trong nav hoặc outlined với Slate Cyan borders"
      - "Không dùng full-width sticky header bar — nav phải nổi như một centered pill island"
      - "Không dùng ảnh chụp sản phẩm, stock photography, hoặc abstract gradient backgrounds — ngôn ngữ hình ảnh chỉ là painterly illustration"
      - "Không dùng system fonts hoặc generic serifs cho display headings — đặc tính của ppmondwest (và cài đặt 'liga' 0) là chữ ký của thương hiệu"
      - "Không dùng card grids, pricing tables, hoặc feature matrices — bố cục là editorial và reading-first, không phải catalog-first"
      - "Không áp dụng border-radius lớn cho content buttons — radius 4px là có chủ đích, dành hình pill cho nav island và frosted overlay cards"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Cream | `#fefffc` | Page canvas — nền trắng kem ấm áp cho mọi nội dung |"
    info: "| 1 | Linen | `#f9faf7` | Floating nav island và subtle band alternation |"
    info: "| 2 | Paper | `#ffffff` | Card surfaces và content blocks phía trên canvas |"
    info: "| 3 | Graphite Night | `#282834` | Dark surface cho floating navigation pill |"

  elevation:

    - "**Floating Nav:** `rgba(0, 0, 0, 0.15) 0px 2px 6px 0px`"
    - "**Frosted Hero Card:** `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px`"
    - "**Diagram Card:** `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px`"
    - "**Outlined Button:** `rgb(222, 226, 222) 0px 0px 0px 1px`"

  imagery:

    info: "Ngôn ngữ hình ảnh mang tính hội họa và minh họa, không phải nhiếp ảnh. Tranh kỹ thuật số full-bleed — đường chân trời Manhattan chạng vạng với cửa sổ sáng đèn và bầu trời đầy sao, cánh đồng hoa với thủy tiên và tán lá xanh tươi — trải dài toàn bộ viewport làm backdrop không khí. Phong cách chi tiết, hơi ấn tượng, với màu sắc phong phú và chiều sâu. Đây không phải stock photos hay abstract gradients; chúng là những cảnh mang cảm giác vẽ tay neo thương hiệu vào một thế giới vật lý, gần như lãng mạn hóa. Nội dung hỗ trợ dùng geometric diagrams thưa thớt (hình vuông outlined rải rác trên nền trắng) thay vì decorative imagery. Icons tối thiểu — glyphs outlined mảnh (đồng hồ, mũi tên, logo mark) màu trắng hoặc Iron. Mật độ tổng thể là text-dominant: tranh vẽ cung cấp một khoảnh khắc cảm xúc lớn, sau đó trang trở lại typography biên tập yên tĩnh."

  layout:

    info: "Centered max-width layout (~1200px) với một hero full-viewport duy nhất, sau đó alternating content sections thở với không gian dọc rộng rãi. Hero là painted illustration full-bleed với frosted text card nổi ở góc dưới bên trái — không có headline canh giữa trên background gradient, không có ảnh chụp sản phẩm. Các section tiếp theo dùng nền Paper trắng với large display heading canh trái trải dài khoảng nửa chiều rộng trang, kết hợp với sidebar text block và diagram card trong bố cục 2 cột. Floating pill navigation canh giữa ở trên cùng, không full-width — nó nằm như một island. Nhịp điệu là: painted hero → white editorial section → painted band tiếp theo. Nội dung thưa thớt và văn học, với section gaps 48px+ và chỉ 2-3 section riêng biệt hiển thị ở độ sâu cuộn tương đương above-the-fold. Không có card grids, không pricing tables, không feature matrices — đây là trải nghiệm đọc, không phải catalog sản phẩm."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #171717 (Ink)"
    - "background: #fefffc (Cream)"
    - "surface: #ffffff (Paper)"
    - "border: #dee2e0 (Sage)"
    - "accent: #0081c0 (Hudson Blue)"
    - "primary action: #41a1cf (outlined action border)"

    example_component_prompts:

    - "**Editorial Headline Section**: Nền White Paper (#ffffff), centered max-width 1200px. Display heading 'Existing specialized agents have shown success in multiple fields' ở 54px ppmondwest weight 400, màu #171717, letter-spacing -1.08px, line-height 1.10. Cụm từ 'multiple fields' là link: #0081c0, gạch chân 1px. Bên dưới: sidebar với heading 15px af weight 700 'Isolated systems' trong #171717, body text trong #646464 af 15px. Bên phải: diagram card — fill #ffffff, viền #dee2de 1px, radius 16px, soft shadow rgba(0,0,0,0.08) 0px 1px 1px + 0px 4px 5px."

    - "**Floating Pill Navigation**: Dark pill (fill #282834), canh giữa, border-radius ~50px, padding 8px 12px, shadow rgba(0,0,0,0.15) 0px 2px 6px. Bên trái: icon logo outlined nhỏ. Giữa: nav items 'About', 'Writing', 'Careers' trong #ffffff af 15px weight 400. Bên phải: dark ghost button 'Get Cofounder →' trong #1f1f29, text #ffffff, radius 4px, padding 8px 12px, af 15px weight 500. Xa bên phải: timezone '8:30 PM NYC' trong #ffffff af 13px với icon đồng hồ."

    - "**Frosted Hero Text Card**: Phủ trên painted cityscape background full-bleed. Card: border-radius 24px, frosted glass với blue-tinted wash, padding ~20px. White headline 'AI that runs businesses autonomously' ở 48px ppmondwest weight 400, letter-spacing -0.96px, line-height 1.10. White body text ở 15px af weight 400. White link 'Get to know us →' ở 15px af weight 500 với gạch chân 1px và arrow icon. Card nằm ở góc phần tư dưới bên trái của viewport."

    - "**Full-Bleed Painted Hero Section**: 100vw × 100vh. Background: tranh kỹ thuật số cảnh thành phố chạng vạng với cửa sổ nhà chọc trời sáng đèn, bầu trời đầy sao, và tán lá tiền cảnh. Không border-radius. Nội dung chỉ được truyền tải qua frosted text card phủ lên. Navigation nằm như floating pill ở giữa trên cùng."

    - "**Outlined Ghost Button**: Transparent fill, viền #41a1cf 1px, radius 4px, padding 8px 16px. Text 'Learn more' trong #41a1cf, af 15px weight 500. Tùy chọn arrow icon trái/phải cùng màu. Nằm inline với body text hoặc bên dưới content block."

  similar_brands:

    - "**Stripe** — Cùng cách tiếp cận editorial design-forward với custom display serifs, warm off-white canvases, và một accent màu duy nhất được kiềm chế dùng cho links và emphasis"
    - "**Anthropic** — Restrained monochromatic palette với warm cream canvas, giọng văn học, và việc sử dụng accent màu tối thiểu nhưng có chủ đích"
    - "**Substack** — Reading-first editorial layout với serif headlines lớn, generous whitespace, và nhịp điệu giống ấn phẩm hơn là cấu trúc product-grid"
    - "**Vercel** — Floating pill navigation island, frosted glass overlays, và pattern dark-surface-floating-on-light-canvas"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hudson-blue: #0081c0;
          --color-slate-cyan: #41a1cf;
          --color-graphite-night: #282834;
          --color-ink: #171717;
          --color-carbon: #2c2c2c;
          --color-iron: #444141;
          --color-steel: #646464;
          --color-fog: #b4b8b4;
          --color-ash: #a5afaf;
          --color-mist: #cfd3cf;
          --color-sage: #dee2de;
          --color-cream: #fefffc;
          --color-linen: #f9faf7;
          --color-paper: #ffffff;
          --color-obsidian: #1f1f29;
        
          /* Typography — Font Families */
          --font-ppmondwest: 'ppmondwest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-af: 'af', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.156px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.18px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.96px;
          --text-display: 54px;
          --leading-display: 1.1;
          --tracking-display: -1.08px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 50.496px;
        
          /* Named Radii */
          --radius-nav: 50px;
          --radius-cards: 12px;
          --radius-buttons: 4px;
          --radius-herocards: 24px;
          --radius-elevatedcards: 16px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
          --shadow-subtle: rgb(222, 226, 222) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px;
          --shadow-sm-2: rgba(0, 0, 0, 0.05) 0px 1px 8px 0px;
        
          /* Surfaces */
          --surface-cream: #fefffc;
          --surface-linen: #f9faf7;
          --surface-paper: #ffffff;
          --surface-graphite-night: #282834;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hudson-blue: #0081c0;
          --color-slate-cyan: #41a1cf;
          --color-graphite-night: #282834;
          --color-ink: #171717;
          --color-carbon: #2c2c2c;
          --color-iron: #444141;
          --color-steel: #646464;
          --color-fog: #b4b8b4;
          --color-ash: #a5afaf;
          --color-mist: #cfd3cf;
          --color-sage: #dee2de;
          --color-cream: #fefffc;
          --color-linen: #f9faf7;
          --color-paper: #ffffff;
          --color-obsidian: #1f1f29;
        
          /* Typography */
          --font-ppmondwest: 'ppmondwest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-af: 'af', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.156px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.18px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.96px;
          --text-display: 54px;
          --leading-display: 1.1;
          --tracking-display: -1.08px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 50.496px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
          --shadow-subtle: rgb(222, 226, 222) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px;
          --shadow-sm-2: rgba(0, 0, 0, 0.05) 0px 1px 8px 0px;
        }