aqua_voice___style_reference:
  info: "> Whisper on paper — ultra-light type resting on near-white with a single blue drop of color"

  theme: "light"

  info: "Aqua speaks in a typographic whisper on near-white surfaces. PP Neue Montreal at weight 200 for headlines is the signature — text that feels etched rather than printed, gaining authority through restraint instead of volume. The palette is 99% achromatic: a paper-white canvas, a tight ladder of cool grays for text, and a single vivid sky blue that appears only as functional punctuation for the download CTA, link accents, and the tiny 'now live' dot. Surfaces are flat with hairline borders and almost imperceptible shadows; the only elevation is a millimeter of rgba(0,0,0,0.02) depth. Components are compact and utilitarian — small radii, tight padding, ghost controls — but the page breathes with generous vertical rhythm between sections. Layout centers text in wide single-column blocks rather than fighting for grid space, and a large product screenshot in a soft 20px card anchors the second screen."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Sky Signal | `#67beff` | `--color-sky-signal` | Blue action color for filled buttons, selected navigation states, and focused conversion moments |"
    info: "| Electric Iris | `#4288ff` | `--color-electric-iris` | Outlined/ghost action border, inline link accent, focus rings — cooler and slightly deeper than Sky Signal |"
    info: "| Paper White | `#fafbfc` | `--color-paper-white` | Page canvas, primary surface, inverted text on dark bars |"
    info: "| Mist | `#f3f7fa` | `--color-mist` | Subtle band backgrounds, section alternation, elevated surface tint |"
    info: "| Fog | `#f2f6fa` | `--color-fog` | Card surface, soft fill behind product screenshots |"
    info: "| Linen | `#e5e8ec` | `--color-linen` | Hairline dividers, faint borders, disabled surfaces |"
    info: "| Ash | `#efefef` | `--color-ash` | Ghost button background, subtle hover fill |"
    info: "| Inkstone | `#292c3d` | `--color-inkstone` | Primary text, strongest contrast — carries the 200-weight headlines |"
    info: "| Slate | `#3e4150` | `--color-slate` | Body text, secondary headings, dense body copy |"
    info: "| Pewter | `#686a76` | `--color-pewter` | Muted body text, helper text, inactive nav |"
    info: "| Graphite | `#7d7e7e` | `--color-graphite` | Tertiary text, footer links, faint labels |"
    info: "| Silver | `#c2c3c8` | `--color-silver` | Placeholder text, very faint borders, decorative strokes |"
    info: "| Obsidian | `#171719` | `--color-obsidian` | Top announcement bar background, dark surface, inverted text fill |"
    info: "| Midnight | `#1e1e20` | `--color-midnight` | Dark card surface, secondary dark fill |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    pp_neue_montreal___primary_typeface___weight_200_for_display_and_headlines_anti_convention__most_sites_use_600_700__this_whisper_weight_gains_authority_through_restraint__weight_400_for_body_and_subheadings__custom_pangram_pangram_face_with_polish_alternates_and_character_variants_____font_pp_neue_montreal:
      - "**Substitute:** Inter (200, 400) or Söhne Buch"
      - "**Weights:** 200, 400"
      - "**Sizes:** 13px, 14px, 15px, 16px, 17px, 20px, 24px, 40px, 56px, 60px, 72px"
      - "**Line height:** 1.00, 1.10, 1.20, 1.40, 1.50, 1.60"
      - "**Letter spacing:** normal across all sizes — no tracking adjustment"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Role:** Primary typeface — weight 200 for display and headlines (anti-convention; most sites use 600-700, this whisper-weight gains authority through restraint), weight 400 for body and subheadings. Custom Pangram Pangram face with Polish alternates and character variants."

    pp_neue_montreal___medium_cut_for_ui_controls__buttons__nav_links__and_small_labels_where_the_book_weight_feels_too_quiet_to_anchor_interaction____font_pp_neue_montreal:
      - "**Substitute:** Inter Medium (500)"
      - "**Weights:** 400, 500"
      - "**Sizes:**"
      - "**Line height:** 1.00, 1.10, 1.20, 1.40, 1.50, 1.60"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Role:** Medium cut for UI controls, buttons, nav links, and small labels where the Book weight feels too quiet to anchor interaction"

    inter___system_level_fallback_and_small_ui_text___nav_micro_labels__metadata__the_smallest_body_sizes____font_inter:
      - "**Substitute:** system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10px, 11px, 12px, 20px"
      - "**Line height:** 1.00, 1.10, 1.20, 1.40, 1.50, 1.60"
      - "**Letter spacing:** normal"
      - "**Role:** System-level fallback and small UI text — nav micro-labels, metadata, the smallest body sizes"

    geist_mono___monospaced_face_for_keyboard_hints_the_hold_space_key_chips__code__and_technical_micro_labels____font_geist_mono:
      - "**Substitute:** IBM Plex Mono, JetBrains Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 11px, 13px, 14px, 18px"
      - "**Line height:** 1.00, 1.40, 1.60"
      - "**Role:** Monospaced face for keyboard hints (the Hold/Space key chips), code, and technical micro-labels"

    ibm_plex_mono___ibm_plex_mono___detected_in_extracted_data_but_not_described_by_ai____font_ibm_plex_mono:
      - "**Weights:** 400"
      - "**Sizes:** 10px, 13px"
      - "**Line height:** 1.2"
      - "**Role:** IBM Plex Mono — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 1.1 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 124 | 124px | `--spacing-124` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12-20px |"
      info: "| icons | 4px |"
      info: "| pills | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| decorative | 30-70px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.02) 0px 0px 0px 2px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0...` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgb(52, 52, 52) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06...` | `--shadow-subtle-5` |"

    layout:

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

  components:

    announcement_bar:
      role: "Top utility strip"

      info: "Full-bleed Obsidian (#171719) bar, ~40px tall, centered white text at 12px PP Neue Montreal Book, contains an inline 'Download' link underlined. Used for release announcements and live-status notices."

    primary_navigation:
      role: "Top site nav"

      info: "White background, no border or shadow. Left: wordmark 'AQUA' at 16px PP Neue Montreal Medium 500, uppercase tracking. Right: nav links (Pricing, User Guide, Blog, Changelog, API, Download iOS) at 14px weight 400 in Slate, followed by a filled CTA. Generous horizontal padding ~24px."

    filled_cta_button:
      role: "Primary action"

      info: "Sky Signal (#67beff) background, white text, 8px radius, padding 10px 16px, PP Neue Montreal Medium 500 at 14px. The only saturated fill in the system — its rarity makes it the unmistakable action signal. No border, no shadow."

    ghost_button:
      role: "Secondary action"

      info: "Transparent background, Slate (#3e4150) text at 14px weight 500, 8px radius, padding 10px 16px. No border — relies on text weight contrast to indicate interactivity. Hover: Ash (#efefef) background fill."

    hero_headline:
      role: "Primary page headline"

      info: "PP Neue Montreal Book 200, 56-72px, Inkstone (#292c3d), line-height 1.00-1.10. The ultra-light weight is the signature — headline reads as whisper rather than announcement. Left-aligned in wide single-column blocks with generous left/right breathing room."

    key_hint_chip:
      role: "Keyboard indicator"

      info: "White background, Linen (#e5e8ec) 1px border, 4px radius, padding 4px 10px, text in Geist Mono 13px weight 500 Slate. Used inline to denote keyboard keys (e.g. 'Hold', 'Space') within instructional copy."

    product_screenshot_card:
      role: "Feature demonstration"

      info: "Product UI screenshot placed inside a 20px-radius card with Fog (#f2f6fa) or Mist (#f3f7fa) background. Card has a hairline Linen (#e5e8ec) border and a barely-there shadow at rgba(0,0,0,0.02). The card sits centered below text blocks, acting as the visual anchor for each section."

    inline_link:
      role: "Text link accent"

      info: "Electric Iris (#4288ff) color, PP Neue Montreal Medium 500, underlined. No background fill — color is the only signal. Hover: same color, opacity 0.8."

    status_dot:
      role: "Live indicator"

      info: "8px diameter filled circle in Sky Signal (#67beff). Used sparingly to indicate live/active state (e.g. 'Now live on iOS'). The only place this color appears outside the filled CTA."

    feature_section:
      role: "Content section"

      info: "Centered text block on Paper White or Mist background. Subheading at 40px weight 200, supporting body at 16px weight 400 Slate, max-width ~680px, followed by a Ghost CTA. Vertical rhythm: 80-120px between sections."

    subtle_background_pattern:
      role: "Decorative atmosphere"

      info: "Very faint geometric or organic pattern overlaid on hero sections at near-white opacity. Adds texture without competing with the whisper typography. Tones in Linen or Silver."

  do_s_and_don_ts:

    do:
      - "Use weight 200 for all display and headline text in PP Neue Montreal — the ultra-light cut is the brand's visual signature."
      - "Use Sky Signal (#67beff) only for the filled primary CTA and the live-status dot; never extend it to backgrounds, illustrations, or decorative fills."
      - "Set headline line-height to 1.00-1.10 — the tight leading is essential to the whisper aesthetic and prevents the light weight from looking fragile."
      - "Keep card padding in the 20-24px range and radii at 12-20px; tighter and it feels cramped, wider and it competes with the generous page-level spacing."
      - "Use Ghost buttons (transparent + Slate text) for all secondary actions; reserve the filled Sky Signal button exclusively for the single primary action on each screen."
      - "Apply the hairline Linen (#e5e8ec) border pattern with rgba(0,0,0,0.02) shadow for elevated surfaces — the system uses depth in millimeters, not millimeters turned into centimeters."
      - "Center text blocks at max-width 680px for readability; let the surrounding negative space carry the page rhythm."

    don_t:
      - "Do not use weights above 500 for PP Neue Montreal — the Medium 500 is already the upper bound; 600+ destroys the whisper character of the system."
      - "Do not add color to body copy, headings, or backgrounds beyond the Inkstone/Slate/Pewter neutral scale — chromatic text breaks the monochrome contract."
      - "Do not apply large or saturated shadows; the system intentionally operates at rgba(0,0,0,0.02) to rgba(0,0,0,0.1) depth only."
      - "Do not use pill shapes (9999px radius) for primary buttons — 8px is the button radius; pill shapes are reserved for tags and status chips."
      - "Do not introduce gradients, glassmorphism, or heavy blur effects — the design language is flat, matte, and paper-like."
      - "Do not set headline letter-spacing to negative values — PP Neue Montreal is already optically balanced; additional tracking adjustment creates inconsistency with the font's native rhythm."
      - "Do not use Electric Iris (#4288ff) as a fill — it is an outline/link/ghost action color only; Sky Signal owns the filled action role."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Page Canvas | `#fafbfc` | Primary background for all pages |"
    info: "| 2 | Section Band | `#f3f7fa` | Alternating section tint, subtle visual rhythm |"
    info: "| 3 | Card Surface | `#f2f6fa` | Product screenshot cards, elevated content blocks |"
    info: "| 4 | Hover/Active Fill | `#efefef` | Ghost button hover, interactive feedback |"
    info: "| 5 | Inverted Bar | `#171719` | Top announcement bar, dark accent surfaces |"

  elevation:

    - "**Product Screenshot Card:** `0px 0px 0px 1px rgba(0,0,0,0.02), 0px 1px 1px 0.5px rgba(0,0,0,0.02), 0px 3px 3px 1.5px rgba(0,0,0,0.02), 0px 6px 6px -3px rgba(0,0,0,0.02), 0px 12px 12px -6px rgba(0,0,0,0.02), 0px 24px 24px -12px rgba(0,0,0,0.02)`"
    - "**Elevated Panel:** `inset 0 1px 0 rgb(255,255,255), 0px 0px 0px 1px rgba(0,0,0,0.06), 0px 1px 1px 0.5px rgba(0,0,0,0.06), 0px 3px 3px 1.5px rgba(0,0,0,0.06), 0px 6px 6px -3px rgba(0,0,0,0.06), 0px 12px 12px -6px rgba(0,0,0,0.06), 0px 24px 24px -12px rgba(0,0,0,0.06)`"
    - "**Floating Card:** `0px 0px 0px 1px rgba(0,0,0,0.1), 0px 1px 1px 0.5px rgba(0,0,0,0.1), 0px 3px 3px 1.5px rgba(0,0,0,0.1), 0px 6px 6px -3px rgba(0,0,0,0.1), 0px 12px 12px -6px rgba(0,0,0,0.1), 0px 24px 24px -12px rgba(0,0,0,0.1)`"

  imagery:

    info: "Visuals are dominated by product UI screenshots displayed in rounded cards against muted backgrounds. No lifestyle photography, no stock imagery, no illustration. The only decorative visuals are very faint geometric patterns on hero sections, rendered in near-white opacity so they read as paper texture rather than graphic design. Icons are minimal and line-based, inline with text rather than standing alone."

  layout:

    info: "Full-bleed sections on a 1200px max-width centered grid. Hero is left-aligned text block at ~680px width with generous left margin, followed by centered product screenshot cards. Sections alternate between Paper White and Mist (#f3f7fa) for subtle rhythm. Vertical spacing between sections is 80-120px. Navigation is a minimal top bar with no sticky behavior, no shadow, no border — the top announcement bar provides the only dark surface contrast."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #292c3d (Inkstone) for headlines, #3e4150 (Slate) for body"
    - "background: #fafbfc (Paper White) canvas, #f3f7fa (Mist) section bands"
    - "border: #e5e8ec (Linen) hairline"
    - "accent: #67beff (Sky Signal) — filled CTA only"
    - "link/outline action: #4288ff (Electric Iris) — borders, ghost actions, inline links"
    - "primary action: #67beff (filled action)"

    example_component_prompts:

    - "*Hero Headline Block*: 1200px max-width container, left-aligned text at 680px width. Headline: 56px PP Neue Montreal weight 200, color #292c3d, line-height 1.10. Subtext: 16px PP Neue Montreal weight 400, color #3e4150, line-height 1.50. 80px vertical padding above and below."

    - "*Filled Download CTA*: Sky Signal (#67beff) background, 8px border-radius, padding 10px 16px. Text: 14px PP Neue Montreal Medium 500, color white. No border, no shadow. Centered or right-aligned in nav bar."

    - "*Ghost Secondary Button*: Transparent background, 8px border-radius, padding 10px 16px. Text: 14px PP Neue Montreal Medium 500, color #3e4150. Hover state: #efefef background fill. No border in default state."

    - "*Product Screenshot Card*: Mist (#f2f6fa) or Fog (#f2f6fa) background, 20px border-radius, 1px Linen (#e5e8ec) border, padding 24px. Contains a product UI screenshot with 12px inner radius. Apply rgba(0,0,0,0.02) layered shadow stack."

    - "*Key Hint Chip*: White background, 1px #e5e8ec border, 4px border-radius, padding 4px 10px. Text: 13px Geist Mono weight 500, color #3e4150. Used inline within instructional sentences to denote keyboard keys."

  similar_brands:

    - "**Linear** — Same near-monochrome palette with a single vivid accent (Linear's purple), ultra-clean surfaces, hairline borders, and whisper-light typography hierarchy"
    - "**Stripe** — Similar typographic confidence with custom display faces, centered hero text blocks on white, and minimal decorative chrome — though Stripe leans more colorful"
    - "**Notion** — Same paper-white canvas aesthetic, restrained color usage, and emphasis on generous whitespace around compact UI elements"
    - "**Vercel** — Geist-family typography sensibility (though Aqua uses PP Neue Montreal), dark/light surface contrast via announcement bars, and minimal product UI surfaces"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sky-signal: #67beff;
          --color-electric-iris: #4288ff;
          --color-paper-white: #fafbfc;
          --color-mist: #f3f7fa;
          --color-fog: #f2f6fa;
          --color-linen: #e5e8ec;
          --color-ash: #efefef;
          --color-inkstone: #292c3d;
          --color-slate: #3e4150;
          --color-pewter: #686a76;
          --color-graphite: #7d7e7e;
          --color-silver: #c2c3c8;
          --color-obsidian: #171719;
          --color-midnight: #1e1e20;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-124: 124px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 20-24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
          --radius-full-2: 62px;
          --radius-full-3: 70px;
          --radius-full-4: 110px;
          --radius-full-5: 9999px;
          --radius-full-6: 99999px;
        
          /* Named Radii */
          --radius-cards: 12-20px;
          --radius-icons: 4px;
          --radius-pills: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-decorative: 30-70px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.02) 0px 0px 0px 2px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0, 0, 0, 0.02) 0px 24px 24px -12px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0, 0, 0, 0.02) 0px 24px 24px -12px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, 0.06) 0px 12px 12px -6px, rgba(0, 0, 0, 0.06) 0px 24px 24px -12px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.1) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.1) 0px 6px 6px -3px, rgba(0, 0, 0, 0.1) 0px 12px 12px -6px, rgba(0, 0, 0, 0.1) 0px 24px 24px -12px;
          --shadow-subtle-5: rgb(52, 52, 52) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, 0.06) 0px 12px 12px -6px, rgba(0, 0, 0, 0.06) 0px 24px 24px -12px;
        
          /* Surfaces */
          --surface-page-canvas: #fafbfc;
          --surface-section-band: #f3f7fa;
          --surface-card-surface: #f2f6fa;
          --surface-hoveractive-fill: #efefef;
          --surface-inverted-bar: #171719;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sky-signal: #67beff;
          --color-electric-iris: #4288ff;
          --color-paper-white: #fafbfc;
          --color-mist: #f3f7fa;
          --color-fog: #f2f6fa;
          --color-linen: #e5e8ec;
          --color-ash: #efefef;
          --color-inkstone: #292c3d;
          --color-slate: #3e4150;
          --color-pewter: #686a76;
          --color-graphite: #7d7e7e;
          --color-silver: #c2c3c8;
          --color-obsidian: #171719;
          --color-midnight: #1e1e20;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-124: 124px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
          --radius-full-2: 62px;
          --radius-full-3: 70px;
          --radius-full-4: 110px;
          --radius-full-5: 9999px;
          --radius-full-6: 99999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.02) 0px 0px 0px 2px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0, 0, 0, 0.02) 0px 24px 24px -12px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0, 0, 0, 0.02) 0px 24px 24px -12px;
          --shadow-subtle-3: rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, 0.06) 0px 12px 12px -6px, rgba(0, 0, 0, 0.06) 0px 24px 24px -12px;
          --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.1) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.1) 0px 6px 6px -3px, rgba(0, 0, 0, 0.1) 0px 12px 12px -6px, rgba(0, 0, 0, 0.1) 0px 24px 24px -12px;
          --shadow-subtle-5: rgb(52, 52, 52) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, 0.06) 0px 12px 12px -6px, rgba(0, 0, 0, 0.06) 0px 24px 24px -12px;
        }