superwhisper___style_reference:
  info: "> aurora dissolving over midnight glass"

  theme: "dark"

  info: "Superwhisper is a cinematic dark-mode product that earns its name through a hero aurora — a vertical gradient that bleeds from near-black through deep navy and violet into a dusty lavender-pink horizon, with only a shadowed silhouette of lips and a laptop edge to ground the abstraction. The whole page sits on a near-black canvas (#000000) with the hero card floating as a single rounded surface (24px radius), and every other surface is either a charcoal step up or a translucent black overlay. Inter is the only voice; display sizes use aggressive negative tracking (-3.4px at 60px) so large headlines feel compressed and confident rather than airy. Color is rationed: one electric blue (#0088ff) does the work of a traditional accent for icons, links, and small functional highlights, while white — not a chromatic color — is the primary action fill. The system is intentionally restrained, atmospheric, and product-focused, with most screens staying near-monochrome and letting the gradient hero do the emotional work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Signal | `#0088ff` | `--color-electric-signal` | Brand accent — icons, link text, small functional highlights, inline code accents |"
    info: "| Lavender Mist | `#b855e7` | `--color-lavender-mist` | Brand signature — terminal color of the hero aurora gradient, decorative washes |"
    info: "| Sky Wash | `#60a5fa` | `--color-sky-wash` | Accent — subdued link blue for secondary text-level links |"
    info: "| Ember | `#e6714f` | `--color-ember` | Accent — warm decorative token used sparingly in illustration/code contexts |"
    info: "| Amber Glow | `#ffb764` | `--color-amber-glow` | Accent — warm decorative token, secondary highlight |"
    info: "| Sunburst | `#ffdd00` | `--color-sunburst` | Accent — high-energy punctuation for icons and inline emphasis |"
    info: "| Forest Pulse | `#16c253` | `--color-forest-pulse` | Green supporting accent for decorative details and low-frequency emphasis |"
    info: "| Vivid Mint | `#27c93f` | `--color-vivid-mint` | Accent — saturated green for badges and inline highlights |"
    info: "| Pink Static | `#dd55e7` | `--color-pink-static` | Accent — chromatic pink for decorative highlights and illustration |"
    info: "| Midnight | `#000000` | `--color-midnight` | Page canvas, deepest gradient stop, true black borders |"
    info: "| Obsidian | `#0f0f10` | `--color-obsidian` | Primary card surface — the floating canvas around the hero card |"
    info: "| Charcoal | `#1c1d1f` | `--color-charcoal` | Elevated surface — input fields, nested cards, nav pill background |"
    info: "| Graphite | `#333333` | `--color-graphite` | Mid-dark surface — button rest states, shadow base color |"
    info: "| Slate | `#595959` | `--color-slate` | Mid neutral — secondary borders, disabled controls |"
    info: "| Fog | `#70757c` | `--color-fog` | Muted body text, secondary metadata |"
    info: "| Ash | `#888b91` | `--color-ash` | Tertiary text, button labels on dark surfaces |"
    info: "| Silver | `#999999` | `--color-silver` | Muted helper text, icon strokes at rest |"
    info: "| Mist | `#b8babf` | `--color-mist` | Subtle text on tinted surfaces |"
    info: "| Pearl | `#cccccc` | `--color-pearl` | Secondary text, high-contrast metadata on dark |"
    info: "| Bone | `#e5e7eb` | `--color-bone` | Hairline borders, dividers — the most-used neutral in the system |"
    info: "| White | `#ffffff` | `--color-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Deep Navy | `#001b33` | `--color-deep-navy` | Dark blue-tinted surface for feature cards and section backgrounds |"
    info: "| Midnight Indigo | `#030719` | `--color-midnight-indigo` | Blue-black card surface — second surface level above the canvas |"
    info: "| Aurora Black→Lavender | `linear-gradient(#000000 0.85%, #112d72 33.4%, #4b52aa 49.68%, #a887dc 70.84%, #e6c4e7 95.8%, #fcdbef 107.19%)` | `--color-aurora-blacklavender` | Signature hero gradient: black 0.85% → deep blue → violet → lavender → dusty pink — the single defining atmosphere of the brand |"
    info: "| Signal Blue | `linear-gradient(#0fb7fa, #0072fb)` | `--color-signal-blue` | Secondary gradient pair for call-out strips and inline emphasis bars |"
    info: "| Aurora Wash | `linear-gradient(90deg, rgba(25,153,232,0.15) 2.75%, rgba(164,91,242,0.15) 99.26%)` | `--color-aurora-wash` | Subtle blue-to-violet wash used for low-opacity decorative bands |"

  tokens___typography:

    inter___primary_typeface_for_everything___display_headlines__body__ui_labels__nav__weight_500_600_at_48_60px_with_aggressive_negative_tracking__0_057em_gives_the_signature_compressed__confident_display_feel__body_stays_at_400_500_around_14_16px_with_light_tracking__no_chromatic_cta_color___buttons_rely_on_weight_contrast_alone_____font_inter:
      - "**Substitute:** system-ui, -apple-system, Segoe UI, Roboto"
      - "**Weights:** 300, 400, 500, 600, 700"
      - "**Sizes:** 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 30px, 31px, 48px, 60px"
      - "**Line height:** 1.00–1.78"
      - "**Letter spacing:** -3.42px at 60px → -2.4px at 48px → -1.2px at 30px → -0.6px at 24px → -0.16px at 16px → 0.14px at 12px"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Primary typeface for everything — display headlines, body, UI labels, nav. Weight 500–600 at 48–60px with aggressive negative tracking (-0.057em) gives the signature compressed, confident display feel. Body stays at 400/500 around 14–16px with light tracking. No chromatic CTA color — buttons rely on weight contrast alone."

    ui_monospace___inline_code__keyboard_shortcuts___and_micro_typography_moments__treated_as_a_whisper___always_at_11px__always_quiet_next_to_inter_____font_ui_monospace:
      - "**Substitute:** SF Mono, Menlo, Consolas, monospace"
      - "**Weights:** 300, 400"
      - "**Sizes:** 11px"
      - "**Line height:** 1.00–1.50"
      - "**Role:** Inline code, keyboard shortcuts (⌘⏎), and micro-typography moments. Treated as a whisper — always at 11px, always quiet next to Inter."

    apple_system___system_font_fallback_reserved_for_very_small_ui_labels_and_icons_on_apple_only_surfaces____font_apple_system:
      - "**Substitute:** system-ui"
      - "**Weights:** 500"
      - "**Sizes:** 9px, 10px"
      - "**Line height:** 1.60–1.78"
      - "**Role:** System font fallback reserved for very small UI labels and icons on Apple-only surfaces"

    flow_circular___custom_brand_typeface_used_in_tightly_limited_contexts___a_single_monoline_geometric_that_warms_up_the_otherwise_inter_only_system____font_flow_circular:
      - "**Substitute:** Inter Tight"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.43–1.50"
      - "**Role:** Custom brand typeface used in tightly limited contexts — a single monoline geometric that warms up the otherwise Inter-only system"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 10px | 1.6 | 0.25px | `--text-micro` |"
      info: "| caption | 12px | 1.56 | 0.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.25 | -0.6px | `--text-subheading` |"
      info: "| heading | 30px | 1.2 | -1.2px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.07 | -2.4px | `--text-heading-lg` |"
      info: "| display | 60px | 1.06 | -3.42px | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| icons | 9px |"
      info: "| inputs | 9px |"
      info: "| buttons | 9px |"
      info: "| nav-pill | 9999px |"
      info: "| inner-pill | 9999px |"
      info: "| small-card | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(255, 255, 255, 0.2) 0px 0px 0px 2px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset` | `--shadow-subtle-2` |"
      info: "| md | `rgba(0, 0, 0, 0.3) 0px 0px 10px 0px` | `--shadow-md` |"
      info: "| subtle-3 | `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| sm | `rgba(0, 0, 0, 0.25) 0px 1px 4px 0px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.1) 0px 4px 6px 0px` | `--shadow-sm-2` |"
      info: "| sm-3 | `rgba(0, 0, 0, 0.08) 0px 2px 6px 0px` | `--shadow-sm-3` |"
      info: "| subtle-4 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px` | `--shadow-subtle-4` |"
      info: "| xl | `rgba(0, 0, 0, 0.4) 0px 8px 32px 0px` | `--shadow-xl` |"
      info: "| subtle-5 | `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.35) 0...` | `--shadow-subtle-5` |"
      info: "| lg | `rgba(0, 0, 0, 0.25) 0px 3px 20px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    aurora_hero_card:
      role: "Full-bleed hero surface carrying the brand atmosphere"

      info: "Rounded container at 24px radius, fills the hero with the signature black→navy→violet→lavender→pink linear gradient. Sits on a #000000 page canvas. No shadow — the gradient is the elevation. Internal padding ~48-64px vertical, content centered. Text on top is white Inter at 48-60px, weight 500-600, with -3.4px tracking. A subtle inset 1-2px white-alpha border may define edges."

    white_filled_button_download_mac:
      role: "Primary action — download CTA"

      info: "White (#ffffff) fill, #000000 text, Inter 14-15px medium, 9px radius, padding 10px 16px. Apple platform glyph prefix in matching black. No shadow. This is the action color: white against near-black creates maximum contrast without introducing a chromatic brand color."

    dark_outlined_button_download_windows:
      role: "Secondary platform download CTA"

1c1d1f_fill_with_subtle_hairline_border__white_text__inter_14_15px_medium__9px_radius__padding_10px_16px__windows_glyph_prefix__sits_beside_the_white_button_as_a_visually_quieter_peer___same_shape__inverted_fill:

    navigation_pill_container:
      role: "Top-of-page floating nav"

      info: "Dark pill (~9999px radius) containing Home, Docs, Pricing links plus a white Download action. Background #1c1d1f or #0f0f10 with a 1px hairline white-alpha border. Centered horizontally, ~8-12px vertical padding. Nav links use Inter 13-14px regular, muted (#888b91) at rest, white on hover."

    white_nav_download_pill:
      role: "Primary action inside the nav"

      info: "9999px radius pill, white fill, black text, Inter 13px medium. Smaller than the hero CTAs (padding ~6px 14px). The only saturated-light surface on the page, which is why it reads as action."

    inline_platform_link_iphone:
      role: "Tertiary download path"

      info: "No button chrome — just Inter 12-13px in #b8babf with a › chevron. Sits below the primary CTAs as a quiet, text-level alternative. Hover state lifts to white."

    feature_card_dark_tinted:
      role: "Content card on a dark page"

      info: "Rounded 18-24px radius, fill is one of the tinted darks (#001b33, #031310, #1c031f, #200401, #030719, #191303, #0f0f10). Padding 24px. Optional subtle 1px white-alpha inset border for definition. The full chromatic dark-tint palette is available — these tints are the system's way of adding hue without adding saturation."

    audio_waveform_visual:
      role: "On-brand decorative element reinforcing the voice-to-text product"

      info: "Uses #0088ff as the active waveform color on #001b33 or #030719 card backgrounds. Thin strokes (1-2px), no fill, rounded line caps. Often paired with #16c253 or #27c93f for secondary tracks."

    inline_code_chip:
      role: "Micro component for keyboard shortcuts and code references"

      info: "ui-monospace 11px, #b8babf text on #1c1d1f fill, 4px radius, 4px 6px padding. Characters like ⌘⏎ render in white for emphasis on the monospace string."

    quiet_text_link:
      role: "Body-level links"

      info: "Inter 14-16px, #60a5fa underline or #0088ff, no underline. Hover lifts to white. Inherits body line-height."

    pill_nav_link_home___docs___pricing:
      role: "Navigation item at rest"

      info: "No background. Inter 13-14px regular in #888b91. Active state: #ffffff. The active marker is color alone — no underline, no pill, no dot."

  do_s_and_don_ts:

    do:
      - "Use the aurora gradient (#000000 → #112d72 → #4b52aa → #a887dc → #e6c4e7 → #fcdbef) as the signature hero atmosphere — never replace it with a flat dark or a solid color."
      - "Use white (#ffffff) as the primary action fill on the dark canvas; do not introduce a chromatic CTA color."
      - "Use Inter at 60px / 48px with letter-spacing -3.42px / -2.4px respectively for all display headlines — the negative tracking is the signature."
      - "Use 24px radius for the hero card and large feature cards; use 9px for inline buttons and inputs; use 9999px (pill) for nav and small action chips."
      - "Pair #0088ff icons with #001b33 or #030719 card surfaces so the blue reads as signal, not decoration."
      - "Place dark-tinted cards (#001b33, #031310, #030719) at high contrast against the #000000 page so the tint is felt as hue, not as noise."
      - "Use 16px element gap and 24px card padding as the floor; allow section gaps to expand to 64px between major bands."

    don_t:
      - "Don't add a saturated colored CTA button — white-on-dark is the action vocabulary."
      - "Don't use a flat dark background for the hero; the gradient is the brand."
      - "Don't soften display tracking below -3px at 60px — the compressed look is what makes Inter feel like a logo."
      - "Don't put shadows on the hero card; the gradient carries elevation."
      - "Don't use more than one chromatic accent color (#0088ff) in a single component — chromatic colors in this system are rationed."
      - "Don't center body copy in narrow columns; the hero centers but content sections should left-align at 600-800px measure."
      - "Don't use positive letter-spacing above 0.025em for body or display text."
      - "Don't round inline buttons to pill (9999px) — that radius is reserved for nav and small chips; use 9px instead."
      - "Don't use Flow Circular outside of its specific reserved contexts — Inter is the system voice."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Page Canvas | `#000000` | Deepest background, surrounds all cards |"
    info: "| 2 | Obsidian | `#0f0f10` | Primary card surface, floating panels |"
    info: "| 3 | Midnight Indigo | `#030719` | Tinted dark card — adds cool hue without saturation |"
    info: "| 4 | Deep Navy | `#001b33` | Strongly blue-tinted card for feature blocks and waveform containers |"
    info: "| 5 | Charcoal | `#1c1d1f` | Elevated inputs, nav pill, dark button rest |"
    info: "| 6 | White | `#ffffff` | Maximum contrast surface — primary action fill and text |"

  elevation:

    - "**Aurora Hero Card:** `none (the gradient itself provides elevation)`"
    - "**Dark Feature Card:** `rgba(0, 0, 0, 0.25) 0px 1px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 59px 0px`"
    - "**Icon Container (inset ring):** `rgba(255, 255, 255, 0.2) 0px 0px 0px 2px inset`"
    - "**Image Caption / Detail:** `rgba(0, 0, 0, 0.3) 0px 0px 10px 0px`"

  imagery:

    info: "Atmospheric and sparse. The hero relies on a single dramatic vertical gradient (black → deep blue → violet → lavender → dusty pink) framed by a shadowed silhouette of lips on the left edge and a sliver of a laptop screen on the right — both bleeding off the canvas, never contained in boxes. No product screenshots, no lifestyle photography, no illustration mascots. The visual language is cinematic and abstract: the page sells mood before it sells features. Secondary screens may use small product-crop images inside the dark-tinted cards, with 24px rounded corners and a 1px white-alpha inset ring for definition. Icons are thin (1-2px stroke), monoline, and tinted with the brand blue #0088ff against dark surfaces. Density is image-light: the gradient and typography do 80% of the visual work."

  layout:

    info: "Single full-bleed hero card centered on a #000000 page canvas, max content width ~1200px. The hero is a vertically tall rounded surface (24px radius) with the aurora gradient as the background and all content centered — single-column stack: headline, sub-headline, button row, fine print, and a final helper line. Navigation is a floating pill at the top, horizontally centered, with no sticky behavior visible. The hero card has generous internal vertical padding (likely 96-128px) and a small horizontal padding (32-48px), so content lives in a centered column ~600-700px wide. Below the hero, the page is expected to use a single-column or 2-column rhythm of dark-tinted feature cards on the #000000 canvas, with 64px section gaps. There is no sidebar, no mega-menu, and no dense grid — the system is a series of full-bleed horizontal bands, each one a quiet step in the story."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (primary), #b8babf (muted), #888b91 (tertiary), #60a5fa (link)"
    - "background: #000000 (page), #0f0f10 (card), #030719 (tinted card), #1c1d1f (elevated)"
    - "border: rgba(255,255,255,0.1)–0.2 (hairline), #333333 (mid)"
    - "accent: #0088ff (brand blue), #b855e7 (lavender — gradient only)"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "*Aurora hero card*: full-width container, 24px radius, background is the signature gradient linear-gradient(#000000 0.85%, #112d72 33.4%, #4b52aa 49.68%, #a887dc 70.84%, #e6c4e7 95.8%, #fcdbef 107.19%). Centered headline at 60px Inter weight 500, #ffffff, letter-spacing -3.42px. Sub-line at 18px Inter weight 400, #b8babf, letter-spacing -0.18px. Two side-by-side buttons below (see #2 and #3)."
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "*Secondary action button (Download Windows)*: 9px radius, #1c1d1f fill, 1px rgba(255,255,255,0.15) border, #ffffff text, Inter 15px weight 500, padding 10px 16px. Sits to the right of the white button with 12px gap."
    - "*Floating nav pill*: horizontally centered, 9999px radius, #0f0f10 fill, 1px rgba(255,255,255,0.12) border, padding 6px 8px. Contains three text links (Inter 13px weight 400, #888b91) and one white pill download button (9999px radius, #ffffff fill, #000000 text, Inter 13px weight 500, padding 6px 14px)."
    - "*Dark feature card*: 24px radius, #001b33 fill, padding 24px, 1px rgba(255,255,255,0.08) inset border, no drop shadow. Headline at 30px Inter weight 500, #ffffff, letter-spacing -1.2px. Body at 16px Inter weight 400, #b8babf. Optional #0088ff 2px waveform graphic at the top."

  similar_brands:

    - "**Wispr Flow** — Same voice-to-text product category and dark cinematic hero with a single gradient atmosphere; both lean on compressed Inter display type."
    - "**Linear** — Dark-mode-only interface with a single chromatic accent (#0088ff here, #5e6ad2 there) and tight Inter typography with aggressive negative tracking."
    - "**Arc Browser** — Same restrained dark canvas, gradient-forward hero, and white-filled primary action — the 'gradient does the elevation' philosophy is shared."
    - "**Raycast** — Productivity tool with a near-monochrome dark UI, one electric accent color, and pill-shaped controls on a black canvas."
    - "**ElevenLabs** — Voice AI brand that also uses an aurora-like gradient hero against a black canvas to signal 'AI/atmosphere' without resorting to literal imagery."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-signal: #0088ff;
          --color-lavender-mist: #b855e7;
          --color-sky-wash: #60a5fa;
          --color-ember: #e6714f;
          --color-amber-glow: #ffb764;
          --color-sunburst: #ffdd00;
          --color-forest-pulse: #16c253;
          --color-vivid-mint: #27c93f;
          --color-pink-static: #dd55e7;
          --color-midnight: #000000;
          --color-obsidian: #0f0f10;
          --color-charcoal: #1c1d1f;
          --color-graphite: #333333;
          --color-slate: #595959;
          --color-fog: #70757c;
          --color-ash: #888b91;
          --color-silver: #999999;
          --color-mist: #b8babf;
          --color-pearl: #cccccc;
          --color-bone: #e5e7eb;
          --color-white: #ffffff;
          --color-deep-navy: #001b33;
          --color-midnight-indigo: #030719;
          --color-aurora-blacklavender: #1a0a20;
          --gradient-aurora-blacklavender: linear-gradient(#000000 0.85%, #112d72 33.4%, #4b52aa 49.68%, #a887dc 70.84%, #e6c4e7 95.8%, #fcdbef 107.19%);
          --color-signal-blue: #0fb7fa;
          --gradient-signal-blue: linear-gradient(#0fb7fa, #0072fb);
          --color-aurora-wash: #a45bf2;
          --gradient-aurora-wash: linear-gradient(90deg, rgba(25,153,232,0.15) 2.75%, rgba(164,91,242,0.15) 99.26%);
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-flow-circular: 'Flow Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.6;
          --tracking-micro: 0.25px;
          --text-caption: 12px;
          --leading-caption: 1.56;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.6px;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -1.2px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -2.4px;
          --text-display: 60px;
          --leading-display: 1.06;
          --tracking-display: -3.42px;
        
          /* 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-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-icons: 9px;
          --radius-inputs: 9px;
          --radius-buttons: 9px;
          --radius-nav-pill: 9999px;
          --radius-inner-pill: 9999px;
          --radius-small-card: 12px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 2px inset;
          --shadow-subtle-2: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
          --shadow-md: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 1px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 59px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
          --shadow-sm-3: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;
          --shadow-xl: rgba(0, 0, 0, 0.4) 0px 8px 32px 0px;
          --shadow-subtle-5: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.35) 0px 8px 24px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.25) 0px 3px 20px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #000000;
          --surface-obsidian: #0f0f10;
          --surface-midnight-indigo: #030719;
          --surface-deep-navy: #001b33;
          --surface-charcoal: #1c1d1f;
          --surface-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-signal: #0088ff;
          --color-lavender-mist: #b855e7;
          --color-sky-wash: #60a5fa;
          --color-ember: #e6714f;
          --color-amber-glow: #ffb764;
          --color-sunburst: #ffdd00;
          --color-forest-pulse: #16c253;
          --color-vivid-mint: #27c93f;
          --color-pink-static: #dd55e7;
          --color-midnight: #000000;
          --color-obsidian: #0f0f10;
          --color-charcoal: #1c1d1f;
          --color-graphite: #333333;
          --color-slate: #595959;
          --color-fog: #70757c;
          --color-ash: #888b91;
          --color-silver: #999999;
          --color-mist: #b8babf;
          --color-pearl: #cccccc;
          --color-bone: #e5e7eb;
          --color-white: #ffffff;
          --color-deep-navy: #001b33;
          --color-midnight-indigo: #030719;
          --color-aurora-blacklavender: #1a0a20;
          --color-signal-blue: #0fb7fa;
          --color-aurora-wash: #a45bf2;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-flow-circular: 'Flow Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.6;
          --tracking-micro: 0.25px;
          --text-caption: 12px;
          --leading-caption: 1.56;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.6px;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --tracking-heading: -1.2px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -2.4px;
          --text-display: 60px;
          --leading-display: 1.06;
          --tracking-display: -3.42px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 2px inset;
          --shadow-subtle-2: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
          --shadow-md: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 1px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 59px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
          --shadow-sm-3: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;
          --shadow-xl: rgba(0, 0, 0, 0.4) 0px 8px 32px 0px;
          --shadow-subtle-5: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.35) 0px 8px 24px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.25) 0px 3px 20px 0px;
        }