tedy___style_reference:
  info: "> Marshmallow world with a raspberry pulse — pastel surface washes on white, one hot pink doing all the urgent work."

  theme: "light"

  info: "Tedy operates in a soft pastel universe built on one disciplined trick: a near-white canvas flooded with candy-colored surface washes (lavender, mint, butter, sky) and a single hot raspberry (#fd1774) doing all the urgent work. The pink is the only saturated color in the entire system — every CTA, every action surface, every tension point comes from that one hue, with a signature raspberry-tinted shadow extending 18px below it. Typography is where the system gets unexpectedly loud: Montreal Neue hits 104px at line-height 0.90 with tracking pulled to -6.5%, producing poster-etched density that contradicts the soft surroundings — headlines are set almost on top of themselves. Radii are uniformly generous (32px on cards, 999px on buttons, nothing sharp anywhere), and the atmosphere is amplified by colored radial-gradient glows that make the white space feel lit rather than empty."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Raspberry Pulse | `#fd1774` | `--color-raspberry-pulse` | Primary CTA fill, active states, colored shadow accents — the sole saturated hue in the system, creating urgency against matte pastels |"
    info: "| Ink Black | `#030712` | `--color-ink-black` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Lavender Mist | `linear-gradient(to top, rgb(231, 214, 255) 0%, oklab(0.902604 0.0325668 -0.0481643 / 0.85) 50%, rgba(0, 0, 0, 0) 100%)` | `--color-lavender-mist` | Hero card background, testimonial card wash, section surface — the dominant pastel; Hero gradient base — soft lavender fading downward into white; Composite atmospheric glow — purple/pink/teal/amber radial halos blending on white canvas |"
    info: "| Mint Cream | `#e3f7d6` | `--color-mint-cream` | Feature card surface, success-tinted badges, body wash — pastel green for nature/wellness cues |"
    info: "| Butter Cream | `#fff1cd` | `--color-butter-cream` | Warning-tinted badges, warm section wash, pill highlights |"
    info: "| Sky Wash | `#ddf5fb` | `--color-sky-wash` | Soft section background, alternate surface, and quiet card fill |"
    info: "| Sand Wash | `#f4efe9` | `--color-sand-wash` | Warm neutral section surface, cream card backgrounds |"
    info: "| Carbon | `#171717` | `--color-carbon` | Dark elevated surface for cards, headers, and contained panels. Do not promote it to the primary CTA color |"
    info: "| Steel | `#6b7280` | `--color-steel` | Muted body text, secondary borders, de-emphasized labels |"
    info: "| Silver | `#e5e7eb` | `--color-silver` | Hairline dividers, ghost button borders, list separators |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, button text, ghost button fill |"
    info: "| Lime Zest | `#64d71e` | `--color-lime-zest` | Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Teal Current | `#4bb7cf` | `--color-teal-current` | Blue decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"

  tokens___typography:

    montreal_neue___sole_interface_typeface__weight_500_for_nav__buttons__and_emphasis__weight_400_for_body__display_sizes_56_104px_use_line_heights_under_1_0_0_90_0_98_with_aggressive_negative_tracking__0_025em_to__0_065em___this_is_the_system_s_signature_move__body_sizes_14_23px_sit_at_1_38_1_50_line_height_with_minimal_tracking__the_contrast_between_poster_tight_headlines_and_airy_body_copy_is_the_rhythm_____font_montreal_neue:
      - "**Substitute:** Inter (free) or General Sans (Fontshare) — pick Inter for accessibility, General Sans for closer geometric match to Montreal Neue's round forms"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 15px, 16px, 17px, 19px, 23px, 28px, 56px, 59px, 61px, 64px, 70px, 80px, 85px, 86px, 104px"
      - "**Line height:** 0.90 – 1.50"
      - "**Letter spacing:** -0.065em at 104px → -0.005em at 16px, scaling with size"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Role:** Sole interface typeface. Weight 500 for nav, buttons, and emphasis; weight 400 for body. Display sizes (56–104px) use line-heights under 1.0 (0.90–0.98) with aggressive negative tracking (-0.025em to -0.065em) — this is the system's signature move. Body sizes (14–23px) sit at 1.38–1.50 line-height with minimal tracking. The contrast between poster-tight headlines and airy body copy is the rhythm."

    georgia___sporadic_decorative_serif_used_in_one_card_context___appears_to_break_the_sans_only_system_intentionally__possibly_for_a_quoted_styled_statistic__treat_as_accent_only__never_body_____font_georgia:
      - "**Substitute:** Source Serif Pro (free)"
      - "**Weights:** 700"
      - "**Sizes:** 80px"
      - "**Line height:** normal"
      - "**Role:** Sporadic decorative serif used in one card context — appears to break the sans-only system intentionally, possibly for a quoted/styled statistic. Treat as accent-only, never body."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.45 | -0.07px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.08px | `--text-body-sm` |"
      info: "| subheading | 23px | 1.38 | -0.12px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.05 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 56px | 0.98 | -1.4px | `--text-heading` |"
      info: "| heading-lg | 64px | 0.96 | -2.56px | `--text-heading-lg` |"
      info: "| display | 80px | 0.92 | -4px | `--text-display` |"
      info: "| display-xl | 104px | 0.9 | -6.76px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 84 | 84px | `--spacing-84` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 32px |"
      info: "| badges | 32px |"
      info: "| images | 24px |"
      info: "| buttons | 999px |"
      info: "| nav-pills | 999px |"
      info: "| small-cards | 16px |"
      info: "| feature-cards | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(17, 24, 39, 0.16) 0px 28px 52px 0px` | `--shadow-xl` |"
      info: "| subtle | `rgb(255, 241, 205) 0px 0px 0px 1px` | `--shadow-subtle` |"
      info: "| xl-2 | `rgba(253, 23, 116, 0.6) 0px 14px 35px -18px` | `--shadow-xl-2` |"
      info: "| subtle-2 | `rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(255...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Filled pill button for the main conversion action"

      info: "Raspberry Pulse (#fd1774) fill, white text, 999px radius, 14px 24px padding, Montreal Neue 16px weight 500. Carries the signature colored shadow rgba(253, 23, 116, 0.6) 0px 14px 35px -18px. Use for 'Book a demo' and any single highest-priority action per screen."

    ghost_button:
      role: "Secondary action surface"

      info: "Pure white fill with Ink Black (#030712) text, 1px Silver (#e5e7eb) border, 999px radius, 14px 24px padding, 16px weight 500. Pairs beside the primary CTA. The 'Discover Tedy' variant in the hero adds a small circular icon with a Raspberry border before the label."

    auth_button:
      role: "Account/sign-in action"

      info: "Carbon (#171717) fill, white text, 999px radius, 14px 24px padding. Visually distinct from the pink CTA so users never confuse 'book a demo' with 'sign in'."

    navigation_bar:
      role: "Top-level site navigation"

      info: "White background, full-width, 18px vertical padding, 1200px max-width centered content. Logo left, nav links center (text-only with dropdown chevrons), utility controls right: language pill (EN/ON) in a white outlined pill, then primary CTA, then auth button. Nav items are 16px Montreal Neue weight 500, Ink Black."

    hero_card:
      role: "Hero left column with headline and CTAs"

      info: "Lavender Mist (#e5d6ff) fill, 32px radius, 40-48px padding, contains display-xl headline (104px, lh 0.90, tracking -0.065em), body subtext, and CTA pair stacked vertically. The lavender card is the page's most visually dominant surface."

    photo_collage:
      role: "Hero right column image grid"

      info: "2x2 grid of lifestyle photos (candid, joyful people), each image cropped with 24px radius, with 8-12px gaps. The bottom-left image overlaps slightly into the lavender card area to create depth."

    pastel_feature_card:
      role: "Product feature explanation surface"

      info: "White inner card sitting on a colored background (lavender, mint, butter, or sky), 16-20px radius, 24px padding. Contains icon container + heading + body. The card-to-background contrast is the entire visual effect — no shadow needed, just the color difference."

    floating_product_mockup:
      role: "Screenshot/dashboard preview card"

      info: "White card with a large browser-frame mockup, 32px+ radius (up to 44-48px on hero-class cards), sits on a pastel background. Carries the dramatic dark shadow stack (rgba(0,0,0,0.35) 0px 30px 80px 0px) — the most elevated element in the system. One per feature section."

    icon_container:
      role: "Category/feature icon wrapper"

      info: "Small rounded square (12-16px radius) with a pastel fill (mint, lavender, sky, butter), 24-32px padding, contains a simple line icon. Used inside feature cards and category selectors."

    pill_badge:
      role: "Inline tag, status, or highlight"

      info: "Pastel fill (mint, butter, sky, lavender) with a 1px border in the same hue family, 32px radius, 8px 14px padding, 14px Montreal Neue weight 500 Ink Black text. The outline-border treatment makes badges feel like stickers rather than blocks."

    category_selector_card:
      role: "Multi-choice benefits category picker"

      info: "White card on a pastel surface, 16px radius, 24px padding, contains a 3-column grid of icon containers. Each icon container holds a category icon (pet, health, travel, etc.) with a label below."

    testimonial_card:
      role: "Customer quote with photo"

      info: "Lavender Mist fill, 32-44px radius, split layout: left ~40% contains pull-quote text (large quote mark glyph, body copy, attribution), right ~60% contains a large candid portrait photo with 24px radius that breaks the card's right edge slightly. The photo extends beyond the card to create a 'peek' effect."

    trust_logo_bar:
      role: "Social proof strip"

      info: "White background, single row of 6-8 customer logos in grayscale, evenly distributed with generous horizontal spacing. No logo card backgrounds — logos sit directly on white. Sits between hero and first content section."

    stat_highlight_card:
      role: "Dashboard preview stat"

      info: "White card on a pastel background with a semi-circular gauge chart and metric list. Small inline pills ('You have X', 'Average impact: 680 days') use mint or butter pastel fills with 32px radius — mini version of the Pill Badge."

    section_divider:
      role: "Visual break between content bands"

      info: "No hard divider — sections are separated by switching pastel surface color and 80px vertical gap. The white-to-pastel-to-white rhythm is the divider."

  do_s_and_don_ts:

    do:
      - "Set headlines at 56px+ with line-height under 1.0 and tracking between -0.025em and -0.065em — this is the system's signature typographic move"
      - "Use Raspberry Pulse (#fd1774) exclusively for primary CTA fills and its companion shadow — never apply it to text, icons, or decorative elements"
      - "Apply 32px radius to all cards, images, and badges; 999px to all buttons and nav pills — no sharp corners anywhere"
      - "Let body copy breathe at 17px / line-height 1.43 with minimal tracking (-0.005em) — the contrast between airy body and tight headlines is the rhythm"
      - "Layer pastel surface washes (lavender, mint, butter, sky) behind white cards to create section hierarchy without shadows"
      - "Center content at 1200px max-width with 80px section gaps — spaciousness is part of the brand"
      - "Use Montreal Neue weight 500 for nav, buttons, and labels; weight 400 for body and descriptive text"
      - "Place the colored radial-gradient ambient glow on the hero and key feature areas to make white space feel lit"

    don_t:
      - "Don't introduce a second saturated color — the entire accent system hinges on Raspberry Pulse being the only hot hue"
      - "Don't set body text at display tracking (-0.04em or tighter) — tracking must scale with size"
      - "Don't use sharp 0-4px corner radii on cards or images — the system is uniformly round"
      - "Don't apply the Raspberry Pulse shadow to non-CTA elements — the colored shadow is reserved for the primary action"
      - "Don't use dark UI surfaces except for the auth button and intentional dark cards — light mode is structural"
      - "Don't set display type with line-height above 1.05 — the poster-tight stacking is essential"
      - "Don't add new fonts — Montreal Neue carries the system; Georgia is a one-off accent only"
      - "Don't use borders where a color contrast would work — the pastel-on-white relationship is cleaner than hairlines"
      - "Don't set display sizes below 56px when the text is a true headline — the scale jumps are intentional"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Default page background — pure white |"
    info: "| 1 | Lavender Surface | `#e5d6ff` | Hero and testimonial card backgrounds |"
    info: "| 1 | Mint Surface | `#e3f7d6` | Feature card backgrounds, body washes |"
    info: "| 1 | Butter Surface | `#fff1cd` | Warm section washes, warning-tinted cards |"
    info: "| 1 | Sky Surface | `#ddf5fb` | Cool section washes, info backgrounds |"
    info: "| 1 | Sand Surface | `#f4efe9` | Warm cream card backgrounds |"
    info: "| 2 | Card Surface | `#ffffff` | White cards sitting on pastel washes |"
    info: "| 3 | Dark Surface | `#171717` | Auth buttons, dark image overlays |"

  elevation:

    - "**Primary CTA Button:** `rgba(253, 23, 116, 0.6) 0px 14px 35px -18px`"
    - "**Floating Product Mockup Card:** `inset rgba(255, 255, 255, 0.08) 0px 1px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px -1px 0px 0px, rgba(0, 0, 0, 0.35) 0px 30px 80px 0px`"
    - "**Generic Elevated Element:** `rgba(17, 24, 39, 0.16) 0px 28px 52px 0px`"
    - "**Badge Outline:** `rgb(255, 241, 205) 0px 0px 0px 1px`"

  imagery:

    photography_dominates_the_visual_system: "candid, high-key lifestyle shots of diverse young adults laughing, working, and connecting — never staged corporate portraits. Images are tightly cropped, warm-toned, and arranged in 2x2 collages or as large breakout portraits that slightly exceed their card edges. Treatment is rounded (24px radius), never full-bleed, and the warm color grading harmonizes with the pastel surface washes. No illustrations, no abstract graphics, no product screenshots-as-marketing — when product UI appears, it sits inside a floating mockup card with a dramatic shadow. Iconography is line-based and minimal, living inside pastel rounded-square containers. Photography is the emotional engine; UI is the logic."

  layout:

    info: "Page model is max-width 1200px centered with generous side padding. The hero is a two-column split: lavender text card left (≈45% width) with a 2x2 photo collage right (≈55%), the bottom-left photo slightly overlapping the card to break the grid. Below the hero sits a single-row trust logo bar on white. Content sections alternate between pastel-wash backgrounds and white, each section using a 2-column layout (text left, floating mockup right) or single-column centered. Cards inside sections use white-on-pastel contrast rather than borders. Vertical rhythm is spacious — 80px between sections, 24px inside cards, 16px between elements. Navigation is a top white bar with pill-shaped utility controls; no sticky/sidebar patterns. The overall flow is: hero → trust → alternating feature bands (3-4 sections) → testimonial → footer."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #030712"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "accent (pastel surface): #e5d6ff"
    - "primary action: #fd1774 (filled action)"

    example_component_prompts:

    - "Create a Primary Action Button: #fd1774 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "*Floating product mockup*: White card (#ffffff), 32px radius, sitting on a mint (#e3f7d6) background. Contains a browser-frame UI mockup with the dark shadow stack: inset rgba(255,255,255,0.08) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px -1px 0px, rgba(0,0,0,0.35) 0px 30px 80px 0px. Padding 24px."

    - "*Testimonial card*: Lavender Mist (#e5d6ff) background, 32px radius, 40px padding. Two-column: left contains a quote mark glyph in Ink Black (#030712) at 48px, body quote at 19px weight 400 #030712, attribution at 14px weight 400 #6b7280. Right column contains a portrait photo at 24px radius that breaks the right card edge by ~20px."

    - "*Pill badge*: Butter Cream (#fff1cd) background with matching 1px #fff1cd border, 32px radius, 8px 14px padding. Text at 14px Montreal Neue weight 500 in #030712. Use for tags, status indicators, inline highlights."

    - "*Icon container*: Mint Cream (#e3f7d6) fill, 14px radius, 16px padding. Contains a line icon at 24px in #030712. Pair with a label below at 15px weight 500 #030712."

  typography_philosophy:

    info: "Montreal Neue is the single typeface. The defining contrast is between display and body: display sizes (56–104px) use line-heights of 0.90–0.98 with tracking pulled to -0.025em or tighter, creating poster-like density where lines almost touch. Body sizes (14–23px) use line-heights of 1.38–1.50 with tracking near zero, giving breathing room. Never interpolate — the gap between subheading (23px, lh 1.38) and heading-sm (28px, lh 1.05) is intentional, marking the transition from readable to sculptural. Weights are limited to 400 and 500; no bold exists in the system."

  similar_brands:

    - "**Headspace** — Same pastel-surface-on-white rhythm, soft rounded geometry, and warm candied color palette that signals wellness and care"
    - "**Maven** — Similar pill-shaped buttons, generous 32px+ card radii, and a single accent color used with restraint against soft backgrounds"
    - "**Linear** — Comparable typographic confidence — display sizes set with tight tracking and near-zero line-height to create density against airy surroundings"
    - "**Notion** — Shares the minimalist white canvas with selective pastel washes, pill controls, and the discipline of one typeface doing everything"
    - "**Wispr Flow** — Same approach to hero composition — pastel text card on one side, candid photo collage on the other, with the same warm/friendly tone"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-raspberry-pulse: #fd1774;
          --color-ink-black: #030712;
          --color-lavender-mist: #e5d6ff;
          --gradient-lavender-mist: linear-gradient(to top, rgb(231, 214, 255) 0%, oklab(0.902604 0.0325668 -0.0481643 / 0.85) 50%, rgba(0, 0, 0, 0) 100%);
          --color-mint-cream: #e3f7d6;
          --color-butter-cream: #fff1cd;
          --color-sky-wash: #ddf5fb;
          --color-sand-wash: #f4efe9;
          --color-carbon: #171717;
          --color-steel: #6b7280;
          --color-silver: #e5e7eb;
          --color-pure-white: #ffffff;
          --color-lime-zest: #64d71e;
          --color-teal-current: #4bb7cf;
        
          /* Typography — Font Families */
          --font-montreal-neue: 'Montreal Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-georgia: 'Georgia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.45;
          --tracking-caption: -0.07px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.08px;
          --text-subheading: 23px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.12px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -0.56px;
          --text-heading: 56px;
          --leading-heading: 0.98;
          --tracking-heading: -1.4px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 0.96;
          --tracking-heading-lg: -2.56px;
          --text-display: 80px;
          --leading-display: 0.92;
          --tracking-display: -4px;
          --text-display-xl: 104px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -6.76px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-84: 84px;
          --spacing-96: 96px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 44.8px;
          --radius-full: 48px;
          --radius-full-2: 57.6px;
          --radius-full-3: 999px;
        
          /* Named Radii */
          --radius-cards: 32px;
          --radius-badges: 32px;
          --radius-images: 24px;
          --radius-buttons: 999px;
          --radius-nav-pills: 999px;
          --radius-small-cards: 16px;
          --radius-feature-cards: 20px;
        
          /* Shadows */
          --shadow-xl: rgba(17, 24, 39, 0.16) 0px 28px 52px 0px;
          --shadow-subtle: rgb(255, 241, 205) 0px 0px 0px 1px;
          --shadow-xl-2: rgba(253, 23, 116, 0.6) 0px 14px 35px -18px;
          --shadow-subtle-2: rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.03) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.35) 0px 30px 80px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-lavender-surface: #e5d6ff;
          --surface-mint-surface: #e3f7d6;
          --surface-butter-surface: #fff1cd;
          --surface-sky-surface: #ddf5fb;
          --surface-sand-surface: #f4efe9;
          --surface-card-surface: #ffffff;
          --surface-dark-surface: #171717;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-raspberry-pulse: #fd1774;
          --color-ink-black: #030712;
          --color-lavender-mist: #e5d6ff;
          --color-mint-cream: #e3f7d6;
          --color-butter-cream: #fff1cd;
          --color-sky-wash: #ddf5fb;
          --color-sand-wash: #f4efe9;
          --color-carbon: #171717;
          --color-steel: #6b7280;
          --color-silver: #e5e7eb;
          --color-pure-white: #ffffff;
          --color-lime-zest: #64d71e;
          --color-teal-current: #4bb7cf;
        
          /* Typography */
          --font-montreal-neue: 'Montreal Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-georgia: 'Georgia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.45;
          --tracking-caption: -0.07px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.08px;
          --text-subheading: 23px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.12px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -0.56px;
          --text-heading: 56px;
          --leading-heading: 0.98;
          --tracking-heading: -1.4px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 0.96;
          --tracking-heading-lg: -2.56px;
          --text-display: 80px;
          --leading-display: 0.92;
          --tracking-display: -4px;
          --text-display-xl: 104px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -6.76px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-84: 84px;
          --spacing-96: 96px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 44.8px;
          --radius-full: 48px;
          --radius-full-2: 57.6px;
          --radius-full-3: 999px;
        
          /* Shadows */
          --shadow-xl: rgba(17, 24, 39, 0.16) 0px 28px 52px 0px;
          --shadow-subtle: rgb(255, 241, 205) 0px 0px 0px 1px;
          --shadow-xl-2: rgba(253, 23, 116, 0.6) 0px 14px 35px -18px;
          --shadow-subtle-2: rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.03) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.35) 0px 30px 80px 0px;
        }