viture___style_reference:
  info: "> neon product stage behind midnight glass — a blacked-out showroom where one orange beam cuts through the dark to illuminate a pair of glasses on a pedestal."

  theme: "mixed"

  info: "VITURE projects a premium consumer-electronics showroom: near-black canvases, photographic product stages lit with neon rim-lighting, and one searing orange accent (#ff5f34) that acts as the brand's heartbeat across links, emphasis text, and filled CTAs. The interface is intentionally restrained — a single custom geometric sans-serif (FontSeasonSans) carries the entire typographic voice, from 12px captions to 340px hero numerals, with positive letter-spacing that widens as type grows, giving display text an airy, almost holographic openness. Surfaces are flat and confident: pure white and pale grays for content cards, deep #0c0c0c for product showcases, and pill-shaped controls (9999px radius) that feel tactile and modern. Rounded cards (28px) and full-bleed gradient washes (orange-to-purple, blue-to-cyan) inject the futuristic XR energy without cluttering the UI."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| VITURE Ember | `#ff5f34` | `--color-viture-ember` | Brand accent, filled CTA buttons, active links, emphasis text, input focus — searing orange against matte black creates urgency and ownership of the brand voice |"
    info: "| Crimson Core | `linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%)` | `--color-crimson-core` | Gradient midpoint for orange-red text washes and accent streaks |"
    info: "| Aurora Wash | `linear-gradient(to right, #ff2900 0%, #fe7a60 61%, #581dff 100%)` | `--color-aurora-wash` | Gradient transition color in premium orange-to-violet washes (product banners, hero overlays) |"
    info: "| Ultra Violet | `#581dff` | `--color-ultra-violet` | Gradient terminus for the orange-to-violet premium wash — appears only inside multi-stop gradients, not as a standalone token |"
    info: "| Signal Blue | `linear-gradient(94deg, #1271ff 1.4%, #97dcff 80.11%, #e5f6ff 123.55%)` | `--color-signal-blue` | Gradient start for the cool-tech blue wash (secondary callouts, tech-feature banners) |"
    info: "| Obsidian | `#0c0c0c` | `--color-obsidian` | Primary text, dark-section canvas, product showcase background, footer, solid black CTA variant — the structural near-black that frames every screen |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Light-section canvas, card surface, input background, inverse text on dark surfaces, modal surface |"
    info: "| Ash | `#7e7e7f` | `--color-ash` | Body secondary text, helper text, placeholder copy, muted borders |"
    info: "| Slate | `#5b5c5d` | `--color-slate` | Tertiary text, disabled labels, subdued metadata |"
    info: "| Pewter | `#abacae` | `--color-pewter` | Hairline dividers, subtle borders, low-emphasis icon strokes |"
    info: "| Fog | `#949597` | `--color-fog` | Disabled button background, muted UI chrome, neutral placeholder fill |"
    info: "| Snow | `#f7f7f8` | `--color-snow` | Elevated card surface, subtle panel background, light section variation |"
    info: "| Mist | `#eff0f3` | `--color-mist` | Inset card surface, nested panel background, alternating row tint |"
    info: "| Void | `#000000` | `--color-void` | Deepest dark sections, modal overlay scrim, true-black accents |"

  tokens___typography:

    fontseasonsans___sole_typeface_across_every_ui_surface___nav__body__headings__display_numerals__the_340px_size_is_a_brand_signature__oversized_hero_statistics_and_product_superlatives_rendered_as_visual_anchors__weights_step_from_400_body_to_800_display__but_display_text_rarely_exceeds_700_because_the_massive_size_does_the_heavy_lifting__positive_letter_spacing_0_012_0_050em_widens_as_type_grows___the_opposite_of_the_negative_tracking_trend__giving_display_copy_an_open__holographic__almost_broadcast_poster_feel_appropriate_to_the_xr_hardware_category_____font_fontseasonsans:
      - "**Substitute:** Inter, Satoshi, General Sans"
      - "**Weights:** 400, 500, 600, 700, 800"
      - "**Sizes:** 12, 14, 16, 20, 23, 28, 32, 60, 72, 105, 340"
      - "**Line height:** 1.00–1.63 (tight 1.00–1.25 for display, relaxed 1.38–1.63 for body)"
      - "**Letter spacing:** 0.0120em, 0.0200em, 0.0260em, 0.0500em"
      - "**Role:** Sole typeface across every UI surface — nav, body, headings, display numerals. The 340px size is a brand signature: oversized hero statistics and product superlatives rendered as visual anchors. Weights step from 400 body to 800 display, but display text rarely exceeds 700 because the massive size does the heavy lifting. Positive letter-spacing (0.012–0.050em) widens as type grows — the opposite of the negative-tracking trend, giving display copy an open, holographic, almost broadcast-poster feel appropriate to the XR hardware category."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.14px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.17px | `--text-body-sm` |"
      info: "| body | 16px | 1.63 | 0.19px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | 0.4px | `--text-subheading` |"
      info: "| heading-sm | 23px | 1.38 | 0.46px | `--text-heading-sm` |"
      info: "| heading-lg | 32px | 1.33 | 0.83px | `--text-heading-lg` |"
      info: "| display | 60px | 1.2 | 1.56px | `--text-display` |"
      info: "| display-lg | 72px | 1.2 | 3.6px | `--text-display-lg` |"
      info: "| hero | 105px | 1 | 5.25px | `--text-hero` |"
      info: "| mega | 340px | 1 | 17px | `--text-mega` |"

  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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 28px |"
      info: "| badges | 9999px |"
      info: "| images | 28px |"
      info: "| inputs | 16px |"
      info: "| buttons | 9999px |"
      info: "| hero-pill | 120px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"

    layout:

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

  components:

    pill_cta_button_filled___orange:
      role: "Primary action across the site"

      info: "9999px radius pill, background #ff5f34, text #ffffff, FontSeasonSans 500–600 at 16px, padding 22px vertical × 24px horizontal. Hovers darken toward #f31010 or add a subtle inner glow. Used for 'Buy Now', 'Add to Cart', 'Claim Offer' in the brand voice."

    pill_cta_button_filled___black:
      role: "Alternate solid CTA on light surfaces and inside modals"

      info: "9999px radius pill, background #0c0c0c, text #ffffff, FontSeasonSans 600 at 16px, padding 22px × 24px. Appears in the subscribe modal as 'Claim 10% OFF Now'. Carries a single soft shadow: rgba(0,0,0,0.1) 0 4px 6px -1px, rgba(0,0,0,0.1) 0 2px 4px -2px."

    ghost___outlined_button:
      role: "Secondary action"

      info: "9999px radius pill, 1px border #0c0c0c or #ffffff depending on surface, transparent background, text in matching color, 16px FontSeasonSans 500. Used for 'Learn More', 'Cancel', and tertiary actions."

    email_input_field:
      role: "Newsletter capture, account email, contact form"

      info: "16px border radius, 1px border #e5e5e5 (derived from Pewter), background #ffffff, padding 16px vertical × 24px horizontal. Placeholder text in #7e7e7f at 16px. Focus state shifts border to #ff5f34 with a 2px outer ring at rgba(255,95,52,0.2). A small envelope icon sits flush-right in #7e7e7f."

    product_hero_card:
      role: "Showcase a single VITURE device or product family"

      info: "28px border radius, background #0c0c0c or gradient-wash image, full-bleed product photography with neon rim-lighting. Internal padding 44px. Caption and product name sit at 14–20px FontSeasonSans 500 in #ffffff overlaid on the dark surface."

    feature___spec_card:
      role: "Highlight a product feature, spec, or benefit"

      info: "28px border radius, background #f7f7f8 or #ffffff with 1px border #eff0f3. Padding 28px. Icon at 24px in #0c0c0c sits above a 20px FontSeasonSans 600 heading and 14px #7e7e7f body copy. No drop shadow — surface differentiation is flat and modern."

    subscribe___newsletter_modal:
      role: "Email capture overlay"

      max_width_720px__split_pane_layout: "left half #ffffff with form, right half dark product image or gradient wash. Overall 16–24px radius (no pill). Close X in top-right at 16px FontSeasonSans 500 #0c0c0c. Carousel dots in the bottom-right of the image half at 8px circles, active = #ff5f34, inactive = rgba(255,255,255,0.4)."

    cookie_consent_bar:
      role: "GDPR / cookie notice pinned to viewport bottom"

      info: "Full-width band, background #0c0c0c, text #ffffff at 14px FontSeasonSans 400, padding 16px vertical. 'Privacy Policy' link rendered in #ff5f34 with underline. Close X in #ffffff at 16px on the far right."

    gradient_text_accent:
      role: "Headline or keyword emphasis inside hero sections"

      info: "FontSeasonSans 700–800 at 32–72px. Background-clip: text with the linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%) wash. Used for 'The Best Just Got Better' and similar brand superlatives on dark image backgrounds."

    navigation_pill_link:
      role: "Top-bar navigation items"

      info: "9999px radius, padding 8px × 16px, FontSeasonSans 500 at 14px, text #0c0c0c on light nav. Hover fills background with #f7f7f8. Active state text shifts to #ff5f34."

    carousel_indicator_dots:
      role: "Pagination for image carousels and modal slides"

      info: "8px circles, 8px gap. Active dot #ff5f34, inactive rgba(255,255,255,0.4) on dark image backgrounds or #abacae on light surfaces. Centered or bottom-right aligned."

    product_badge___tag:
      role: "Status, category, or promotional labels"

      info: "9999px radius pill, padding 4px × 12px, FontSeasonSans 600 at 12px, uppercase. Variants: 'NEW' (#ff5f34 background, #ffffff text), 'CNET 2024 Award' (#0c0c0c background, #ff5f34 text), 'Limited' (#ffffff background, #0c0c0c text with 1px border)."

    feature_highlight_banner:
      role: "Full-width promotional or feature strip with gradient"

      info: "Full-bleed band, height auto with 60–80px vertical padding, background the orange-to-violet linear-gradient(90deg, #ff2900, #fe7a60, #581dff). Text in #ffffff at 28–60px FontSeasonSans 600–700. Sits between content sections as a brand-energy break."

    close_icon_button:
      role: "Dismiss modals, banners, and overlays"

      info: "32×32px hit target, 16px '×' glyph in FontSeasonSans 500. Color matches surface: #0c0c0c on light, #ffffff on dark. No background or border — pure ghost control."

  do_s_and_don_ts:

    do:
      - "Use #ff5f34 as the filled CTA background, active link color, and brand-emphasis text — it is the only chromatic color permitted for interactive elements"
      - "Render all buttons, badges, and tag-like elements at 9999px radius — pill geometry is a system signature"
      - "Use FontSeasonSans at 400 for body (16px, line-height 1.63) and at 600–700 for display (28–105px) — never substitute the typeface"
      - "Apply the orange-red gradient wash (linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%)) to large display headlines via background-clip: text for brand-superlative moments"
      - "Anchor product imagery on #0c0c0c or full-bleed gradient surfaces — never place photography on light or busy backgrounds"
      - "Maintain 80px section gaps and 16px element gaps for the comfortable density rhythm; tighten to 8px only within inline icon clusters"
      - "Use surface-color shifts (#ffffff → #f7f7f8 → #eff0f3) and 1px Pewter hairlines for hierarchy — avoid adding drop shadows to cards or panels"

    don_t:
      - "Don't introduce secondary accent colors — the palette is monochrome (black/white/grays) with one orange accent; adding blue, green, or purple as standalone tokens breaks the system"
      - "Don't use negative letter-spacing on display text — the system intentionally widens tracking as type grows (up to +5.25px at 105px and +17px at 340px); tightening it kills the holographic signature"
      - "Don't render the 340px mega-display on small viewports without a fluid clamp — at mobile sizes it will dominate the layout"
      - "Don't add drop shadows to cards, modals, or panels — elevation is reserved for the solid black CTA and modal scrim only"
      - "Don't use square or lightly-rounded corners (4–8px) on primary surfaces — cards are 28px, buttons are pills, and any intermediate radius reads as off-system"
      - "Don't place body text below 16px or above 60px without the corresponding line-height and letter-spacing token — the type scale is strict, not interpolated"
      - "Don't use the orange-to-violet gradient on small UI elements — it is a full-bleed banner treatment only; on chips or buttons it loses its premium effect"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Light Canvas | `#ffffff` | Base page background for content sections, product detail pages, and the light half of split layouts |"
    info: "| 1 | Snow Card | `#f7f7f8` | First elevation lift — feature cards, spec panels, light promotional blocks |"
    info: "| 2 | Mist Inset | `#eff0f3` | Nested panel or alternating row tint inside a Snow Card |"
    info: "| 3 | Obsidian Stage | `#0c0c0c` | Dark product showcase sections, footer, hero backdrops, dramatic product photography canvas |"
    info: "| 4 | Void Overlay | `#000000` | Modal scrim, image-bordered dark panels, deepest accent surfaces |"

  elevation:

    - "**Filled Black Pill Button:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`"

  imagery:

    photography_is_the_hero_content_type: "dramatic, full-bleed product shots of VITURE AR glasses against pure black, lit with neon orange and electric-blue rim-lights that echo the brand's accent colors. Shots are tight crops — the glasses fill the frame, often angled to catch reflections of neon sources. Lifestyle photography is minimal; the product itself, treated as sculpture, carries the visual weight. No flat illustrations or iconographic graphics — vector content is limited to thin-stroke UI icons (16–24px) in #0c0c0c or #ffffff. Image treatment is consistent: high-contrast, slightly underexposed backgrounds, saturated accent highlights, no duotone overlays or color grading filters — the lighting is baked into the original capture. A second visual layer uses the brand's signature orange-to-violet gradient as a full-bleed background for promotional banners, providing energy between content blocks."

  layout:

    info: "VITURE uses a max-width 1200px centered container for content sections, with full-bleed dark product showcases breaking out to the viewport edges. The hero is a split-screen composition: oversized headline (60–105px) on the left in #0c0c0c, product photography on the right filling 50–60% of the viewport width. Below the hero, sections alternate between light (#ffffff) and dark (#0c0c0c) bands at 80px vertical gaps, creating a rhythmic light/dark cadence. Feature sections use 3-column card grids (28px radius cards, 16px gaps) on light backgrounds. Specs and technical detail sections use a 2-column text-plus-image layout, alternating left/right. The navigation is a minimal top bar with a centered logo and pill-shaped links, no mega-menu. Footer is full-width #0c0c0c with multi-column link lists. The subscribe modal is centered in the viewport with a 720px max-width split-pane (form left, product image right). Cookie consent bar pins to the viewport bottom. Overall density is comfortable and product-forward — every section earns its vertical space with either a product reveal, a feature claim, or a visual gradient break."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0c0c0c (primary), #7e7e7f (secondary), #ffffff (on dark)"
    - "background: #ffffff (light canvas), #0c0c0c (dark stage), #f7f7f8 (card surface)"
    - "border: #abacae (hairline), #eff0f3 (subtle panel)"
    - "accent: #ff5f34 (brand ember)"
    - "primary action: #ff5f34 (filled action)"
    - "gradient text: linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%)"

    3_5_example_component_prompts:
    - "Create a Primary Action Button: #ff5f34 background, #0c0c0c text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "Create a product hero card: 28px border radius, background #0c0c0c, full-bleed product photograph with neon rim-lighting, internal padding 44px, product name overlay in #ffffff FontSeasonSans 600 at 20px bottom-left, 'NEW' badge (9999px pill, #ff5f34 background, #ffffff text, 12px FontSeasonSans 600) top-left."
    - "Create an email input: 16px border radius, 1px border #abacae, background #ffffff, padding 16px × 24px, placeholder 'Email' in #7e7e7f FontSeasonSans 400 at 16px, envelope icon flush-right in #7e7e7f, focus state shifts border to #ff5f34 with 2px outer ring at rgba(255,95,52,0.2)."
    - "Create a feature spec card: 28px border radius, background #f7f7f8, padding 28px, 24px icon in #0c0c0c top, heading FontSeasonSans 600 at 20px in #0c0c0c, body FontSeasonSans 400 at 14px in #7e7e7f, no drop shadow."
    - "Create a gradient display headline: FontSeasonSans weight 700 at 72px, text fill via background-clip with linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%), letter-spacing 3.6px, on a #0c0c0c full-bleed background section with 80px vertical padding."

  similar_brands:

    - "**Nothing (nothing.tech)** — Same monochrome near-black canvas with a single vivid accent, oversized display numerals, and a dot-matrix typographic attitude — both lean on a custom geometric sans and product-as-sculpture photography"
    - "**Beats by Dre** — Shared product-showcase aesthetic on pure black with neon rim-lighting, pill-shaped CTAs, and bold condensed display type used as visual anchors"
    - "**Apple Vision Pro** — Both treat XR hardware as premium jewelry — large hero numbers, cinematic product crops, alternating light/dark bands, and minimal interface chrome"
    - "**Bose** — Same pill-button geometry, black/white/orange palette logic, and 28px-radius card system for consumer-electronics feature blocks"
    - "**Teenage Engineering** — Both use a custom geometric sans with unusually positive letter-spacing on display text, flat surface treatments, and product photography that treats the device as a graphic object"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-viture-ember: #ff5f34;
          --color-crimson-core: #f31010;
          --gradient-crimson-core: linear-gradient(90deg, #ff5f34 -100%, #f31010 0%, #ff5f34 100%);
          --color-aurora-wash: #fe7a60;
          --gradient-aurora-wash: linear-gradient(to right, #ff2900 0%, #fe7a60 61%, #581dff 100%);
          --color-ultra-violet: #581dff;
          --color-signal-blue: #1271ff;
          --gradient-signal-blue: linear-gradient(94deg, #1271ff 1.4%, #97dcff 80.11%, #e5f6ff 123.55%);
          --color-obsidian: #0c0c0c;
          --color-pure-white: #ffffff;
          --color-ash: #7e7e7f;
          --color-slate: #5b5c5d;
          --color-pewter: #abacae;
          --color-fog: #949597;
          --color-snow: #f7f7f8;
          --color-mist: #eff0f3;
          --color-void: #000000;
        
          /* Typography — Font Families */
          --font-fontseasonsans: 'FontSeasonSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.17px;
          --text-body: 16px;
          --leading-body: 1.63;
          --tracking-body: 0.19px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.4px;
          --text-heading-sm: 23px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.46px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.33;
          --tracking-heading-lg: 0.83px;
          --text-display: 60px;
          --leading-display: 1.2;
          --tracking-display: 1.56px;
          --text-display-lg: 72px;
          --leading-display-lg: 1.2;
          --tracking-display-lg: 3.6px;
          --text-hero: 105px;
          --leading-hero: 1;
          --tracking-hero: 5.25px;
          --text-mega: 340px;
          --leading-mega: 1;
          --tracking-mega: 17px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 28px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 50px;
          --radius-full-2: 120px;
          --radius-full-3: 9999px;
        
          /* Named Radii */
          --radius-cards: 28px;
          --radius-badges: 9999px;
          --radius-images: 28px;
          --radius-inputs: 16px;
          --radius-buttons: 9999px;
          --radius-hero-pill: 120px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
        
          /* Surfaces */
          --surface-light-canvas: #ffffff;
          --surface-snow-card: #f7f7f8;
          --surface-mist-inset: #eff0f3;
          --surface-obsidian-stage: #0c0c0c;
          --surface-void-overlay: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-viture-ember: #ff5f34;
          --color-crimson-core: #f31010;
          --color-aurora-wash: #fe7a60;
          --color-ultra-violet: #581dff;
          --color-signal-blue: #1271ff;
          --color-obsidian: #0c0c0c;
          --color-pure-white: #ffffff;
          --color-ash: #7e7e7f;
          --color-slate: #5b5c5d;
          --color-pewter: #abacae;
          --color-fog: #949597;
          --color-snow: #f7f7f8;
          --color-mist: #eff0f3;
          --color-void: #000000;
        
          /* Typography */
          --font-fontseasonsans: 'FontSeasonSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.17px;
          --text-body: 16px;
          --leading-body: 1.63;
          --tracking-body: 0.19px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.4px;
          --text-heading-sm: 23px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.46px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.33;
          --tracking-heading-lg: 0.83px;
          --text-display: 60px;
          --leading-display: 1.2;
          --tracking-display: 1.56px;
          --text-display-lg: 72px;
          --leading-display-lg: 1.2;
          --tracking-display-lg: 3.6px;
          --text-hero: 105px;
          --leading-hero: 1;
          --tracking-hero: 5.25px;
          --text-mega: 340px;
          --leading-mega: 1;
          --tracking-mega: 17px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 50px;
          --radius-full-2: 120px;
          --radius-full-3: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
        }