chat_for_impact___style_reference:
  info: "> forest-green clinic with pastel rooms"

  theme: "light"

  info: "Turn.io runs on a warm, healthcare-optimistic visual system: a deep forest green acts as the dominant brand surface and hero canvas, while soft pastel washes (mint, lavender, peach, cream, sky) create section rhythm like colored rooms in a clinic. The single vivid coral CTA (#ff643b) is the only high-saturation action color and it sits on a near-monochrome field, so every 'Book a Call' reads as the obvious next step. Typography is DM Sans everywhere, pushed to enormous display sizes (69–116px) with tight negative tracking, which gives even the hero a conversational softness rather than corporate weight. Components stay flat and borderless — the system communicates through color blocks and 16–24px rounded cards, not shadows or chrome. Pastel feature cards and a lavender page canvas give the whole site a hand-drawn, almost editorial warmth, while the green hero and purple toolkit band inject the brand's two anchor colors at full saturation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canopy Green | `#0a3922` | `--color-canopy-green` | Hero canvas, dark section backgrounds, primary heading color on light backgrounds — establishes the dominant brand surface |"
    info: "| Coral Pulse | `#ff643b` | `--color-coral-pulse` | Primary action buttons, filled CTAs — the only warm high-saturation color in the system, creates urgency without aggression |"
    info: "| Indigo Bloom | `#460095` | `--color-indigo-bloom` | Toolkit section background overlay, secondary brand headings — anchors the purple-lavender pastel system |"
    info: "| Leaf Bright | `#1dbf73` | `--color-leaf-bright` | Green outline accent for tags, dividers, and focused UI edges |"
    info: "| Deep Teal | `#003642` | `--color-deep-teal` | Blue outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Orchid Tint | `#f3b3fe` | `--color-orchid-tint` | Decorative pink accent for badges, tag chips, and pink-section heading underlines |"
    info: "| Sky Signal | `#00b4dc` | `--color-sky-signal` | Cyan accent for icons, chart lines, and notification-style data visualization inside cards |"
    info: "| Aubergine | `#47264c` | `--color-aubergine` | Muted plum for body text on lavender backgrounds and plum-section headings — warm dark that pairs with #460095 |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary body text, borders, icon strokes — used aggressively for 1px dividers and outline icon set |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, text on dark backgrounds, nav background, white phone-mockup surfaces |"
    info: "| Ash | `#a6a6a6` | `--color-ash` | Mid-gray for secondary borders, placeholder text, disabled list items, icon strokes at reduced weight |"
    info: "| Slate | `#7a7a7a` | `--color-slate` | Body meta text, subtle list dividers, caption-tier typography |"
    info: "| Graphite | `#3d3d3d` | `--color-graphite` | Strong secondary text, icon strokes at full opacity, dark borders on light pastel cards |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Headlines on white/pastel surfaces, link text color when not using brand purple |"
    info: "| Frost Gray | `#e0e0e0` | `--color-frost-gray` | Hairline dividers, subtle card separators on white sections |"
    info: "| Cloud Gray | `#f2f2f2` | `--color-cloud-gray` | Neutral card surface when no pastel is appropriate, footer background, table stripes |"
    info: "| Lavender Mist | `#eee2ff` | `--color-lavender-mist` | Dominant page background canvas — the near-gray violet that sets the overall atmospheric tint of the site |"
    info: "| Mint Wash | `#d2f2e3` | `--color-mint-wash` | Green-tinted card and section background, pale green data viz fills |"
    info: "| Sky Wash | `#ccf0f8` | `--color-sky-wash` | Pale cyan card backgrounds, cooling counterpoint to the warm greens and corals |"
    info: "| Sage Wash | `#e4f7ee` | `--color-sage-wash` | Very pale green card surface, lighter than Mint Wash for secondary cards |"
    info: "| Lilac Wash | `#fdf0ff` | `--color-lilac-wash` | Pale lavender card background, pink-adjacent pastel |"
    info: "| Peach Wash | `#ffede8` | `--color-peach-wash` | Soft section background, alternate surface, and quiet card fill. Do not promote it to the primary CTA color |"
    info: "| Cream | `#faf7e8` | `--color-cream` | Warm cream card background, editorial yellow-tinted sections |"
    info: "| Sand | `#f4ece9` | `--color-sand` | Warm beige background variant, rarely used neutral surface |"

  tokens___typography:

    dm_sans___single_family_system___display_headlines_at_69_116px_weight_500_600_with_tight_tracking_create_the_editorial_feel__body_at_16_18px_weight_400__ui_at_14_16px_weight_500_600__the_same_font_handles_12px_captions_through_116px_display__which_is_the_signature__one_voice__enormous_dynamic_range__the_ss03_stylistic_set_is_enabled_site_wide_____font_dm_sans:
      - "**Substitute:** Inter, Manrope, or any geometric humanist sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 14, 16, 18, 20, 24, 32, 48, 52, 69, 72, 80, 116"
      - "**Line height:** 0.89, 1.00, 1.05, 1.10, 1.14, 1.17, 1.20, 1.30, 1.33, 1.38, 1.40"
      - "**Letter spacing:** -0.028em at display sizes (≥52px), -0.019em at 32–48px, normal at body sizes"
      - "**OpenType features:** `\"ss03\"`"
      - "**Role:** Single-family system — display headlines at 69–116px weight 500–600 with tight tracking create the editorial feel; body at 16–18px weight 400; UI at 14–16px weight 500–600. The same font handles 12px captions through 116px display, which is the signature: one voice, enormous dynamic range. The ss03 stylistic set is enabled site-wide."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.38 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.38 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.4 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.33 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.019px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.14 | -0.019px | `--text-heading-lg` |"
      info: "| display | 72px | 1.05 | -0.028px | `--text-display` |"
      info: "| display-xl | 116px | 0.89 | -0.028px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 24px |"
      info: "| icons | 8px |"
      info: "| buttons | 40px |"
      info: "| cards-sm | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    coral_filled_button:
      role: "Primary CTA — booking, conversion actions"

      info: "Background #ff643b, white text at 16px DM Sans weight 600, padding 12px 24px, border-radius 40px (fully pill-shaped). No border, no shadow. Sits as the only warm focal point against the green hero or lavender canvas."

    ghost_outline_button:
      role: "Secondary action paired beside the primary CTA"

      info: "Transparent background, 1px solid #ffffff border on dark hero / 1px solid #000000 on light sections, text 16px DM Sans weight 500, padding 12px 24px, border-radius 40px. Always accompanies the coral filled button as the lower-emphasis twin."

    outline_nav_button:
      role: "Right-side header CTA ('Book a Call' in nav)"

      info: "White background, 1px solid #000000 border, 14px DM Sans weight 500, padding 8px 20px, border-radius 40px. Smaller than hero CTAs; lives in the white nav bar against the green page top."

    pastel_feature_card:
      role: "2-column feature highlight in the middle section"

      info: "Tinted background cycling through #d2f2e3 (mint), #e4f7ee (sage), #ccf0f8 (sky), #faf7e8 (cream), #fdf0ff (lilac), #ffede8 (peach). Padding 32px, border-radius 24px, no border, no shadow. Headline 32px DM Sans weight 700 in #0a3922 or #003642, body 16px in #3d3d3d. Phone-mockup or chart graphic sits below text."

    white_product_card:
      role: "Active/selected feature card with embedded product UI"

      info: "White #ffffff background, padding 24px, border-radius 16px, optional 1px #e0e0e0 hairline. Contains a phone mockup or inline product screenshot. The product-UI surface is always white to keep the pastel card system from competing with actual content."

    checklist_feature_item:
      role: "Vertical feature list in the toolkit section (left column)"

      each_item: "small filled brand-colored icon (24px) on the left, 20px DM Sans weight 500 label in #0a3922, 8px gap between icon and text, 16px vertical spacing between items. Active item has a lavender #eee2ff background block wrapping the entire row with 16px border-radius."

    whatsapp_phone_mockup:
      role: "Hero product visualization on the right side of the hero"

      info: "Realistic phone-frame device with a dark green #0a3922 status-bar header, white #ffffff chat background, incoming chat bubbles in white with 1px #e0e0e0 border, outgoing bubbles in #dcf8c6 mint-green (WhatsApp canonical), sent-name labels in Leaf Bright #1dbf73. Sits as a layered card overlapping a portrait photo of a healthcare worker."

    sticky_bottom_notification:
      role: "Application deadline banner pinned to the bottom-right"

      info: "Dark green #0a3922 background, white text, 16px DM Sans weight 500, padding 16px 20px, border-radius 16px. Contains inline countdown blocks (24d/5h/1m/45s) in monospaced numbers, yellow #faf7e8 or coral #ff643b filled 'Apply now' mini-button, and a close-X in the top-right corner."

    logo_strip:
      role: "Partner logos band ('In partnership with')"

      info: "Centered cluster of monochrome partner logos (Meta, WHO, OpenAI, etc.) rendered at #3d3d3d on the dark green hero. Logo height ~24px, 48px horizontal gap between logos. Label text 12px DM Sans weight 500 in #a6a6a6 sits above the strip."

    pill_tag_chip:
      role: "Small label or category marker in body content"

      info: "Background tint of current section's pastel (e.g. #d2f2e3 on mint cards), 12px DM Sans weight 600, padding 4px 12px, border-radius 9999px, text in the section's dark heading color."

    top_navigation_bar:
      role: "Sticky site navigation"

      info: "White #ffffff background, full-width, horizontal flex with logo left, nav links center (Product, Community, Resources, Pricing), EN selector + Log in + outlined 'Book a Call' right. 14px DM Sans weight 500, #0a3922 link color, 32px vertical padding, no shadow."

    full_bleed_dark_hero:
      role: "Above-the-fold hero section"

      info: "Background #0a3922, full viewport width, 80px+ vertical padding. Left: headline at 69–80px DM Sans weight 500 white with 'WhatsApp' swapped to #1dbf73, body 18px in #d2f2e3, coral CTA + ghost button. Right: overlapping phone mockup + portrait photo composition with no visible card chrome."

  do_s_and_don_ts:

    do:
      - "Use DM Sans at every text size from 12px caption to 116px display — the single-family system is the signature; do not introduce a second typeface"
      - "Apply -0.028em letter-spacing at display sizes (≥52px) and -0.019em at 32–48px; body and smaller text uses normal tracking"
      - "Enable font-feature-settings: 'ss03' on every DM Sans instance"
      - "Use the pastel card rotation (#d2f2e3, #e4f7ee, #ccf0f8, #faf7e8, #fdf0ff, #ffede8) for feature card backgrounds — never use raw white or gray for these cards"
      - "Use #ff643b Coral Pulse exclusively for primary filled CTAs; pair every coral button with a ghost outline button beside it"
      - "Set border-radius to 40px on all buttons, 24px on feature cards, 16px on product/notification cards, 9999px on tag chips"
      - "Push headline sizes to 69–116px for hero and section openers; the large-display system is what makes the brand feel editorial rather than corporate"

    don_t:
      - "Do not use box-shadow for elevation — the system relies on color contrast and pastel surface changes; shadows break the flat editorial feel"
      - "Do not introduce a second typeface for headings or body; DM Sans is the single voice"
      - "Do not use #ff643b for anything other than primary action buttons — it is not a decorative accent"
      - "Do not use #000000 as a fill on dark green or lavender backgrounds — it creates harsh dead spots; use white or a pastel instead"
      - "Do not use sharp corners (border-radius 0–2px) on feature cards or buttons — the system is defined by soft 16–40px radii"
      - "Do not use more than one vivid accent color per section; coral CTA and Leaf Bright or Indigo Bloom should not appear simultaneously in the same viewport"
      - "Do not set body text below 14px or use gray-on-gray contrast — the system expects strong black #000000 or near-black #3d3d3d on light surfaces"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#eee2ff` | Dominant lavender-tinted page background that establishes atmospheric warmth |"
    info: "| 1 | Card Surface | `#ffffff` | White surface for phone mockups, product cards, and overlaid content blocks |"
    info: "| 2 | Pastel Card | `#d2f2e3` | Tinted feature cards cycling through mint, sky, sage, lilac, peach, cream for section variety |"
    info: "| 3 | Dark Brand Surface | `#0a3922` | Hero and dark band — full-bleed forest green for high-contrast headline moments |"

  elevation:

    info: "The system deliberately avoids drop shadows as elevation. Depth is created entirely through surface color shifts: lavender canvas → white card → pastel card → dark green band. The only shadow token in the data is rgba(0,0,0,0.05) 0px 1px 1px 0px, used at very low frequency (3 occurrences) for subtle form-field separation. Do not introduce multi-layer shadow stacks or colored glows — they would break the flat editorial surface treatment that defines the brand."

  imagery:

    info: "Photography is warm, human, and documentary: close-up portraits of healthcare workers (often women in scrubs) with natural skin tones and real-world clinic or community settings, never staged stock poses. Portraits are used in full-bleed or large rounded card crops, frequently overlapping product mockups on the right side of the hero and toolkit sections. Product visualizations are realistic WhatsApp phone-frame mockups with canonical chat-bubble colors (white incoming, #dcf8c6 outgoing, Leaf Bright #1dbf73 sender names), placed as layered floating cards rather than flat screenshots. There are no abstract gradient backgrounds, no 3D renders, and no decorative illustrations — the visual language is photo + product-screenshot only. Iconography is a monochrome outlined/flat-filled icon set in #0a3922 or #000000 at 20–24px, used for feature list bullets and card decorations. The green hero and lavender toolkit band use brand color as the entire atmospheric base rather than imagery."

  layout:

    info: "Full-bleed page with a lavender #eee2ff canvas and alternating brand-color bands: dark green hero (80px+ vertical padding, split text-left / visual-right with overlapping phone mockup + portrait), then a white feature band (centered headline, 2-column pastel card grid with 24px gap), then a lavender toolkit band (split text-left feature list / image-right portrait with green color overlay), then alternating pastel and white sections following a generous 64px section gap. The page max-width is approximately 1280px centered, with horizontal padding of ~80px on desktop. Navigation is a single sticky white top bar. A persistent bottom-right notification card overlays all sections. The layout breathes — section gaps are large, cards have 24px+ internal padding, and the dark-to-pastel-to-dark alternation creates clear room-like transitions rather than continuous flow."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (primary body), #3d3d3d (secondary), #7a7a7a (meta)"
    - "background: #eee2ff (page canvas), #ffffff (cards), #0a3922 (hero/dark bands)"
    - "border: #e0e0e0 (hairline), #a6a6a6 (mid), #000000 (strong)"
    - "accent: #1dbf73 (Leaf Bright for highlighted words), #460095 (Indigo Bloom for purple sections)"
    - "primary action: #ff643b (filled action)"

    example_component_prompts:

    - "**Full-bleed dark hero**: Background #0a3922, 80px vertical padding, max-width 1280px centered. Left column headline 'Turn WhatsApp into your Health App' at 80px DM Sans weight 500, white text, letter-spacing -0.028em, with the word 'WhatsApp' recolored to #1dbf73. Body 18px DM Sans weight 400 in #d2f2e3, max-width 480px. Coral CTA 'Book a Call' (#ff643b background, white 16px weight 600, padding 12px 24px, radius 40px) + ghost button 'Take a tour' (transparent, 1px #ffffff border, 16px weight 500, padding 12px 24px, radius 40px). Right column: WhatsApp phone mockup (phone frame, #0a3922 header bar, white chat area) overlapping a portrait photo of a healthcare worker, no shadow."

    - "**Pastel feature card**: Background #d2f2e3 (rotate through #e4f7ee, #ccf0f8, #faf7e8, #fdf0ff, #ffede8 per card), padding 32px, border-radius 24px, no border, no shadow. Headline 'Cut no-shows by 40%' at 32px DM Sans weight 700 in #0a3922, letter-spacing -0.019em. Body 16px DM Sans weight 400 in #3d3d3d. Below text: a white phone-mockup card (#ffffff, 16px radius) showing a WhatsApp conversation about appointment rescheduling."

    - "**Lavender toolkit section**: Background #eee2ff with a 30% #460095 overlay wash or full-bleed lavender variant. Section gap 64px. Left column: vertical list of 4 features, each a 24px filled #460095 icon + 20px DM Sans weight 500 label in #0a3922, with the active item wrapped in a #ffffff block with 16px radius. Right column: full-bleed portrait photo of a smiling woman in scrubs with a Leaf Bright #1dbf73 diagonal color overlay at 40% opacity."

    - "**Sticky bottom notification card**: Position fixed bottom-right, 24px from edges. Background #0a3922, padding 16px 20px, border-radius 16px. Title 'II chat for Health Accelerator' at 16px DM Sans weight 600 in white. Subtitle 'Application deadline May 31' at 14px weight 400 in #d2f2e3. Inline countdown: four 32px-tall blocks (24d, 5h, 1m, 45s) with 12px DM Sans weight 600 in #a6a6a6. Right: filled 'Apply now' button in #faf7e8 cream, 14px #0a3922 text, padding 8px 16px, radius 40px. Close X in top-right at #a6a6a6, 16px tap target."

    - "**Pastel card heading with colored word**: On a #fdf0ff lavender card, headline 'Your entire digital patient journey toolkit' at 48px DM Sans weight 500 in #460095, letter-spacing -0.019em, with no color swap needed since the base color already carries the brand. The first word is bold (weight 700) in #460095 at 52px, creating a two-tone inline emphasis pattern."

  similar_brands:

    - "**Ada Health** — Same warm pastel card grid over a near-white canvas, large humanist-sans headlines, and a single warm accent for CTAs"
    - "**Headspace Health** — Shared use of full-bleed brand-colored hero bands followed by soft pastel feature cards, and a gentle rounded sans-serif at enormous display sizes"
    - "**Sana Health** — Identical split hero composition (text left, phone-mockup + portrait right) and the same flat-borderless card system on tinted pastel surfaces"
    - "**Babylon Health** — Healthcare-tech aesthetic with DM Sans/Inter-class headlines, pastel green and blue feature card rotation, and photo-of-clinicians imagery treatment"
    - "**Calendly** — Single coral/orange filled CTA paired with a ghost outline secondary button, and a white nav bar with outlined pill CTA as the persistent right-side action"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canopy-green: #0a3922;
          --color-coral-pulse: #ff643b;
          --color-indigo-bloom: #460095;
          --color-leaf-bright: #1dbf73;
          --color-deep-teal: #003642;
          --color-orchid-tint: #f3b3fe;
          --color-sky-signal: #00b4dc;
          --color-aubergine: #47264c;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-ash: #a6a6a6;
          --color-slate: #7a7a7a;
          --color-graphite: #3d3d3d;
          --color-charcoal: #333333;
          --color-frost-gray: #e0e0e0;
          --color-cloud-gray: #f2f2f2;
          --color-lavender-mist: #eee2ff;
          --color-mint-wash: #d2f2e3;
          --color-sky-wash: #ccf0f8;
          --color-sage-wash: #e4f7ee;
          --color-lilac-wash: #fdf0ff;
          --color-peach-wash: #ffede8;
          --color-cream: #faf7e8;
          --color-sand: #f4ece9;
        
          /* Typography — Font Families */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --text-body: 16px;
          --leading-body: 1.38;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.019px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.019px;
          --text-display: 72px;
          --leading-display: 1.05;
          --tracking-display: -0.028px;
          --text-display-xl: 116px;
          --leading-display-xl: 0.89;
          --tracking-display-xl: -0.028px;
        
          /* 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-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 24px;
          --radius-icons: 8px;
          --radius-buttons: 40px;
          --radius-cards-sm: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #eee2ff;
          --surface-card-surface: #ffffff;
          --surface-pastel-card: #d2f2e3;
          --surface-dark-brand-surface: #0a3922;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canopy-green: #0a3922;
          --color-coral-pulse: #ff643b;
          --color-indigo-bloom: #460095;
          --color-leaf-bright: #1dbf73;
          --color-deep-teal: #003642;
          --color-orchid-tint: #f3b3fe;
          --color-sky-signal: #00b4dc;
          --color-aubergine: #47264c;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-ash: #a6a6a6;
          --color-slate: #7a7a7a;
          --color-graphite: #3d3d3d;
          --color-charcoal: #333333;
          --color-frost-gray: #e0e0e0;
          --color-cloud-gray: #f2f2f2;
          --color-lavender-mist: #eee2ff;
          --color-mint-wash: #d2f2e3;
          --color-sky-wash: #ccf0f8;
          --color-sage-wash: #e4f7ee;
          --color-lilac-wash: #fdf0ff;
          --color-peach-wash: #ffede8;
          --color-cream: #faf7e8;
          --color-sand: #f4ece9;
        
          /* Typography */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --text-body: 16px;
          --leading-body: 1.38;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.019px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.019px;
          --text-display: 72px;
          --leading-display: 1.05;
          --tracking-display: -0.028px;
          --text-display-xl: 116px;
          --leading-display-xl: 0.89;
          --tracking-display-xl: -0.028px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
        }