rivian___style_reference:
  info: "> Electric monolith on a concrete gallery wall. Rivian stages each vehicle as a sculpture against vast white space, with typography so large it becomes architecture and one warm yellow that breaks the monochrome like sunlight on a matte surface."

  theme: "light"

  info: "Rivian presents its vehicles as monumental objects in a clean architectural gallery: white concrete canvases, full-bleed cinematic photography, and one signature Solar Yellow accent that electrifies the otherwise monochrome system. Typography does the heavy lifting — a custom Adventure typeface at near-black weights paired with Liga at 360px for product monograms makes each vehicle feel branded and indivisible. Components are minimal and confident: pill-shaped controls, hairline borders, flat surfaces, and generous negative space that lets photography breathe. Color is rationed to the single yellow CTA and a few paint-swatch accents; everything else is graphite, concrete, and white. The system rejects decoration in favor of scale, restraint, and theatrical product presentation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Solar Yellow | `#ffac00` | `--color-solar-yellow` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Canyon Orange | `#e84826` | `--color-canyon-orange` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Forest Green | `#629b5c` | `--color-forest-green` | Secondary accent for vehicle color options and category tags |"
    info: "| Sky Blue | `#77afd8` | `--color-sky-blue` | Secondary accent for vehicle color options and informational highlights |"
    info: "| Slate Blue | `#9fa1b8` | `--color-slate-blue` | Cool-tinted shadow base and atmospheric wash — the only chromatic neutral, gives elevation a slightly overcast feel |"
    info: "| Graphite | `#151515` | `--color-graphite` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | High-contrast text, icon fills, and the heaviest display headings where maximum weight is needed |"
    info: "| Concrete | `#e5e7eb` | `--color-concrete` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Ash | `#cfd0d0` | `--color-ash` | Mid-gray surface and shadow base for elevated cards and subtle depth |"
    info: "| Fog | `#b8b8b8` | `--color-fog` | Muted helper text and tertiary metadata |"
    info: "| Steel | `#616161` | `--color-steel` | Secondary nav text, subdued icon fills, inactive labels |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surface, reversed text on dark fills |"
    info: "| Chalk | `#f2f2f2` | `--color-chalk` | Alternate page background for content sections — warmer than pure white, breaks the canvas rhythm |"
    info: "| Charcoal | `#212121` | `--color-charcoal` | Input field backgrounds and dark UI surfaces — slightly lighter than Graphite to read as surface rather than text |"

  tokens___typography:

    adventure___primary_brand_typeface_used_across_nav__body__headings__buttons__and_cards__custom_geometric_humanist_sans_with_slightly_squared_terminals___chosen_for_its_engineering_feel_that_matches_the_vehicle_aesthetic__letter_spacing_tightens_aggressively_at_large_sizes__0_045em_at_120px_down_to__0_01em_at_body__the_weight_400_body_is_light_for_a_technical_brand__weight_500_is_the_working_weight_for_ui__weight_600_is_reserved_for_emphasis_and_key_ctas__font_features_disable_contextual_alternates_and_standard_ligatures_for_a_clean_modern_feel_____font_adventure:
      - "**Substitute:** Inter, Söhne, or Neue Haas Grotesk"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 11, 12, 14, 16, 20, 24, 32, 36, 44, 56, 72, 120"
      - "**Line height:** 1.0–1.55 (tight at large sizes, open at body)"
      - "**Letter spacing:** -0.045em at 120px, -0.042em at 72px, -0.036em at 56px, -0.031em at 44px, -0.025em at 36px, -0.021em at 32px, -0.020em at 24px, -0.01em at 16-20px, normal at 12-14px"
      - "**OpenType features:** `\"clig\" 0, \"liga\" 0, \"ss01\" 0`"
      - "**Role:** Primary brand typeface used across nav, body, headings, buttons, and cards. Custom geometric humanist sans with slightly squared terminals — chosen for its engineering feel that matches the vehicle aesthetic. Letter-spacing tightens aggressively at large sizes (-0.045em at 120px down to -0.01em at body). The weight 400 body is light for a technical brand; weight 500 is the working weight for UI; weight 600 is reserved for emphasis and key CTAs. Font features disable contextual alternates and standard ligatures for a clean modern feel."

    liga___monumental_display_font_used_exclusively_for_product_monograms_r1s__r1t_at_360px__a_geometric_display_face_with_characteristic_sharp_cuts___it_functions_as_a_logo__not_running_text__the_tight__0_022em_tracking_at_360px_creates_a_dense_visual_block_that_anchors_the_entire_product_page_____font_liga:
      - "**Substitute:** Druk Wide, GT America Compressed, or Title Condensed"
      - "**Weights:** 500"
      - "**Sizes:** 360"
      - "**Line height:** 1.0"
      - "**Letter spacing:** -0.0220em"
      - "**OpenType features:** `\"clig\", \"liga\", \"ss01\"`"
      - "**Role:** Monumental display font used exclusively for product monograms (R1S, R1T) at 360px. A geometric display face with characteristic sharp cuts — it functions as a logo, not running text. The tight -0.022em tracking at 360px creates a dense visual block that anchors the entire product page."

    s_hne___used_sparingly_for_fine_print_and_legal_micro_copy_where_a_different_voice_signals_regulatory_content____font_shne:
      - "**Substitute:** Inter or system-ui"
      - "**Weights:** 500"
      - "**Sizes:** 12"
      - "**Line height:** 1.33"
      - "**Role:** Used sparingly for fine print and legal micro-copy where a different voice signals regulatory content"

    sohne___sohne___detected_in_extracted_data_but_not_described_by_ai____font_sohne:
      - "**Weights:** 500"
      - "**Sizes:** 12px"
      - "**Line height:** 1.33"
      - "**Role:** Sohne — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.43 | — | `--text-caption` |"
      info: "| body | 14px | 1.55 | -0.14px | `--text-body` |"
      info: "| body-lg | 16px | 1.5 | -0.16px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.33 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.48px | `--text-heading-sm` |"
      info: "| heading-lg | 44px | 1.14 | -1.364px | `--text-heading-lg` |"
      info: "| heading-xl | 56px | 1.13 | -2.016px | `--text-heading-xl` |"
      info: "| display | 72px | 1.09 | -3.024px | `--text-display` |"
      info: "| display-lg | 120px | 1 | -5.4px | `--text-display-lg` |"
      info: "| hero | 360px | 1 | -7.92px | `--text-hero` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | 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: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 20px |"
      info: "| chips | 99px |"
      info: "| icons | 8px |"
      info: "| pills | 9999px |"
      info: "| images | 20px |"
      info: "| inputs | 4px |"
      info: "| buttons | 40px |"

    layout:

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

  components:

    solar_yellow_cta_button:
      role: "Primary action button (Demo drive, key conversions)"

      info: "Pill shape at 40px radius, #ffac00 fill, #151515 text in Adventure weight 500 at 14px. Padding 12px 24px. The single chromatic button in the system — it exists to be the visual climax of any page. Never use a second yellow button on the same screen."

    graphite_filled_button:
      role: "Primary action in sections without the yellow demo CTA (Explore vehicle)"

      info: "Pill shape at 40px radius, #151515 fill, #ffffff text in Adventure weight 500 at 14px. Padding 12px 24px. The dark counterpart to Solar Yellow — used when the yellow is reserved for the demo conversion."

    light_filled_button:
      role: "Tertiary action (Buy, secondary commerce flow)"

      info: "Pill shape at 40px radius, #e5e7eb fill, #151515 text in Adventure weight 500 at 14px. Padding 12px 24px. Quiet alternative that doesn't compete with the dark or yellow primary buttons."

    ghost_button___light_outline:
      role: "Secondary action over photography (View all offers)"

      info: "Pill shape at 40px radius, transparent fill, 1px #ffffff border, #ffffff text in Adventure weight 500 at 14px. Padding 12px 24px. Designed to sit on dark or photographic backgrounds without competing with the image."

    ghost_button___dark_outline:
      role: "Secondary action on light backgrounds (Shop)"

      info: "Pill shape at 40px radius, transparent fill, 1px #151515 border, #151515 text in Adventure weight 500 at 14px. Padding 12px 24px. Mirrors the light ghost for use on white or chalk surfaces."

    pill_nav_button:
      role: "Top-level navigation items and category chips"

      info: "Full 9999px radius, 8px 16px padding, Adventure weight 500 at 12-14px. #151515 text. Used for primary nav links, tag chips, and filter pills. The fully rounded form contrasts with the 40px buttons to create a typology of roundness."

    top_navigation_bar:
      role: "Global site navigation"

      info: "White (#ffffff) background, 1px #e5e7eb bottom border, fixed position. Logo left (not extracted, assumed), centered nav links (Vehicles, Charging, Technology, Discover, Gear Shop) in Adventure 500 at 14px #151515, Solar Yellow Demo drive CTA right. Height approximately 60px. Minimal, airy, high-contrast."

    hero_carousel_slide:
      role: "Full-bleed promotional hero with vehicle photography"

      info: "Full viewport width, ~80vh height. Background is a full-bleed photographic image of a vehicle in an environmental context. Overlaid white headline (Adventure 500, 44-56px, -1.36 to -2.02px tracking) positioned bottom-left. Subtext at 16px weight 400. Two buttons side by side: ghost-light + filled-yellow or ghost-dark. Carousel pagination as small pill indicators centered below."

    product_monogram_block:
      role: "R1S/R1T product identity page header"

      info: "Chalk (#f2f2f2) background. Liga at 360px weight 500 in #000000, centered, with -7.92px tracking. Vehicle product photo centered below in full profile view, with no card or frame — the vehicle sits directly on the background. Tagline below at 20px weight 500 #151515, then price at 14px weight 400 #616161, then two buttons (Explore = Graphite, Buy = Light)."

    location_selector_dropdown:
      role: "Region/continent selection in nav"

      info: "Dark surface (#151515) panel, white text, with +/– expand indicators. Expanded items show \"North America\" and \"Europe\" in Adventure 500 at 14px. Rounded at 12px. The dark surface in an otherwise light nav signals utility/configuration rather than marketing."

    legal_disclosure_text_block:
      role: "Fine print, terms, disclaimers"

e5e7eb_background__full_width_contained__body_text_in_adventure_400_at_12px_151515_with_normal_tracking__line_height_1_55__left_aligned__max_width_container__dense_and_utilitarian___a_stark_contrast_to_the_theatrical_hero_above:

    chip_tag_99px_radius:
      role: "Category labels, vehicle feature tags"

      info: "Fully rounded at 99px, #e5e7eb background or #f2f2f2, #151515 text in Adventure 500 at 12px. Padding 6px 14px. Used for product categories, feature labels, and contextual tags."

  do_s_and_don_ts:

    do:
      - "Use Solar Yellow (#ffac00) for exactly one primary CTA per screen — never pair it with another yellow element."
      - "Use 40px border-radius for all action buttons and 9999px for nav links and tag chips — these two radii define the system."
      - "Let photography fill the viewport edge-to-edge in hero sections; never frame vehicle images in cards on landing pages."
      - "Scale typography aggressively: use 56px+ for page-level headings, 120px for display moments, and 360px Liga for product monograms only."
      - "Set letter-spacing to negative values at all sizes above 20px: -0.020em at 24px scaling to -0.045em at 120px."
      - "Keep most surfaces flat — use #e5e7eb hairline borders for definition rather than shadows."
      - "Use #f2f2f2 (Chalk) to alternate section backgrounds and break white-only monotony."

    don_t:
      - "Do not use any chromatic color other than Solar Yellow for primary actions — the system is monochrome by design."
      - "Do not use shadows for elevation; use surface color shifts (#ffffff → #f2f2f2 → #e5e7eb) instead."
      - "Do not set body text below 12px or above 18px — the 14-16px body range is deliberate."
      - "Do not use rounded images above 20px radius on landing pages; the product should feel architectural, not soft."
      - "Do not use multiple typefaces in a single composition — Adventure handles 99% of the system; Liga is reserved for product monograms."
      - "Do not apply gradients to UI components; gradients in the data are atmospheric washes only, not interface decoration."
      - "Do not use color for hierarchy in monochrome sections — rely on weight (400 vs 500 vs 600) and size differences."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper Canvas | `#ffffff` | Default page background and primary card surface |"
    info: "| 2 | Chalk Section | `#f2f2f2` | Alternate section background to create rhythm on long pages |"
    info: "| 3 | Concrete Border | `#e5e7eb` | Hairline dividers, button base, fine print background |"
    info: "| 4 | Ash Elevation | `#cfd0d0` | Subtle elevated surface and shadow base |"
    info: "| 5 | Charcoal Utility | `#212121` | Input fields and dark utility surfaces |"

  elevation:

    - "**Cards and elevated surfaces:** `0 4px 12px rgba(159, 161, 184, 0.15)`"
    - "**Floating panels and dropdowns:** `0 8px 24px rgba(159, 161, 184, 0.2)`"

  imagery:

    info: "Photography is the dominant visual asset: full-bleed, cinematic, environmental shots of vehicles in natural and urban settings (city streets, dirt roads, twilight landscapes). Treatment is naturalistic with no duotone or heavy color grading — the vehicles appear as they are, shot at golden hour or overcast light for drama. No lifestyle people-centric framing; the vehicle is always the hero, sometimes with a single human figure for scale. Images use 20px border-radius when contained. The visual language also includes the 360px Liga monogram as a graphic element — typography that functions as art. No illustrations, no abstract graphics, no 3D renders in marketing contexts."

  layout:

    info: "Page model is full-bleed with centered max-width content containers at ~1440px. Navigation is a minimal top bar (white, fixed) with centered links and a right-aligned yellow CTA. Hero sections are full-viewport-width photographic backgrounds with text overlays positioned bottom-left. Product monogram pages use centered symmetry: massive type → centered vehicle profile → centered text stack → centered button pair. Section rhythm alternates between full-bleed photo sections and centered narrow text blocks. Content arrangement favors centered stacks over asymmetric layouts. Card grids appear for vehicle comparisons and feature listings, typically 2-3 columns with generous gutters. Dense sections (legal, specs) use constrained max-width with justified text. Spacing is generous — 80px section gaps, 24px card padding, 8px element gaps — the system breathes."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #ffffff (primary canvas), #f2f2f2 (alternate section)"
    - "text: #151515 (primary), #616161 (secondary), #b8b8b8 (tertiary)"
    - "border: #e5e7eb (hairline), #cfd0d0 (emphasis)"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Hero Carousel Slide**: Full-bleed 80vh, background image of vehicle in urban environment. White headline 'Choose your own savings' at 56px Adventure weight 500, -2.016px tracking, positioned bottom-left with 40px left padding. Subtext at 16px weight 400 #ffffff. Two buttons: ghost (1px #ffffff border, transparent fill, white text, 40px radius) and yellow filled (#ffac00, #151515 text, 40px radius). Both at 14px Adventure 500 with 12px 24px padding."

    - "**Product Monogram Page**: Chalk #f2f2f2 background. Liga at 360px weight 500 #000000, centered, -7.92px tracking for the R1S mark. Vehicle profile image centered below at 80% width with no frame. Tagline at 20px weight 500 #151515 centered, then 'From $76,990' at 14px weight 400 #616161. Two centered buttons: Explore (#151515 fill, white text) and Buy (#e5e7eb fill, #151515 text), both 40px radius, 12px 24px padding."

    - "**Top Navigation Bar**: White #ffffff background, 1px #e5e7eb bottom border, 60px height. Centered nav links (Vehicles, Charging, Technology, Discover, Gear Shop) in Adventure 500 at 14px #151515 with 32px horizontal gaps. Solar Yellow 'Demo drive' pill button right-aligned (40px radius, 12px 24px padding, Adventure 500 14px #151515 text)."

    - "**Feature Tag Chips**: 99px border-radius, #e5e7eb background, #151515 text in Adventure 500 at 12px, padding 6px 14px. Used inline to label vehicle capabilities and categories."

    - "**Legal Disclaimer Block**: #e5e7eb full-width background, max-width 1200px container. Body text at 12px Adventure 400 #151515, line-height 1.55, normal tracking. Dense paragraph block with 4px row-gap between paragraphs."

  similar_brands:

    - "**Polestar** — Same monochrome gallery approach with single accent color, massive product monogram typography, and full-bleed environmental vehicle photography on clean white surfaces"
    - "**Lucid Motors** — Minimalist automotive presentation with one-color accent system, generous white space, and large-format product name typography"
    - "**Apple (product pages)** — Full-bleed product photography, centered narrow text blocks, oversized display typography, and near-monochrome palette with one accent"
    - "**Tesla** — Restrained UI chrome, photography-first product presentation, and minimal use of decorative color"
    - "**Arc'teryx** — Custom typeface, monochrome canvas, hairline borders, pill-shaped controls, and emphasis on letting product imagery dominate"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-solar-yellow: #ffac00;
          --color-canyon-orange: #e84826;
          --color-forest-green: #629b5c;
          --color-sky-blue: #77afd8;
          --color-slate-blue: #9fa1b8;
          --color-graphite: #151515;
          --color-pure-black: #000000;
          --color-concrete: #e5e7eb;
          --color-ash: #cfd0d0;
          --color-fog: #b8b8b8;
          --color-steel: #616161;
          --color-paper: #ffffff;
          --color-chalk: #f2f2f2;
          --color-charcoal: #212121;
        
          /* Typography — Font Families */
          --font-adventure: 'Adventure', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-liga: 'Liga', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne: 'Sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.43;
          --text-body: 14px;
          --leading-body: 1.55;
          --tracking-body: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.364px;
          --text-heading-xl: 56px;
          --leading-heading-xl: 1.13;
          --tracking-heading-xl: -2.016px;
          --text-display: 72px;
          --leading-display: 1.09;
          --tracking-display: -3.024px;
          --text-display-lg: 120px;
          --leading-display-lg: 1;
          --tracking-display-lg: -5.4px;
          --text-hero: 360px;
          --leading-hero: 1;
          --tracking-hero: -7.92px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 40px;
          --radius-full: 56px;
          --radius-full-2: 80px;
          --radius-full-3: 99px;
          --radius-full-4: 9999px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 20px;
          --radius-chips: 99px;
          --radius-icons: 8px;
          --radius-pills: 9999px;
          --radius-images: 20px;
          --radius-inputs: 4px;
          --radius-buttons: 40px;
        
          /* Surfaces */
          --surface-paper-canvas: #ffffff;
          --surface-chalk-section: #f2f2f2;
          --surface-concrete-border: #e5e7eb;
          --surface-ash-elevation: #cfd0d0;
          --surface-charcoal-utility: #212121;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-solar-yellow: #ffac00;
          --color-canyon-orange: #e84826;
          --color-forest-green: #629b5c;
          --color-sky-blue: #77afd8;
          --color-slate-blue: #9fa1b8;
          --color-graphite: #151515;
          --color-pure-black: #000000;
          --color-concrete: #e5e7eb;
          --color-ash: #cfd0d0;
          --color-fog: #b8b8b8;
          --color-steel: #616161;
          --color-paper: #ffffff;
          --color-chalk: #f2f2f2;
          --color-charcoal: #212121;
        
          /* Typography */
          --font-adventure: 'Adventure', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-liga: 'Liga', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne: 'Sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.43;
          --text-body: 14px;
          --leading-body: 1.55;
          --tracking-body: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -1.364px;
          --text-heading-xl: 56px;
          --leading-heading-xl: 1.13;
          --tracking-heading-xl: -2.016px;
          --text-display: 72px;
          --leading-display: 1.09;
          --tracking-display: -3.024px;
          --text-display-lg: 120px;
          --leading-display-lg: 1;
          --tracking-display-lg: -5.4px;
          --text-hero: 360px;
          --leading-hero: 1;
          --tracking-hero: -7.92px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 40px;
          --radius-full: 56px;
          --radius-full-2: 80px;
          --radius-full-3: 99px;
          --radius-full-4: 9999px;
        }