11x__digital_workers___style_reference:
  info: "> Cinematic editorial sa mạc — ảnh địa hình full-bleed kết hợp headline serif hoành tráng, trang web mang phong cách tạp chí xa xỉ."

  theme: "mixed"

  info: "11x.ai vận hành như một nền tảng editorial cinematic: ảnh phong cảnh full-bleed ấn tượng kết hợp với typography serif custom cỡ lớn, tạo cảm giác như một trang tạp chí xa xỉ được tái sử dụng cho enterprise software. Giao diện gần như hoàn toàn đơn sắc — đen trên nền trắng, trắng trên nền deep teal — màu sắc chỉ xuất hiện dưới dạng pastel nhạt, phai màu nắng trên các feature card (xanh bụi, bạc hà, oải hương, đào). Điểm nhấn lặp lại duy nhất trên các section tối là một màu slate-teal nhạt dùng cho feature tag pills. Các component được thiết kế tối giản có chủ đích: pill-shaped buttons với 999px radius, portrait card viền mềm, và status badge nhỏ — không gì cạnh tranh với nhiếp ảnh hay headline serif. Nhịp điệu luân phiên giữa các editorial spread trắng và các narrative band tối full-bleed, tạo cho toàn bộ site nhịp điệu của một chiến dịch in ấn thay vì một landing page SaaS điển hình."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary action buttons trên nền sáng, body text, headline, card borders — mực vạn năng của hệ thống |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas trên section sáng, card surfaces, text trên nền tối, button text trên filled buttons |"
    info: "| Deep Teal | `#0b252a` | `--color-deep-teal` | Nền section tối — bề mặt màu lớn duy nhất, dùng cho narrative bands giữa các editorial spread |"
    info: "| Bone | `#f6f5f5` | `--color-bone` | Card surfaces và hairline borders trên section sáng — màu trắng ấm ngăn sự lạnh lẽo |"
    info: "| Sandstone | `#f5ece5` | `--color-sandstone` | Tông màu card surface ấm, nền section ở vùng kem/đào — hơi ấm của sa mạc |"
    info: "| Ash Blush | `#ede2d7` | `--color-ash-blush` | Card surface ấm mềm, điểm nhấn đào thứ cấp trên portrait cards |"
    info: "| Stone | `#d7cecc` | `--color-stone` | Footer và section dividers trung tính nhạt — màu xám ấm trung tính làm nền |"
    info: "| Iron | `#e1dad9` | `--color-iron` | Button và link background tint, card surface cho outlined controls |"
    info: "| Pewter | `#afaeae` | `--color-pewter` | Disabled hoặc tertiary button fills, secondary surface fills |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Gần đen cho dark button fills trên nền sáng khi đen thuần quá gắt |"
    info: "| Dusty Sky | `#c5d5e8` | `--color-dusty-sky` | Pastel xanh nhạt — feature card background, decorative portrait card tint |"
    info: "| Mist Mint | `#d4e6eb` | `--color-mist-mint` | Pastel bạc hà-teal nhạt — feature card background variant |"
    info: "| Wisteria | `#efe5f9` | `--color-wisteria` | Pastel oải hương — feature card background variant |"
    info: "| Desert Clay | `#e7d3bf` | `--color-desert-clay` | Pastel đào/nâu ấm — feature card background variant, kết nối với bảng màu hero photography |"
    info: "| Slate Teal | `#406e7a` | `--color-slate-teal` | Xanh-teal nhạt cho feature tag pills trên section tối, badge backgrounds — phần tử UI màu lặp lại duy nhất |"
    info: "| Saddle Brown | `#4c312b` | `--color-saddle-brown` | Nâu ấm cho badge borders và accent text thỉnh thoảng — vọng lại nhiếp ảnh địa hình |"

  tokens___typography:

    es_allianz___typeface_chính_cho_mọi_ui_text___một_serif_didone_tương_phản_cao__dùng_ở_kích_thước_display_ấn_tượng_74_152px_cho_headline__và_ở_kích_thước_body_16_19px_cho_running_text__letter_spacing_chặt__0_045em_ở_display___0_02em_ở_body_siết_chặt_các_serif_vào_tư_thế_editorial_hiện_đại__weight_400_đảm_nhiệm_hầu_hết_copy__700_cho_hero_impact__500_cho_navigation_và_subheadings__serif_này_làm_tất_cả_công_việc_nặng_nhọc_mà_một_hệ_thống_sans_serif_thường_phân_bổ_cho_ba_họ_chữ_____font_es_allianz:
      - "**Thay thế:** GT Sectra, Editorial New, hoặc Tiempos Headline — bất kỳ serif hiện đại tương phản cao nào với tracking chặt. Miễn phí: Bodoni Moda hoặc Playfair Display với tracking đã siết."
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 8, 14, 16, 18, 19, 28, 32, 46, 56, 64, 74, 152"
      - "**Line height:** 0.85, 1.00, 1.10, 1.20, 1.40"
      - "**Letter spacing:** -0.045em ở 74–152px, -0.04em ở 46–64px, -0.02em ở 14–32px"
      - "**Vai trò:** Typeface chính cho mọi UI text — một serif didone tương phản cao, dùng ở kích thước display ấn tượng (74–152px) cho headline, và ở kích thước body (16–19px) cho running text. Letter-spacing chặt (-0.045em ở display, -0.02em ở body) siết chặt các serif vào tư thế editorial hiện đại. Weight 400 đảm nhiệm hầu hết copy; 700 cho hero impact; 500 cho navigation và subheadings. Serif này làm tất cả công việc nặng nhọc mà một hệ thống sans-serif thường phân bổ cho ba họ chữ."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.2 | -0.28px | `--text-caption` |"
      info: "| body-sm | 16px | 1.4 | -0.32px | `--text-body-sm` |"
      info: "| subheading | 19px | 1.2 | -0.38px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.2 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 46px | 1.1 | -1.84px | `--text-heading` |"
      info: "| heading-lg | 64px | 1.1 | -2.56px | `--text-heading-lg` |"
      info: "| display | 74px | 1 | -3.33px | `--text-display` |"
      info: "| display-xl | 152px | 0.85 | -6.84px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    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: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 136 | 136px | `--spacing-136` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| badges | 8px |"
      info: "| buttons | 999px |"
      info: "| smallBadges | 2px |"
      info: "| portraitCards | 32px |"

    layout:

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

  components:

    primary_pill_button_light:
      vai_trò: "Filled CTA trên nền trắng/sáng"

      info: "Nền đen (#000000), chữ trắng, border-radius 999px, padding 12px 24px, ES Allianz weight 500 ở 16px, letter-spacing -0.32px. Viền hairline trắng (1px) để phân định cạnh với ảnh."

    primary_pill_button_dark:
      vai_trò: "Filled CTA trên section deep teal"

      info: "Nền trắng (#ffffff), chữ đen, border-radius 999px, padding 12px 24px, ES Allianz weight 500 ở 16px. Dùng trên các narrative band màu #0b252a."

    navigation_bar:
      vai_trò: "Navigation cấp cao nhất của site"

      info: "Nền trắng (#ffffff), padding dọc 8px, bố cục ngang với logo trái, nav links giữa (ES Allianz 16px weight 500), CTA button phải. Nav text màu đen. Không drop shadow — nằm sát nội dung với 1px bottom hairline màu #e1dad9."

    announcement_bar:
      vai_trò: "Thanh thông báo trên cùng"

      info: "Nền đen (#000000), chữ trắng 14px ES Allianz weight 500, căn giữa, full-width, cao ~40px. Chứa thông báo ngắn kèm icon mũi tên liên kết đến chi tiết."

    hero_section_full_bleed:
      vai_trò: "Hero cinematic của landing page"

      info: "Nền ảnh full-bleed (ảnh địa hình/sa mạc với nhiệt độ màu ấm), không overlay, chữ trắng. Display headline 74–152px ES Allianz weight 700, trắng, letter-spacing -0.045em. Subheadline 18–19px weight 400, trắng, line-height 1.4. Pill CTA trắng bên dưới."

    portrait_worker_card:
      vai_trò: "Hồ sơ digital worker nổi bật"

      info: "Ảnh chân dung lớn phủ kín card, border-radius 32px, viền 1px nhẹ màu #e1dad9. Status badge chồng lên góc trên-trái: radius 8px, nền tối bán trong suốt, chữ trắng 14px. Card nằm trên canvas trắng với gap 24px giữa các card."

    status_badge:
      vai_trò: "Chỉ báo trạng thái worker trên card"

      info: "Hình pill, border-radius 8px, nhỏ (dưới 32px cao), nền trắng hoặc đen bán trong suốt, chữ 14px ES Allianz weight 500. Hiển thị tên worker và trạng thái (ví dụ 'Alice the SDR', 'Autopilot activated')."

    feature_tag_pill:
      vai_trò: "Tag năng lực nền tảng trên section tối"

      info: "Nền slate-teal nhạt (#406e7a), chữ trắng, border-radius 8px, padding 4px 12px, ES Allianz 14px weight 500. Sắp xếp theo hàng ngang dạng marquee/row. Phần tử UI màu lặp lại duy nhất trên site."

    section_card_pastel_variant:
      vai_trò: "Feature hoặc content card với nền màu nhạt"

      info: "Một trong bốn tông pastel — Dusty Sky (#c5d5e8), Mist Mint (#d4e6eb), Wisteria (#efe5f9), hoặc Desert Clay (#e7d3bf). Border-radius 16px, internal padding 24px, không shadow. Chữ đen ở 18px body hoặc 32–46px heading. Các pastel card này là điểm nhấn màu duy nhất trên section sáng."

    dark_narrative_band:
      vai_trò: "Section tối full-width giữa các editorial spread"

      info: "Nền deep teal (#0b252a), full-bleed, chữ trắng căn giữa. Display headline 46–74px, body text 18px, pill CTA trắng. Theo sau là một hàng feature tag pills slate-teal, sau đó là bề mặt card kem/đào (Bone #f6f5f5) ngắt vào section tiếp theo."

    chat_widget_ask_julian:
      vai_trò: "Điểm vào hội thoại nổi"

      info: "Cố định dưới-phải, hình pill, nền tối (#0b252a), avatar tròn nhỏ, chữ trắng 'Ask Julian' ở 14px ES Allianz weight 500. Cao ~48px, shadow nhẹ để tạo độ nổi."

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

      info: "Nền Stone (#d7cecc) hoặc trắng, lưới link đa cột, ES Allianz 14–16px, chữ đen. Logo và dòng pháp lý ở cuối."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng ES Allianz serif ở 74px+ weight 700 cho hero và section headlines — serif cỡ lớn là chữ ký thị giác chính của thương hiệu"
      - "Đặt pill buttons với border-radius chính xác 999px, padding 12px 24px, dạng đen-trên-trắng hoặc trắng-trên-đen"
      - "Dùng bốn tông pastel card (Dusty Sky, Mist Mint, Wisteria, Desert Clay) làm điểm nhấn màu duy nhất trên section sáng — không bao giờ thêm màu UI mới"
      - "Luân phiên giữa editorial spread trắng và band deep teal (#0b252a) full-bleed để duy trì nhịp điệu magazine-spread"
      - "Dùng ảnh phong cảnh full-bleed làm nền section — ảnh phải có tông ấm, cinematic, độ phân giải cao"
      - "Đặt letter-spacing ở -0.045em cho kích thước display (74px+) và -0.02em cho kích thước body để có tư thế editorial hiện đại"
      - "Dùng feature tag pills Slate Teal (#406e7a) độc quyền trên section Deep Teal tối — không bao giờ dùng trên nền sáng"

    không_nên_làm:
      - "Không dùng sans-serif typeface ở bất kỳ đâu — serif là bắt buộc và định hình bản sắc editorial"
      - "Không dùng xanh dương, đỏ, xanh lá, hoặc vàng làm màu UI chức năng — bảng màu giới hạn ở neutrals, deep teal, và bốn pastel nhạt"
      - "Không thêm drop shadow vào card hoặc button — độ cao được thể hiện qua tương phản tông màu và viền hairline 1px"
      - "Không dùng góc nhọn (dưới 8px radius) trên interactive elements — pills, card bo tròn, và bán kính mềm là chuẩn mực"
      - "Không căn giữa đoạn body text dài hơn hai dòng — căn trái running text để dễ đọc editorial"
      - "Không thêm gradient vào UI components — gradient duy nhất là hiệu ứng phai ấm nhẹ (#f8f9f7 → #d7cecd) dùng tối thiểu"
      - "Không xếp chồng nhiều hơn một pastel card tint cạnh nhau — xen kẽ pastel card với khoảng trắng để giữ cảm giác thoáng"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas chính trên section editorial sáng |"
    info: "| 1 | Bone | `#f6f5f5` | Card surfaces, panel trắng ấm trên section kem |"
    info: "| 2 | Sandstone | `#f5ece5` | Card tint ấm cho khu vực feature đào/kem |"
    info: "| 3 | Pastel Card | `#efe5f9` | Bề mặt card màu (các biến thể oải hương/xanh/bạc hà/đào) |"
    info: "| 4 | Deep Teal | `#0b252a` | Nền narrative band tối — bề mặt tương phản cao nhất |"

  elevation:

    info: "Design system cố tình tránh drop shadow như một phương tiện tạo độ cao. Phân cấp và tách biệt đạt được qua tương phản tông màu (card trắng trên canvas trắng chỉ phân biệt bằng viền hairline 1px #e1dad9), band tối full-bleed tạo ngắt section tự nhiên, và xếp lớp các neutral ấm. Floating chat widget là phần tử duy nhất dùng shadow, và ngay cả khi đó cũng rất tối thiểu. Cách tiếp cận không shadow này củng cố thẩm mỹ phẳng, editorial, in ấn-tạp chí."

  imagery:

    info: "Ảnh phong cảnh full-bleed là ngôn ngữ thị giác chính — ảnh địa hình cinematic tông ấm (khối đá sa mạc, kết cấu địa chất) làm nền hero và section. Ảnh chân dung xuất hiện trong các card có viền với border-radius 32px, crop sát mặt và vai, ánh sáng tự nhiên, hiệu chỉnh màu ấm. Nhiếp ảnh luôn mang phong cách editorial: không overlay, không hiệu ứng duotone, không hiệu chỉnh màu nhân tạo. Minh họa trang trí không có. Nhiếp ảnh chiếm 50–70% viewport trong hero và dark-band sections, sau đó thu hẹp xuống 40–50% chiều rộng trong bố cục card. Icon không xuất hiện trong design system hiển thị — navigation và giao tiếp trạng thái dựa vào typography và nhãn text nhỏ."

  layout:

    info: "Trang theo mô hình tạp chí editorial: hero full-bleed ấn tượng với text overlay căn giữa, tiếp theo là content section trắng với heading căn giữa và card grid 2 cột, sau đó là dark narrative band Deep Teal, rồi các feature section kem và trắng xen kẽ. Max content width khoảng 1200px, căn giữa. Hero sections tràn ra toàn bộ viewport width. Card grids dùng bố cục 2 cột cho feature highlights và worker profiles. Nhịp dọc rộng rãi (section gaps 48–80px) mặc dù base spacing unit compact, cho mỗi section không gian thở như một trang tạp chí. Nav là thanh trắng cố định trên cùng; không sidebar. Floating chat widget neo góc dưới-phải trên mọi section."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Text: #000000"
    - "Background: #ffffff"
    - "Dark section background: #0b252a"
    - "Border: #e1dad9 (hairline) / #f6f5f5 (mềm)"
    - "Accent pastels: #c5d5e8, #d4e6eb, #efe5f9, #e7d3bf"
    - "primary action: #000000 (filled action)"

    3_5_ví_dụ_component_prompts:

    - "Tạo Primary Action Button: nền #000000, chữ #ffffff, radius 9999px, padding pill compact. Dùng dạng filled này cho CTA chính."

    - "**Pastel Feature Card**: nền Dusty Sky (#c5d5e8) hoặc Wisteria (#efe5f9), border-radius 16px, padding 24px. Heading 32px ES Allianz weight 700, đen, letter-spacing -0.64px. Body 18px weight 400, đen. Không shadow, không border."

    - "**Worker Portrait Card**: border-radius 32px, ảnh chân dung full-bleed (tông ấm, crop sát mặt), border 1px màu #e1dad9. Status badge chồng lên góc trên-trái: nền đen bán trong suốt, radius 8px, chữ trắng 14px ES Allianz weight 500."

    - "**Navigation Bar**: nền trắng (#ffffff), full-width, padding dọc 8px. Logo trái ('11x' bằng ES Allianz weight 700, 24px). Nav links giữa bằng ES Allianz 16px weight 500, đen. Pill CTA đen phải: nền #000000, chữ trắng, radius 999px, padding 12px 24px."

  typography_philosophy:

    info: "ES Allianz là một serif didone tương phản cao. Vai trò đặc trưng của nó ở kích thước 74–152px tạo cảm giác bìa tạp chí mà không hệ thống sans-serif nào có thể sao chép. Letter-spacing chặt (-0.045em ở display) nén các serif vào tư thế editorial hiện đại thay vì typeface sách truyền thống. Line-heights cực kỳ chặt ở kích thước display (0.85–1.0) cho phép headline xếp chồng thành các khối hoành tráng, sau đó mở ra ở 1.2–1.4 ở kích thước body. Tỷ lệ nén-rồi-mở này là nhịp điệu đặc trưng: hoành tráng ở trên, thoáng đãng ở body. Serif được dùng cho mọi thứ — không có sans-serif companion. Điều này bất thường và có chủ đích: site từ chối sự phân chia serif-headline + sans-body điển hình để ủng hộ một giọng nói editorial thống nhất."

  similar_brands:

    - "**Linear** — Cùng cách tiếp cận pill-button + đơn sắc-với-một-điểm-nhấn, dù Linear dùng sans-serif — 11x.ai đưa chủ nghĩa tối giản đó vào lãnh thổ serif editorial"
    - "**Clay** — Cả hai dùng ảnh full-bleed làm nền section với headline serif/sans căn giữa và pill CTAs, nhắm đến đối tượng AI cao cấp với nhịp điệu magazine-spread"
    - "**Arc Browser** — Cả hai từ chối thẩm mỹ SaaS điển hình để chọn editorial design — display type cỡ lớn, neutral ấm, và ảnh full-bleed ấn tượng thay vì flat UI"
    - "**Runway** — Hero section tối với ảnh ấn tượng, editorial type cỡ lớn, và sự kiềm chế màu sắc tương tự — để tác phẩm lên tiếng qua bầu không khí thay vì chromatic UI"
    - "**Stripe (editorial sections)** — Cùng hệ thống card không gradient, viền hairline, và nhịp điệu band trắng/tối xen kẽ, dù 11x.ai đẩy xa hơn vào serif và ảnh full-bleed"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-deep-teal: #0b252a;
          --color-bone: #f6f5f5;
          --color-sandstone: #f5ece5;
          --color-ash-blush: #ede2d7;
          --color-stone: #d7cecc;
          --color-iron: #e1dad9;
          --color-pewter: #afaeae;
          --color-charcoal: #222222;
          --color-dusty-sky: #c5d5e8;
          --color-mist-mint: #d4e6eb;
          --color-wisteria: #efe5f9;
          --color-desert-clay: #e7d3bf;
          --color-slate-teal: #406e7a;
          --color-saddle-brown: #4c312b;
        
          /* Typography — Font Families */
          --font-es-allianz: 'ES Allianz', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: -0.28px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.32px;
          --text-subheading: 19px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.38px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.56px;
          --text-heading: 46px;
          --leading-heading: 1.1;
          --tracking-heading: -1.84px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.56px;
          --text-display: 74px;
          --leading-display: 1;
          --tracking-display: -3.33px;
          --text-display-xl: 152px;
          --leading-display-xl: 0.85;
          --tracking-display-xl: -6.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --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-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-136: 136px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-80px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
          --radius-full-3: 16000px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 8px;
          --radius-buttons: 999px;
          --radius-smallbadges: 2px;
          --radius-portraitcards: 32px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-bone: #f6f5f5;
          --surface-sandstone: #f5ece5;
          --surface-pastel-card: #efe5f9;
          --surface-deep-teal: #0b252a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-deep-teal: #0b252a;
          --color-bone: #f6f5f5;
          --color-sandstone: #f5ece5;
          --color-ash-blush: #ede2d7;
          --color-stone: #d7cecc;
          --color-iron: #e1dad9;
          --color-pewter: #afaeae;
          --color-charcoal: #222222;
          --color-dusty-sky: #c5d5e8;
          --color-mist-mint: #d4e6eb;
          --color-wisteria: #efe5f9;
          --color-desert-clay: #e7d3bf;
          --color-slate-teal: #406e7a;
          --color-saddle-brown: #4c312b;
        
          /* Typography */
          --font-es-allianz: 'ES Allianz', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --tracking-caption: -0.28px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.32px;
          --text-subheading: 19px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.38px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.56px;
          --text-heading: 46px;
          --leading-heading: 1.1;
          --tracking-heading: -1.84px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.56px;
          --text-display: 74px;
          --leading-display: 1;
          --tracking-display: -3.33px;
          --text-display-xl: 152px;
          --leading-display-xl: 0.85;
          --tracking-display-xl: -6.84px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-136: 136px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
          --radius-full-3: 16000px;
        }