windsurf___style_reference:
  info: "> Midnight aurora command center — a deep navy terminal where a single mint teal action glows and a chromatic ribbon is the only permitted spectacle."

  theme: "dark"

  info: "Windsurf's visual system is a midnight IDE that walked out into a marketing site: deep navy canvas (#011c42) with one bioluminescent teal accent (#34e8bb) that makes every action glow against the dark. Display headlines use tomatoGrotesk at weight 300 — size does the heavy lifting while weight stays whisper-thin, an anti-convention choice that creates authority through restraint. An aurora ribbon (blue→purple→pink gradient) sweeps across the hero as the sole moment of color spectacle; everywhere else the palette stays disciplined. Components lean pill-shaped (9999px) for actions and gently squared (6px) for cards, with shadows used sparingly because contrast on the dark canvas already creates depth."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Navy | `#011c42` | `--color-midnight-navy` | Page background, section canvas, footer — the dominant surface that gives the entire site its terminal-like confidence |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Primary text on dark surfaces, icon strokes, card text in light contexts |"
    info: "| Obsidian | `#0b100f` | `--color-obsidian` | Near-black text for light-context sections, logo mark, high-contrast headings |"
    info: "| Warm Sand | `#f8f1e5` | `--color-warm-sand` | Secondary text on dark surfaces, warm accent surface, card borders in light contexts — adds cream warmth that prevents the dark UI from feeling sterile |"
    info: "| Silver Mist | `#c0c1c6` | `--color-silver-mist` | Hairline borders, dividers, subtle separator strokes — the dominant neutral structural line (5200+ occurrences) |"
    info: "| Pewter | `#c5beb2` | `--color-pewter` | Box-shadow tone, muted accents on cream surfaces |"
    info: "| Bioluminescent Teal | `#34e8bb` | `--color-bioluminescent-teal` | Primary action — filled CTA buttons (Download), in-text links, nav accent, active states. The single chromatic color permitted to carry interactive meaning; glows against midnight navy |"
    info: "| Deep Teal | `#003326` | `--color-deep-teal` | Text on teal surfaces, dark-mode button color variant |"
    info: "| Lavender Mist | `#a95af8` | `--color-lavender-mist` | Card backgrounds, feature card fills, decorative chip backgrounds — provides purple dimension in card grids |"
    info: "| Bubblegum | `#fb9ce5` | `--color-bubblegum` | Outlined/ghost action borders, accent text, icon fills, pill button outlines — the secondary accent that complements teal in interactive components |"
    info: "| Plum Wine | `#43045e` | `--color-plum-wine` | Deep purple card surface variant, layered card backgrounds |"
    info: "| Soft Blush | `#ffccf3` | `--color-soft-blush` | Light pink card backgrounds, soft accent surface |"
    info: "| Cosmic Blue | `#006aff` | `--color-cosmic-blue` | Card accent fills, decorative stroke accent |"
    info: "| Plum Statement | `#5c0047` | `--color-plum-statement` | Magenta text and headings in accent contexts, feature highlight copy |"

  tokens___typography:

    tomatogrotesk___display_headlines_only__the_weight_300_at_64_96px_is_the_signature_choice___most_marketing_sites_use_600_700_for_display__this_system_lets_size_carry_authority_and_keeps_weight_whisper_thin__used_for_hero__where_developers_are_doing_their_best_work__section_titles__cascade___devin__and_feature_headings_____font_tomatogrotesk:
      - "**Substitute:** Inter (weight 300) or Söhne Breit"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 40px, 48px, 64px, 72px, 96px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -1.08px at 40px, -0.576px at 48px, -0.576px at 64px, -0.864px at 96px"
      - "**Role:** Display headlines only. The weight 300 at 64-96px is the signature choice — most marketing sites use 600-700 for display; this system lets size carry authority and keeps weight whisper-thin. Used for hero ('Where developers are doing their best work'), section titles ('Cascade', 'Devin'), and feature headings."

    dm_sans___body_text__subheadings__navigation__buttons__list_items__card_content__the_workhorse_font___comfortable_geometric_sans_with_moderate_negative_tracking_that_tightens_the_feel_without_sacrificing_readability_____font_dm_sans:
      - "**Substitute:** Inter or Söhne"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 10px, 12px, 14px, 16px, 18px, 20px, 28px, 40px"
      - "**Line height:** 1.00, 1.30, 1.33, 1.50, 1.56, 1.71, 2.40"
      - "**Letter spacing:** -0.45px at 10px, -0.26px at 12px, -0.31px at 14px, -0.34px at 16px, -0.36px at 18px, -0.4px at 20px, -0.56px at 28px, -0.8px at 40px"
      - "**Role:** Body text, subheadings, navigation, buttons, list items, card content. The workhorse font — comfortable geometric sans with moderate negative tracking that tightens the feel without sacrificing readability."

    dm_mono___code_adjacent_labels__beta_badges__nav_micro_text__technical_annotations__the_monospace_signals__developer_tool____its_0_05em_positive_tracking_on_caps_reads_as_technical_precise__a_deliberate_contrast_to_the_whisper_thin_display_weight_____font_dm_mono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px, 18px"
      - "**Line height:** 1.20, 1.43, 1.56, 1.71"
      - "**Letter spacing:** 0.6px at 12px, 0.7px at 14px (0.05em positive tracking for uppercase usage)"
      - "**Role:** Code-adjacent labels, BETA badges, nav micro-text, technical annotations. The monospace signals 'developer tool' — its 0.05em positive tracking on caps reads as technical/precise, a deliberate contrast to the whisper-thin display weight."

    ui_sans_serif___system_fallback_for_browser_default_rendering_and_any_text_not_covered_by_the_primary_fonts__sparse_usage___the_custom_fonts_carry_the_brand_____font_ui_sans_serif:
      - "**Substitute:** system-ui, -apple-system, sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.43, 1.50"
      - "**Role:** System fallback for browser-default rendering and any text not covered by the primary fonts. Sparse usage — the custom fonts carry the brand."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.3 | 0.5px | `--text-caption` |"
      info: "| body | 16px | 1.56 | -0.34px | `--text-body` |"
      info: "| body-lg | 18px | 1.71 | -0.38px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.5 | -0.42px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.33 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.3 | -0.8px | `--text-heading` |"
      info: "| heading-lg | 48px | 1 | -0.58px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -0.65px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 6px |"
      info: "| badges | 9999px |"
      info: "| inputs | 6px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.2)...` | `--shadow-md` |"
      info: "| subtle | `rgba(52, 211, 153, 0.5) 0px 1px 2px 0px` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.2) 0...` | `--shadow-sm` |"
      info: "| subtle-2 | `rgba(251, 191, 36, 0.5) 0px 1px 2px 0px` | `--shadow-subtle-2` |"
      info: "| md-2 | `rgba(0, 0, 0, 0.22) 0px 4px 16px 0px, rgba(0, 0, 0, 0.14)...` | `--shadow-md-2` |"
      info: "| subtle-3 | `rgb(251, 156, 229) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 12px"

  components:

    primary_cta_button_pill:
      role: "Main download / conversion action in hero and nav"

      info: "Filled teal (#34e8bb) background, deep teal (#003326) text, 9999px border-radius, 12px 24px padding, DM Sans weight 600 at 16px. Carries a 0px 4px 16px rgba(0,0,0,0.22) box-shadow for lift. The only filled chromatic button — instantly identifiable as the primary action across the entire site."

    secondary_ghost_button_pill:
      role: "Secondary action paired with primary CTA"

      info: "Transparent or near-transparent background with #ffffff text and a subtle white-on-navy border, 9999px radius, 12px 24px padding, DM Sans weight 500. Sits beside the teal Download button as a lower-commitment option."

    in_text_action_link:
      role: "Inline section links like 'EXPLORE THE FEATURES →' and 'LEARN ABOUT DEVIN →'"

      info: "Bioluminescent teal (#34e8bb) color, DM Sans weight 500 at 12-14px, uppercase, 0.05em letter-spacing, trailing arrow glyph. The wide tracking + teal is the signature pattern for scroll/navigation cues in body copy."

    feature_badge_beta_tag:
      role: "Release announcement badge above hero headline"

      info: "Subtle surface background with a small dot icon and text. DM Mono at 12px, uppercase, 0.05em tracking. Pill-shaped at 9999px radius. Sits as a compact pre-headline annotation, not a call-to-action."

    top_navigation_bar:
      role: "Primary site navigation with logo, menu items, user icon, and persistent download CTA"

      info: "Transparent or matching midnight navy background. Logo left, center menu with dropdown indicators, user icon in a thin circle outline (32px), and a teal Download pill button right. 12px DM Sans menu items, 6px gap between items."

    hero_headline_block:
      role: "Primary page headline with supporting badge and dual CTAs"

      info: "BETA badge → tomatoGrotesk weight 300 at 64-72px, white (#ffffff), letter-spacing -0.65px. Two-line layout, left-aligned. Subtitle in DM Sans 18px weight 400 at 1.71 line-height in #ffffff or warm sand. Paired CTA row: teal primary + ghost secondary, 12px gap between them."

    section_heading_block:
      role: "Feature section titles like 'Cascade' and 'Devin'"

      info: "Centered layout. Eyebrow link in teal DM Sans 12px uppercase (0.05em tracking). tomatoGrotesk weight 300 at 48-64px, white, centered. Description paragraph in DM Sans 16px at 1.56 line-height, max-width ~640px."

    two_column_feature_row:
      role: "Below-section content layout (left heading / right description + link)"

      info: "Thin silver (#c0c1c6) horizontal divider on top at 1px. Two columns at roughly 1:1 ratio with 32px gap. Left: tomatoGrotesk weight 400 at 28-40px heading. Right: DM Sans body copy with teal in-text action link below."

    client_logo_strip:
      role: "Social proof band of trusted-by logos"

      info: "Horizontal row of grayscale corporate logos (Cisco, Mercado Libre, Dell, VMware, etc.), evenly spaced, white or light gray on midnight navy. Logos sit at uniform height (~28-32px) with consistent vertical alignment. No card backgrounds or dividers between them."

    aurora_ribbon_decoration:
      role: "Hero decorative element — the signature visual spectacle"

      info: "Flowing wave/ribbon SVG on the right side of the hero. Gradient transitions through blue → purple → pink (#006aff → #a95af8 → #fb9ce5). Partial opacity where it exits the frame. Anchored right, extends beyond viewport."

    product_preview_surface:
      role: "Placeholder for product screenshots/visuals in feature sections"

      info: "Rounded rectangle (6px) in a slightly lighter navy than the canvas, containing product imagery. Functions as a 'window' into the IDE. Should feel embedded in the page, not floating."

  do_s_and_don_ts:

    do:
      - "Set every page and section background to #011c42 (Midnight Navy) — the dark canvas is the brand identity"
      - "Use #34e8bb (Bioluminescent Teal) exclusively for primary actions and in-text navigation links — it is the only chromatic color permitted to carry interactive meaning"
      - "Set all display headlines to tomatoGrotesk at weight 300 — let the size (48-96px) carry authority, never the weight"
      - "Use 9999px border-radius for all buttons, badges, and tags — the pill shape is the signature button form"
      - "Use 6px border-radius for cards, inputs, and product preview surfaces"
      - "Apply the aurora ribbon (blue→purple→pink gradient flow) as the sole moment of color spectacle in hero/feature sections"
      - "Set body text to DM Sans at 16px / 1.56 line-height with -0.34px letter-spacing for comfortable reading density"

    don_t:
      - "Never use weight 600+ for display headlines — the whisper-thin 300 is the signature choice; bold display would betray the system"
      - "Never add multiple chromatic accent colors to a single component — the palette is disciplined: teal for action, everything else is neutral or surface"
      - "Never use a white or light-gray page background — the dark canvas is the brand; light sections would feel like a different site"
      - "Never apply heavy drop shadows (opacity > 0.25) to most elements — depth comes from contrast on dark, not from elevation stacks"
      - "Never use square (0px) or large (>12px) border-radius on buttons — pill (9999px) is the only correct button radius"
      - "Never use system fonts for display — tomatoGrotesk (or its substitute) is required for headlines; the geometric character is load-bearing"
      - "Never put the aurora gradient on buttons, text, or interactive elements — it is decorative-only, confined to hero ribbons and large background art"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Canvas | `#011c42` | Full-bleed page background — every section sits on this navy |"
    info: "| 1 | Lifted Navy | `#14376` | Gradient endpoint for elevated sections and hero background transition |"
    info: "| 2 | Cream Surface | `#f8f1e5` | Warm card surface, light-context section alternative |"
    info: "| 3 | Accent Card | `#a95af8` | Colored card backgrounds for feature highlights |"

  elevation:

    - "**Primary CTA Button:** `rgba(0, 0, 0, 0.22) 0px 4px 16px 0px, rgba(0, 0, 0, 0.14) 0px 1px 3px 0px`"
    - "**Elevated Card / Overlay:** `rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.2) 0px 4px 6px -4px`"
    - "**Standard Card:** `rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.2) 0px 2px 4px -2px`"

  imagery:

    info: "The site uses no photography. Visual language is built from three sources: (1) a flowing aurora ribbon — an SVG gradient wave transitioning blue → purple → pink that sweeps across the hero and lower sections, the sole moment of color spectacle; (2) a grayscale client logo strip (Cisco, Dell, VMware, etc.) for social proof, rendered flat at uniform height with no card backgrounds; (3) product preview surfaces — rounded rectangles in slightly lifted navy that act as windows into the IDE, to be filled with actual product screenshots. The brand mark ('W' for Windsurf) is a simple geometric wind/leaf glyph in white. Icons throughout are line-based, thin-stroke (1-1.5px), monochrome white or teal. The visual density is text-dominant: imagery occupies <15% of any screen, with the aurora ribbon doing the heavy atmospheric lifting."

  layout:

    info: "Full-bleed dark sections, max-width 1280px for content containers. The hero is a split composition: large left-aligned headline (tomatoGrotesk 72px weight 300) with badge → headline → dual CTAs → micro-bullet text, balanced against a decorative aurora ribbon anchored to the right edge that extends beyond the viewport. Navigation is a transparent top bar with logo left, centered menu, user-icon + teal Download pill right. A grayscale client logo strip sits as a horizontal band between the hero and first feature. Feature sections follow a consistent vertical rhythm: eyebrow teal link → centered tomatoGrotesk heading → centered description → thin silver divider → 2-column row (heading left, body+action link right) → product preview surface. Section gaps are generous (80px) to let the dark canvas breathe. The page reads as a single continuous dark environment rather than discrete cards stacked on a light background."

  agent_prompt_guide:

  quick_color_reference:
    - "background: #011c42 (Midnight Navy)"
    - "text: #ffffff (Canvas White)"
    - "border: #c0c1c6 (Silver Mist)"
    - "accent: #34e8bb (Bioluminescent Teal)"
    - "surface accent: #a95af8 (Lavender Mist)"
    - "primary action: #34e8bb (filled action)"

  example_component_prompts:

    1__hero_headline_block:
    create_a_primary_action_button: "#34e8bb background, #0b100f text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    2__section_heading___two_column_row:
    info: "Create a feature section on #011c42. Eyebrow: DM Sans 12px uppercase, 0.05em tracking, #34e8bb, centered. Heading: tomatoGrotesk weight 300, 64px, #ffffff, centered, letter-spacing -0.58px. Description: DM Sans 16px weight 400, line-height 1.56, #ffffff, max-width 640px, centered. Thin 1px #c0c1c6 divider below. Two-column row with 32px gap: left column has tomatoGrotesk weight 400, 40px, #ffffff heading; right column has DM Sans 16px body text with a teal in-text action link below reading 'EXPLORE FEATURES →' in DM Sans 12px uppercase, 0.05em tracking, #34e8bb."

    3__primary_cta_pill_button:
    filled_teal_pill_button: "background #34e8bb, text #003326, font DM Sans weight 600 size 16px, padding 12px 24px, border-radius 9999px, box-shadow rgba(0,0,0,0.22) 0px 4px 16px, rgba(0,0,0,0.14) 0px 1px 3px. No border. This is the only filled chromatic button pattern on the site."

    4__ghost_secondary_button:

    5__client_logo_strip:
    info: "Horizontal row of 8-10 grayscale client logos (32px height) on #011c42 background. Logos rendered in #ffffff or #c0c1c6 (no color), evenly distributed with flexbox justify-content: space-between, max-width 1280px, vertically centered, 40px vertical padding above and below. No card backgrounds, no dividers between logos."

  rainbow_accent_palette_decorative_only:

    info: "The site also includes a set of vivid decorative stroke colors that appear in SVG illustrations and icon accents: #ff0000 (red), #9500ff (violet), #ff5d00 (orange), #fffb00 (yellow), #00f70c (green), #ff00d5 (pink). These are NEVER to be used for text, buttons, or functional UI — they exist only as decorative SVG strokes for illustrations and graphical accents. If an illustration calls for a rainbow effect, pull from this set. If the design needs a functional color, use the disciplined teal/pink/lavender system from the core palette."

  similar_brands:

    - "**Linear** — Same midnight dark canvas with a single vivid accent for primary actions, and the same whisper-thin large display headlines that use size over weight for authority"
    - "**Cursor** — Direct AI-coding-tool peer with the same dark IDE-derived palette, teal/green interactive accent, and developer-centric typographic confidence"
    - "**Vercel** — Shares the full-bleed dark section model with gradient depth, generous vertical spacing between sections, and a disciplined single-accent-color system"
    - "**Arc Browser** — Same dark-canvas product aesthetic with aurora-like gradient ribbons as decorative spectacle against otherwise disciplined chromatic restraint"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-navy: #011c42;
          --color-canvas-white: #ffffff;
          --color-obsidian: #0b100f;
          --color-warm-sand: #f8f1e5;
          --color-silver-mist: #c0c1c6;
          --color-pewter: #c5beb2;
          --color-bioluminescent-teal: #34e8bb;
          --color-deep-teal: #003326;
          --color-lavender-mist: #a95af8;
          --color-bubblegum: #fb9ce5;
          --color-plum-wine: #43045e;
          --color-soft-blush: #ffccf3;
          --color-cosmic-blue: #006aff;
          --color-plum-statement: #5c0047;
        
          /* Typography — Font Families */
          --font-tomatogrotesk: 'tomatoGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.5px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.34px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.71;
          --tracking-body-lg: -0.38px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.42px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.56px;
          --text-heading: 40px;
          --leading-heading: 1.3;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.58px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.65px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --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-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-144: 144px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-badges: 9999px;
          --radius-inputs: 6px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.2) 0px 4px 6px -4px;
          --shadow-subtle: rgba(52, 211, 153, 0.5) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.2) 0px 2px 4px -2px;
          --shadow-subtle-2: rgba(251, 191, 36, 0.5) 0px 1px 2px 0px;
          --shadow-md-2: rgba(0, 0, 0, 0.22) 0px 4px 16px 0px, rgba(0, 0, 0, 0.14) 0px 1px 3px 0px;
          --shadow-subtle-3: rgb(251, 156, 229) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-midnight-canvas: #011c42;
          --surface-lifted-navy: #14376;
          --surface-cream-surface: #f8f1e5;
          --surface-accent-card: #a95af8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-navy: #011c42;
          --color-canvas-white: #ffffff;
          --color-obsidian: #0b100f;
          --color-warm-sand: #f8f1e5;
          --color-silver-mist: #c0c1c6;
          --color-pewter: #c5beb2;
          --color-bioluminescent-teal: #34e8bb;
          --color-deep-teal: #003326;
          --color-lavender-mist: #a95af8;
          --color-bubblegum: #fb9ce5;
          --color-plum-wine: #43045e;
          --color-soft-blush: #ffccf3;
          --color-cosmic-blue: #006aff;
          --color-plum-statement: #5c0047;
        
          /* Typography */
          --font-tomatogrotesk: 'tomatoGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.5px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.34px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.71;
          --tracking-body-lg: -0.38px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.42px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.56px;
          --text-heading: 40px;
          --leading-heading: 1.3;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.58px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.65px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-144: 144px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.2) 0px 4px 6px -4px;
          --shadow-subtle: rgba(52, 211, 153, 0.5) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.2) 0px 2px 4px -2px;
          --shadow-subtle-2: rgba(251, 191, 36, 0.5) 0px 1px 2px 0px;
          --shadow-md-2: rgba(0, 0, 0, 0.22) 0px 4px 16px 0px, rgba(0, 0, 0, 0.14) 0px 1px 3px 0px;
          --shadow-subtle-3: rgb(251, 156, 229) 0px 0px 0px 1px inset;
        }