dialog___style_reference:
  info: "> Neutral showroom with one warm price tag. Every surface is a different tone of off-white; the orange CTA is the only color in the room."

  theme: "light"

  info: "Dialog feels like a high-end retail floor plan rendered in digital form — neutral, airy, and unhurried, with one warm accent that acts like a price tag sticker on white linen. The #f7f7f7 near-white background and pure white cards create a surface hierarchy so subtle it reads as continuous space rather than layered depth. PP Radio Grotesk Light at 50-70px is the defining move: a geometric grotesque rendered at its lightest weight makes large headlines feel handwritten on paper rather than stamped — zero aggression, maximum presence. The single orange #f69251 appears exclusively on CTAs, pulling attention the way a sale tag pops in a neutral showroom. Pill-shaped buttons (28px radius) float against square-cornered containers, the only soft shape in an otherwise rectilinear system."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Tangerine Tag | `#f69251` | `--color-tangerine-tag` | Primary CTA buttons, 'Book a demo' pill — warm orange against near-white backgrounds signals action without urgency, echoing the palette of premium retail labels |"
    info: "| Midnight Ink | `#181825` | `--color-midnight-ink` | Body text, borders — near-black with a barely perceptible blue undertone, softer than pure black for long-form reading |"
    info: "| Graphite | `#484758` | `--color-graphite` | Secondary body text, descriptive copy, meta information |"
    info: "| Deep Slate | `#242433` | `--color-deep-slate` | Dark surface backgrounds, card overlays in dark sections |"
    info: "| Carbon | `#000000` | `--color-carbon` | Headings, icon fills, primary text — used at full weight for maximum legibility |"
    info: "| Stone | `#636363` | `--color-stone` | Supporting body text, nav labels, secondary labels |"
    info: "| Pebble | `#949494` | `--color-pebble` | Placeholder text, muted links, disabled states |"
    info: "| Ash | `#8b8b8b` | `--color-ash` | Tertiary text, icon strokes, faint borders |"
    info: "| Fog | `#f7f7f7` | `--color-fog` | Page background, section fills — the dominant surface of the entire site |"
    info: "| Snow | `#ffffff` | `--color-snow` | Card surfaces, nav background, button fill for ghost variant |"
    info: "| Peach Whisper | `linear-gradient(rgba(255, 219, 184, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%)` | `--color-peach-whisper` | Decorative SVG fills, illustration accent highlights |"
    info: "| Dusty Rose | `#c97b84` | `--color-dusty-rose` | Semantic accent — appears in hover or highlight states on certain interactive elements |"

  tokens___typography:

    pp_radio_grotesk_light___all_hero_and_section_headings__weight_400_in_this_geometric_grotesque_renders_visually_as__light____at_70px_the_type_feels_pencil_drawn_rather_than_set__giving_large_format_headlines_an_editorial_quality_no_system_font_can_replicate__the_signature_typographic_move_of_this_site_____font_pp_radio_grotesk_light:
      - "**Substitute:** Satoshi Light, DM Sans Light"
      - "**Weights:** 400"
      - "**Sizes:** 32px, 39px, 50px, 70px"
      - "**Line height:** 1.15–1.30"
      - "**Letter spacing:** -0.01em (approx -0.5px at 50px, -0.7px at 70px)"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** All hero and section headings. Weight 400 in this geometric grotesque renders visually as 'light' — at 70px the type feels pencil-drawn rather than set, giving large-format headlines an editorial quality no system font can replicate. The signature typographic move of this site."

    inter___navigation_labels__body_copy__input_fields__ui_labels__subheadings__weight_400_for_body__500_for_nav_links_and_emphasis__the_negative_letter_spacing_is_tighter_than_inter_s_default__compressing_the_text_block_slightly_without_feeling_cramped_____font_inter:
      - "**Substitute:** Inter (already Google-available)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 24px"
      - "**Line height:** 1.20–1.70"
      - "**Letter spacing:** -0.02em at small sizes, -0.01em at mid sizes"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\"`"
      - "**Role:** Navigation labels, body copy, input fields, UI labels, subheadings. Weight 400 for body, 500 for nav links and emphasis. The negative letter-spacing is tighter than Inter's default, compressing the text block slightly without feeling cramped."

    inter_variable___tightly_set_inline_body_snippets__single_line_descriptors__line_height_1_00_means_no_leading___used_for_compact_label_style_text_only_____font_inter_variable:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.01em"
      - "**OpenType features:** `\"cv01\", \"cv05\", \"cv09\", \"cv11\"`"
      - "**Role:** Tightly set inline body snippets, single-line descriptors. Line-height 1.00 means no leading — used for compact label-style text only."

    inter_display___occasional_heading_contexts_at_small_display_sizes__card_titles_in_feature_sections_____font_inter_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.43"
      - "**Letter spacing:** normal"
      - "**Role:** Occasional heading contexts at small display sizes, card titles in feature sections."

    sans_serif_system_fallback___icon_labels__tooltip_text__browser_level_ui_elements___not_a_designed_choice_____font_sans_serif_system_fallback:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Icon labels, tooltip text, browser-level UI elements — not a designed choice."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.3 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 50px | 1.2 | -0.5px | `--text-heading-lg` |"
      info: "| display | 70px | 1.15 | -0.7px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | 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: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| small | 8px |"
      info: "| badges | 100px |"
      info: "| inputs | 0px |"
      info: "| buttons | 28px |"
      info: "| overlays | 32px |"
      info: "| cardInner | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(24, 24, 37, 0.12) 0px 2px 3px -2px` | `--shadow-subtle` |"
      info: "| xl | `rgba(247, 247, 247, 0.5) 0px -40px 40px 0px` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    primary_cta_button_orange_pill:
      role: "Hero and nav primary action — 'Book a demo'"

      info: "Background #f69251, text #000000, border-radius 28px, padding 12px 24px. The fully pill-shaped silhouette at 28px radius is the only rounded element class in an otherwise angular layout. Subtle layered shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.02) 0px 2px 4px, rgba(0,0,0,0.02) 0px 4px 8px. Font: Inter 14-16px weight 500."

    ghost_cta_button_white_pill:
      role: "Secondary actions on dark or image-backed surfaces"

      info: "Background #ffffff, text #000000, border-radius 28px, padding 12px 24px. Same pill shape as primary, but inverted to white fill — reads as outline-adjacent without an explicit border. Used where orange would clash with background."

    email_input___cta_inline_form:
      role: "Hero email capture row"

      input_field: "transparent background, border-radius 0px, no padding — appears as a bare underline or bordered rectangle. Paired inline with the orange pill button. Input text #000000, placeholder color #949494 (Pebble). The zero-radius input contrasts sharply with the 28px pill button beside it, creating a deliberate tension between form and function."

    testimonial_card:
      role: "Social proof in scrolling testimonials section"

      info: "White (#ffffff) card surface, border-radius 24px, padding 24px. Quote text in Inter 14-16px #181825. Author name in Inter 500 ~14px, role/handle in #636363 Inter 400 12-13px. Avatar image displayed at small size (32-40px) with circular crop. No border — card lifts via box-shadow rgba(24,24,37,0.12) 0px 2px 3px -2px. Placed in a horizontal scroll carousel."

    product_screenshot_browser_frame:
      role: "Product tour / hero UI illustration"

      info: "White (#ffffff) card at border-radius 24px with decorative browser chrome: three colored dots (red #c97b84, yellow, green) in top-left at 12px circles. Interior filled with skeleton placeholder blocks at #f7f7f7 and #b2b2b2. Card uses rgba(247,247,247,0.5) 0px -40px 40px 0px shadow at bottom edge — a fade-up vignette that blends the mockup into the page background."

    navigation_bar:
      role: "Global top navigation"

      info: "White (#ffffff) background, height ~64px, max-width contained. Logo (Dialog wordmark with arrow icon) left-aligned. Links in Inter 400 14px #636363, spacing 6-8px gaps. 'Book a demo' orange pill button right-aligned. Border-radius 32px on the nav container when scrolled (floating pill nav pattern). No visible bottom border — separates from page via background contrast."

    feature_badge___pill_label:
      role: "Category tags, section labels like 'AI product recommender'"

      info: "Border-radius 100px, background white or #f7f7f7, padding 4-8px 12px. Text Inter 500 12-13px #484758. No colored background — neutral pill that organizes content without adding chroma."

    section_heading_block:
      role: "Main headline + supporting subtext for each content section"

      headline: "PP Radio Grotesk Light 50px, letter-spacing -0.01em, color #000000, line-height 1.20. Subtext: Inter 400 16-18px #636363, line-height 1.50. Vertically stacked, center-aligned in hero, left-aligned in feature sections. Gap between headline and subtext: 12-16px."

    star_rating_row:
      role: "Social proof trust indicators below hero CTA"

      info: "Inline row of icon + 5-star glyphs in #f69251 orange. Icon badge (Shopify/G2 logo) at 20px followed by five ★ characters. Text Inter 400 12px #636363. Two rating rows displayed side-by-side with 16-24px gap. Acts as micro-credibility anchor beneath the email capture form."

  do_s_and_don_ts:

    do:
      - "Use PP Radio Grotesk Light (weight 400) exclusively for headings at 32px+; never substitute Inter for headlines at large sizes"
      - "Apply #f69251 only to primary CTA buttons — never to text, icons, decorative shapes, or backgrounds"
      - "Set all buttons to border-radius 28px (pill shape) regardless of button width; this is the only rounded UI element in the system"
      - "Maintain #f7f7f7 as the page background and #ffffff for all card surfaces — the 2-tone near-white surface system defines the visual plane"
      - "Use Inter at -0.01em to -0.02em letter-spacing for body and nav text — never at default or positive tracking"
      - "Set card shadows to rgba(24,24,37,0.12) 0px 2px 3px -2px — single low-offset shadow, never stacked high-elevation shadows"
      - "Give testimonial and feature cards border-radius 24px with 24px internal padding — do not use smaller radii for large containers"

    don_t:
      - "Do not use #f69251 for more than one element category (CTAs only) — introducing orange to icons, text, or decoration breaks the single-accent discipline"
      - "Do not apply border-radius less than 24px to card containers — 8px or 12px radii belong to inner UI chips, not layout-level cards"
      - "Do not use bold or heavy weights (600+) with PP Radio Grotesk — the light grotesque loses its identity at high weight"
      - "Do not introduce colored section backgrounds (blue, green, purple bands) — section variation comes from #f7f7f7 vs #ffffff swaps only"
      - "Do not use drop shadows larger than 8px blur or opacity above 0.12 — the elevation system is deliberately flush with the page plane"
      - "Do not crop or bleed photography to page edges on interior pages — photography lives inside 24px-radius card containers only"
      - "Do not set input fields to a rounded border-radius — inputs use 0px or minimal radius to contrast with the pill button system"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f7f7f7` | Full-bleed page background — the base of the entire composition |"
    info: "| 1 | Card Surface | `#ffffff` | Testimonial cards, feature cards, browser mockup frames |"
    info: "| 2 | Dark Card | `#242433` | Feature section dark-mode panels, contrast sections |"

  elevation:

    info: "Shadows are used at near-invisible intensity — rgba(24,24,37,0.12) at 2px blur and rgba(0,0,0,0.04) layered micro-shadows on buttons. The effect is less about lifting surfaces and more about defining their edges against the #f7f7f7 background. Cards do not compete for vertical attention; they sit in the plane. The rgba(247,247,247,0.5) 0px -40px 40px fade on the browser mockup is the most dramatic shadow on the page, and it fades INTO the background color — erasing depth rather than creating it."

  imagery:

    info: "Two modes of imagery coexist. Product screenshots are rendered as browser-chrome wireframe mockups on white card surfaces — functional and diagrammatic, showing the AI chat interface UI rather than lifestyle. Customer testimonials in the second section use editorial photography: close-cropped product still life (perfume bottle, textured surface) and brand identity shots (Delsey luggage, car dashboard detail). These are contained within 24px-radius cards in a horizontal carousel, with no full-bleed photography on the main page. Photography is warm-toned and moody — shot in ambient/low light, desaturated with brown or bronze casts. The contrast between the clinical wireframe mockups and the warm editorial photos is deliberate: product as system, proof as atmosphere."

  layout:

    info: "Max-width ~1200px centered on a #f7f7f7 full-bleed background. Hero is a center-stack layout: headline in PP Radio Grotesk at 70px, subtext, then inline email+CTA form, then trust-badge row — all vertically centered with generous whitespace (~120px top padding). The browser mockup floats below, cropped at the bottom viewport edge to hint at scrollable content. Below: alternating content sections using left-aligned headline + body text paired with right-side UI mockups (2-column). Testimonial section breaks the grid into a horizontal scroll carousel with 3-column partial cards visible. Navigation is a floating white pill (border-radius 32px) that appears contained within a header band — minimal, no mega-menu, no sidebar."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background: #f7f7f7"
    - "Card surface: #ffffff"
    - "Primary text / headings: #000000"
    - "Body / secondary text: #636363"
    - "CTA button fill: #f69251"
    - "CTA button text: #000000"
    - "Border / subtle divider: #b2b2b2"
    - "Muted / placeholder text: #949494"

    example_component_prompts:

    - "**Hero Section**: #f7f7f7 background, full-width centered layout. Headline 'The AI shopping agent that boosts your sales' in PP Radio Grotesk Light 70px, color #000000, letter-spacing -0.70px, line-height 1.15. Subtext 'Guide shoppers in real time, like you would in store.' in Inter 400 18px, color #636363, line-height 1.50. Below: inline row with a bare text input (transparent bg, 0px radius, border-bottom 1px #000) and an orange pill button (#f69251 fill, #000 text, 28px radius, 12px 24px padding, Inter 500 14px). Below that: two star-rating badge rows in #f69251 stars, Inter 400 12px #636363."

    - "**Testimonial Card**: White (#ffffff) card, border-radius 24px, padding 24px, shadow rgba(24,24,37,0.12) 0px 2px 3px -2px. Quote in Inter 400 14px #181825, line-height 1.50. Author row: circular avatar 36px, name in Inter 500 14px #000, handle in Inter 400 12px #636363, gap 8px."

    - "**Navigation Bar**: White #ffffff pill container, border-radius 32px. Logo left. Nav links in Inter 400 14px #636363 with 6px column gap. 'Book a demo' orange pill button right (#f69251, #000 text, 28px radius, 12px 24px padding)."

    - "**Feature Section**: #f7f7f7 background, 2-column layout: left = section label pill (100px radius, #f7f7f7 bg, Inter 500 12px #484758) + heading in PP Radio Grotesk Light 50px #000 + body Inter 400 16px #636363; right = white card (24px radius) containing UI screenshot or product mockup."

    - "**Browser Mockup Frame**: White card, border-radius 24px, shadow rgba(247,247,247,0.5) 0px -40px 40px 0px at bottom edge. Top-left: three dots at 10px circle (colors: #c97b84, #f69251, #8b8b8b). Interior: skeleton blocks at #f7f7f7 and #b2b2b2 varying widths, row-gap 8px."

  similar_brands:

    - "**Intercom** — Neutral off-white backgrounds, single warm-brand CTA color, testimonial carousel pattern, Inter-based body type"
    - "**Typeform** — Geometric grotesque display type at light weight for hero headlines, orange-family accent color on pill buttons"
    - "**Gorgias** — AI/e-commerce SaaS with editorial product photography mixed with UI mockup screenshots, near-identical testimonial card layout"
    - "**Klaviyo** — Same pill-nav-bar pattern floating above #f7f7f7 backgrounds, Inter body text with tight letter-spacing"
    - "**Rebuy Commerce** — Shopify-native AI commerce tool with warm accent buttons, light muted surfaces, and wireframe-style product preview mockups"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-tangerine-tag: #f69251;
          --color-midnight-ink: #181825;
          --color-graphite: #484758;
          --color-deep-slate: #242433;
          --color-carbon: #000000;
          --color-stone: #636363;
          --color-pebble: #949494;
          --color-ash: #8b8b8b;
          --color-fog: #f7f7f7;
          --color-snow: #ffffff;
          --color-peach-whisper: #fad7c1;
          --gradient-peach-whisper: linear-gradient(rgba(255, 219, 184, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
          --color-dusty-rose: #c97b84;
        
          /* Typography — Font Families */
          --font-pp-radio-grotesk-light: 'PP Radio Grotesk Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif-system-fallback: 'sans-serif (system fallback)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.5px;
          --text-display: 70px;
          --leading-display: 1.15;
          --tracking-display: -0.7px;
        
          /* 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-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-small: 8px;
          --radius-badges: 100px;
          --radius-inputs: 0px;
          --radius-buttons: 28px;
          --radius-overlays: 32px;
          --radius-cardinner: 12px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 24, 37, 0.12) 0px 2px 3px -2px;
          --shadow-xl: rgba(247, 247, 247, 0.5) 0px -40px 40px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f7f7f7;
          --surface-card-surface: #ffffff;
          --surface-dark-card: #242433;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-tangerine-tag: #f69251;
          --color-midnight-ink: #181825;
          --color-graphite: #484758;
          --color-deep-slate: #242433;
          --color-carbon: #000000;
          --color-stone: #636363;
          --color-pebble: #949494;
          --color-ash: #8b8b8b;
          --color-fog: #f7f7f7;
          --color-snow: #ffffff;
          --color-peach-whisper: #fad7c1;
          --color-dusty-rose: #c97b84;
        
          /* Typography */
          --font-pp-radio-grotesk-light: 'PP Radio Grotesk Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif-system-fallback: 'sans-serif (system fallback)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.5px;
          --text-display: 70px;
          --leading-display: 1.15;
          --tracking-display: -0.7px;
        
          /* 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-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 24, 37, 0.12) 0px 2px 3px -2px;
          --shadow-xl: rgba(247, 247, 247, 0.5) 0px -40px 40px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px;
        }