base44___style_reference:
  info: "> Sunlit workspace with a single lime spark. Warm off-white canvas, white product surfaces, pill controls, whisper-weight display type, and one electric lime accent that powers every action."

  theme: "light"

  info: "Base44 speaks in warm off-white daylight: a sunlit canvas (#faf9f7) with white product surfaces, whisper-weight display type that feels engraved rather than stamped, and one electric lime accent (#ebffb1) that makes the primary action feel switched on. Section transitions are painted as soft gradient bands — cool blue-to-white in the hero, warm orange-to-coral in the mid-page — creating a horizon-line effect between content blocks rather than hard dividers. Components stay featherlight: pill-shaped controls (999px radius), ~10px card corners, hairline borders, and almost no shadow. The lime-green is the only saturated color allowed on interactive elements; everything else is achromatic or carried inside gradients, which keeps the interface quiet and gives the single accent real authority."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Lime Spark | `#ebffb1` | `--color-lime-spark` | Primary action background, active highlights — soft electric lime that reads as energy/switched-on without aggression |"
    info: "| Lime Bolt | `#ade900` | `--color-lime-bolt` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Ember Outline | `#d8723c` | `--color-ember-outline` | Outlined button border, secondary warm-orange action variant |"
    info: "| Solar Orange | `linear-gradient(rgba(250, 249, 247, 0) 2.69%, rgb(255, 240, 222) 24.16%, rgb(255, 174, 83) 56.55%, rgba(255, 174, 83, 0) 98.02%)` | `--color-solar-orange` | Mid-stop of section gradient bands — warm coral that anchors horizon-line transitions; Mid-page section transition — warm orange-to-coral horizon |"
    info: "| Sky Wash | `#5db3cf` | `--color-sky-wash` | Hero gradient origin — soft blue that fades into the warm canvas |"
    info: "| Charcoal | `#0f0f0f` | `--color-charcoal` | Darkest surface text and filled action background on inverted contexts |"
    info: "| Ink | `#232529` | `--color-ink` | Body text, strong borders, card outlines — near-black with a touch of cool |"
    info: "| Graphite | `#696f7b` | `--color-graphite` | Muted body text, secondary labels — blue-gray that recedes on warm canvas |"
    info: "| Slate | `#324158` | `--color-slate` | Cool blue-gray for structural borders and dividers needing weight |"
    info: "| Stone Border | `#cfcfcf` | `--color-stone-border` | Button and input borders — visible but not heavy |"
    info: "| Mist Border | `#b7b7b7` | `--color-mist-border` | Lighter borders on icon containers, secondary outlines |"
    info: "| Hairline | `#e6e6e6` | `--color-hairline` | Subtle dividers, card edges on white surfaces |"
    info: "| Canvas | `#faf9f7` | `--color-canvas` | Page background — warm off-white that absorbs light gently |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, input fields, elevated product surfaces — pure white sitting on the warm canvas |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Headline text, icon strokes, maximum-contrast borders |"
    info: "| Daybreak Horizon | `linear-gradient(rgb(242, 241, 237) 42.49%, rgb(213, 223, 224) 93.98%, rgb(229, 255, 148) 104.08%)` | `--color-daybreak-horizon` | Gradient bridge between sky blue and warm white |"

  tokens___typography:

    arial___system_fallback_for_older_components_and_auxiliary_text____font_arial:
      - "**Substitute:** system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 13px, 14px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback for older components and auxiliary text"

    madefor_display___hero_and_section_headlines___weight_400_at_55_63px_is_anti_convention__the_whisper_weight_creates_authority_through_restraint__letting_the_large_size_and_tight_line_height_do_the_work____font_madefor_display:
      - "**Substitute:** Inter Tight, Space Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 10px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Role:** Hero and section headlines — weight 400 at 55–63px is anti-convention; the whisper-weight creates authority through restraint, letting the large size and tight line-height do the work"

    madefor_display___mid_page_headings_and_feature_titles___same_400_weight_carries_the_display_voice_down_the_page____font_madefor_display:
      - "**Substitute:** Inter Tight, Space Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 10px"
      - "**Line height:** 1.07-1.10"
      - "**Role:** Mid-page headings and feature titles — same 400 weight carries the display voice down the page"

    wix_madefor_text_v2___body__nav__buttons__inputs___0_1em_letter_spacing_is_the_signature_tracking_that_gives_text_a_slightly_expanded__breathable_feel____font_wix_madefor_text_v2:
      - "**Substitute:** Madefor Text, Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px"
      - "**Line height:** 1.30-1.60"
      - "**Letter spacing:** 0.1000em"
      - "**Role:** Body, nav, buttons, inputs — 0.1em letter-spacing is the signature tracking that gives text a slightly expanded, breathable feel"

    wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495___wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495___detected_in_extracted_data_but_not_described_by_ai____font_wfont343a2a4e484da66ffc4465a05a1c9ea5caf495:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px, 28px, 30px, 42px"
      - "**Line height:** 1, 1.2, 1.3"
      - "**Role:** wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495 — detected in extracted data but not described by AI"

    wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39___wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39___detected_in_extracted_data_but_not_described_by_ai____font_wfont343a2a5b4cd32fc19d46e1b8c1b142abb27d39:
      - "**Weights:** 400"
      - "**Sizes:** 22px, 24px, 34px, 51px, 55px, 56px, 63px"
      - "**Line height:** 0.9, 1, 1.07, 1.1, 1.4"
      - "**Role:** wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39 — detected in extracted data but not described by AI"

    madefor_text___madefor_text___detected_in_extracted_data_but_not_described_by_ai____font_madefor_text:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Role:** Madefor-Text — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | 1.4px | `--text-body` |"
      info: "| body-lg | 16px | 1.5 | 1.6px | `--text-body-lg` |"
      info: "| subheading | 18px | 1.4 | 1.8px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 34px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 42px | 1.07 | — | `--text-heading-lg` |"
      info: "| display | 56px | 1 | — | `--text-display` |"
      info: "| display-lg | 63px | 1 | — | `--text-display-lg` |"

  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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 76 | 76px | `--spacing-76` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 10px |"
      info: "| links | 300px |"
      info: "| small | 7px |"
      info: "| images | 10px |"
      info: "| inputs | 10px |"
      info: "| buttons | 999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(34, 40, 42, 0.04) 0px 3px 10px 0px` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 40px"
      - "**Element gap:** 12px"

  components:

    primary_action_button_filled:
      role: "Main CTA — \"Start Building\" in nav, hero submit"

      info: "Lime-green (#ebffb1) fill, #0f0f0f text, 999px radius (full pill), 12px 24px padding, Madefor Text weight 500 16px with 0.1em letter-spacing. The lime against the warm canvas makes it the loudest element on the page."

    secondary_outlined_button:
      role: "Alternate action with orange or lime border"

      info: "Transparent fill, 2px border in #d8723c (orange) or #ade900 (lime), 999px radius, 12px 20px padding, Madefor Text weight 500 16px. Used for variant actions that should not compete with the primary."

    ghost_text_button:
      role: "Low-emphasis actions and inline links"

      info: "No fill, no border, #0f0f0f or #232529 text, 999px radius, 8px 12px padding. Used inside cards and form footers."

    hero_prompt_card:
      role: "Central hero element — AI prompt input"

      info: "White (#ffffff) card on gradient background, ~10px radius, 40px padding, subtle #e6e6e6 hairline border. Contains a textarea, a Plan/Build toggle pill, and a circular dark submit button (#232529) with a white arrow icon."

    suggestion_chip:
      role: "Pre-filled prompt suggestions below hero input"

      info: "White fill, #cfcfcf border, 999px radius, 6px 16px padding, Madefor Text weight 400 14px text in #232529. Arranged in a wrapping row with 8px gaps."

    new_badge_pill:
      role: "\"NEW\" tag in announcement bar"

      info: "Orange (#d8723c) fill or lime (#ebffb1) fill with dark text, 999px radius, 2px 10px padding, 10–12px uppercase weight 600. Sits inside a pill-shaped announcement container with border."

    announcement_banner:
      role: "Top-of-hero announcement strip"

      info: "Transparent or white fill, #cfcfcf 1px border, 999px radius, 8px 20px padding, centered text with badge + label + arrow icon. Floats above the hero gradient."

    feature_section_card:
      role: "Two-column feature block with text + product preview"

      info: "White (#ffffff) fill, ~10px radius, no shadow, 40px padding. Left column holds section number, title, body text, and a filled CTA. Right column holds a product preview card with the single shadow token."

    product_preview_card:
      role: "Embedded product screenshot container"

      info: "White fill, 10px radius, subtle shadow rgba(34,40,42,0.04) 0px 3px 10px 0px. Contains a product UI screenshot with a dark header bar and a prompt input footer."

    navigation_bar:
      role: "Sticky top header"

      info: "White or transparent fill, 1px bottom border in #e6e6e6, 0px vertical padding (items handle their own). Logo left (orange circle + \"Base44\" wordmark), nav links center, language + CTA right. Height ~60px."

    nav_dropdown_item:
      role: "Product/Use Cases/Resources submenu items"

      info: "No visible chrome, Madefor Text weight 400 14px with 0.1em tracking, #232529 color, 6px 12px padding. Chevron icon in #696f7b."

    language_switcher:
      role: "Globe icon button in nav"

      info: "40px circular, #cfcfcf border, transparent fill, globe icon centered in #232529."

    section_divider_band:
      role: "Full-bleed gradient horizon between sections"

      info: "Uses the orange-coral or blue-white radial gradient. ~120–200px tall, no content — purely atmospheric transition between content blocks."

    toggle_pill_plan_build:
      role: "Mode switcher inside the hero prompt card"

      info: "White pill container with a lime (#ebffb1) active state indicator that slides between options. Madefor Text weight 500 14px labels."

  do_s_and_don_ts:

    do:
      - "Use Madefor Display weight 400 for all display headlines — never bold them, the whisper-weight is the brand"
      - "Set the primary CTA fill to #ebffb1 lime with dark text — it is the only saturated color allowed on interactive surfaces"
      - "Use 999px pill radius for all buttons, tags, chips, and toggles — no square buttons exist in this system"
      - "Use 10px radius for all cards and product surfaces — never sharp corners, never larger rounding"
      - "Set body and nav text to Madefor Text with 0.1em letter-spacing — the expanded tracking is a signature of the typeface"
      - "Build section rhythm with full-bleed gradient bands (blue hero, orange mid-page) instead of hard borders or dividers"
      - "Use #faf9f7 warm off-white for the page canvas and #ffffff only for cards and elevated surfaces"

    don_t:
      - "Do not add shadows to anything except the product preview card — shadow is rationed to one element"
      - "Do not use bold (600+) or black weights for headlines — weight 400 at large size is the display voice"
      - "Do not introduce additional saturated colors — lime is the sole chromatic accent; everything else is achromatic or gradient-borne"
      - "Do not use sharp corners on buttons or cards — pill controls and 10px card radii are mandatory"
      - "Do not use #000000 for card backgrounds or large fills — reserve it for text, icons, and the darkest inverted button"
      - "Do not add drop shadows to nav, tags, or suggestion chips — rely on borders and surface contrast"
      - "Do not break the white-on-warm-canvas surface model — never use #ffffff for the page background or #faf9f7 for cards"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#faf9f7` | Warm off-white page background |"
    info: "| 1 | Paper | `#ffffff` | Card and product surface on canvas |"
    info: "| 2 | Warm Gray | `#f0eeeb` | Subtle banded sections between white content blocks |"
    info: "| 3 | Lime Highlight | `#ebffb1` | Active and CTA fills that float above paper |"

  elevation:

    - "**Product preview card:** `rgba(34, 40, 42, 0.04) 0px 3px 10px 0px`"
    - "**All other cards:** `none — rely on white-on-canvas contrast, not shadows`"

  imagery:

    info: "Product screenshots dominate over photography. Dark-themed product UI mockups (kanban boards, task managers) sit on white preview cards to contrast against the warm canvas — the dark product UI is the visual hero. Gradient bands (blue-to-white at top, orange-to-coral mid-page) act as atmospheric section dividers, not decorative imagery. Icons are line-style, monochrome, thin-stroke. No lifestyle photography, no 3D renders, no illustrations — the interface and product screenshots are the only visuals."

  layout:

    info: "Max-width 1200px centered container, full-bleed gradient bands at section boundaries. Hero is centered text-over-gradient with a floating prompt card below. Mid-page alternates between white card bands and warm-gray (#f0eeeb) bands, each carrying a 2-column text+product-preview layout. Cards sit on a 2-column grid for features. Sticky top nav with centered link group. Vertical rhythm is generous — 80px between sections, 40px card padding. The orange gradient band acts as a horizon line breaking the page into distinct visual chapters."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000 / #232529"
    - "background (canvas): #faf9f7"
    - "surface (card): #ffffff"
    - "border: #e6e6e6 / #cfcfcf"
    - "accent: #ebffb1 (lime)"
    - "primary action: #ebffb1 (filled action)"

    info: "Example Component Prompts:"
    - "Build a hero announcement pill: transparent fill, 1px #cfcfcf border, 999px radius, 8px 20px padding. Contains a small orange \"NEW\" badge (10px weight 600, 999px radius, 2px 10px padding) and Madefor Text 14px weight 500 label text in #232529 with a right-arrow icon."
    - "Create a Primary Action Button: #ebffb1 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "Build a suggestion chip: #ffffff fill, 1px #cfcfcf border, 999px radius, 6px 16px padding, Madefor Text weight 400 14px text in #232529."
    - "Build a section gradient band: full-bleed, ~160px tall, using linear-gradient(rgba(250,249,247,0) 2.69%, rgb(255,240,222) 24.16%, rgb(255,174,83) 56.55%, rgba(255,174,83,0) 98.02%) to create a warm orange horizon between content sections."

  similar_brands:

    - "**Bolt.new** — Same warm off-white canvas, lime-green primary CTA, whisper-weight display headlines, and pill-shaped controls in an AI-builder product context"
    - "**V0 by Vercel** — Monochrome near-white interface with a single chromatic accent, minimal shadow, and generous whitespace around a centered prompt-driven hero"
    - "**Cursor** — Dark-on-light product screenshots embedded in light cards, restrained palette, and pill-shaped nav controls with light-weight display type"
    - "**Lovable** — Warm-light canvas with gradient section bands, single accent color for primary action, and anti-convention light-weight display headlines at large sizes"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lime-spark: #ebffb1;
          --color-lime-bolt: #ade900;
          --color-ember-outline: #d8723c;
          --color-solar-orange: #ff7f47;
          --gradient-solar-orange: linear-gradient(rgba(250, 249, 247, 0) 2.69%, rgb(255, 240, 222) 24.16%, rgb(255, 174, 83) 56.55%, rgba(255, 174, 83, 0) 98.02%);
          --color-sky-wash: #5db3cf;
          --color-charcoal: #0f0f0f;
          --color-ink: #232529;
          --color-graphite: #696f7b;
          --color-slate: #324158;
          --color-stone-border: #cfcfcf;
          --color-mist-border: #b7b7b7;
          --color-hairline: #e6e6e6;
          --color-canvas: #faf9f7;
          --color-paper: #ffffff;
          --color-pure-black: #000000;
          --color-daybreak-horizon: #cfe0e0;
          --gradient-daybreak-horizon: linear-gradient(rgb(242, 241, 237) 42.49%, rgb(213, 223, 224) 93.98%, rgb(229, 255, 148) 104.08%);
        
          /* Typography — Font Families */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-madefor-display: 'Madefor Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wix-madefor-text-v2: 'wix-madefor-text-v2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wfont343a2a4e484da66ffc4465a05a1c9ea5caf495: 'wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wfont343a2a5b4cd32fc19d46e1b8c1b142abb27d39: 'wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-madefor-text: 'Madefor-Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: 1.4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 1.6px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 1.8px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.1;
          --text-heading: 34px;
          --leading-heading: 1.1;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.07;
          --text-display: 56px;
          --leading-display: 1;
          --text-display-lg: 63px;
          --leading-display-lg: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-68: 68px;
          --spacing-76: 76px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 40px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 7.42183px;
          --radius-lg-2: 9.89577px;
          --radius-xl: 13.8541px;
          --radius-3xl: 25.9766px;
          --radius-3xl-2: 30px;
          --radius-full: 59.375px;
          --radius-full-2: 70px;
          --radius-full-3: 100px;
          --radius-full-4: 300px;
          --radius-full-5: 741.445px;
          --radius-full-6: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 10px;
          --radius-links: 300px;
          --radius-small: 7px;
          --radius-images: 10px;
          --radius-inputs: 10px;
          --radius-buttons: 999px;
        
          /* Shadows */
          --shadow-md: rgba(34, 40, 42, 0.04) 0px 3px 10px 0px;
        
          /* Surfaces */
          --surface-canvas: #faf9f7;
          --surface-paper: #ffffff;
          --surface-warm-gray: #f0eeeb;
          --surface-lime-highlight: #ebffb1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lime-spark: #ebffb1;
          --color-lime-bolt: #ade900;
          --color-ember-outline: #d8723c;
          --color-solar-orange: #ff7f47;
          --color-sky-wash: #5db3cf;
          --color-charcoal: #0f0f0f;
          --color-ink: #232529;
          --color-graphite: #696f7b;
          --color-slate: #324158;
          --color-stone-border: #cfcfcf;
          --color-mist-border: #b7b7b7;
          --color-hairline: #e6e6e6;
          --color-canvas: #faf9f7;
          --color-paper: #ffffff;
          --color-pure-black: #000000;
          --color-daybreak-horizon: #cfe0e0;
        
          /* Typography */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-madefor-display: 'Madefor Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wix-madefor-text-v2: 'wix-madefor-text-v2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wfont343a2a4e484da66ffc4465a05a1c9ea5caf495: 'wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wfont343a2a5b4cd32fc19d46e1b8c1b142abb27d39: 'wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-madefor-text: 'Madefor-Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: 1.4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 1.6px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 1.8px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.1;
          --text-heading: 34px;
          --leading-heading: 1.1;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.07;
          --text-display: 56px;
          --leading-display: 1;
          --text-display-lg: 63px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-68: 68px;
          --spacing-76: 76px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 7.42183px;
          --radius-lg-2: 9.89577px;
          --radius-xl: 13.8541px;
          --radius-3xl: 25.9766px;
          --radius-3xl-2: 30px;
          --radius-full: 59.375px;
          --radius-full-2: 70px;
          --radius-full-3: 100px;
          --radius-full-4: 300px;
          --radius-full-5: 741.445px;
          --radius-full-6: 999px;
        
          /* Shadows */
          --shadow-md: rgba(34, 40, 42, 0.04) 0px 3px 10px 0px;
        }