pitch___style_reference:
  info: "> violet stage spotlight on white. A deep purple gradient floods the hero like theater lighting, then the page steps down into a clean, flat slate workspace where one bright violet does all the work."

  theme: "light"

  info: "Pitch is a stage-lit productivity platform: the hero floods with a vivid violet gradient like theatrical lighting, then the rest of the page settles into a clean slate-and-white workspace where color is rationed to functional punctuation. Typography pairs a wide-tracked geometric sans (Eina01) for UI with a heavy, tightly-tracked display sans (Mark Pro) for headlines — the two voices create a clear hierarchy between product surface and marketing voice. Surfaces are flat white with soft, low-opacity shadows; the violet (#6b53ff) carries every action and brand mark, a single warm yellow (#ffd02c) injects energy accents, and a near-black charcoal (#2b2a35) does the heavy lifting for text. Components are compact and confident — pill buttons, small radii (6–20px), tight 20px padding, and a deliberate absence of decoration. The page rhythm alternates between immersive dark-violet full-bleed bands and bright content sections, producing a theatrical pacing from spectacle to substance."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Violet | `#6b53ff` | `--color-signal-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Lighter Violet | `#8d49f7` | `--color-lighter-violet` | Secondary brand accent, gradient highlight stops, icon fills, decorative violet washes — a brighter cousin used when Signal Violet would feel too heavy |"
    info: "| Deep Indigo | `#371789` | `--color-deep-indigo` | Dark brand text, deep gradient end-stops, footer/marketing accent on white sections — the shadow side of the violet family |"
    info: "| Solar Yellow | `linear-gradient(90deg, #ffd02c, #ff9e2c)` | `--color-solar-yellow` | Energy accent — slide preview highlights, decorative bursts, gradient start, illustration fills. Used sparingly as visual punctuation, never as a functional color; Warm accent gradient — linear-gradient(90deg, #ffd02c, #ff9e2c) for decorative bursts and illustration gradients |"
    info: "| Ember Orange | `#ffa000` | `--color-ember-orange` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Slate Ink | `#2b2a35` | `--color-slate-ink` | Primary text, heading text, icon strokes, dark surface fill — the dominant achromatic doing all reading work (1,700+ occurrences) |"
    info: "| Carbon | `#1e1d28` | `--color-carbon` | Secondary dark text, card text on light surfaces — a step lighter than Slate Ink for subordinate copy |"
    info: "| Steel | `#3f4250` | `--color-steel` | Muted body text, secondary headings, dark-mode support text |"
    info: "| Fog | `#6f7387` | `--color-fog` | Supporting neutral for secondary UI, dividers, and muted labels. |"
    info: "| Ash | `#95959a` | `--color-ash` | Tertiary borders, subtle dividers, light-mode shadow tint at low opacity |"
    info: "| Mist | `#dddfe5` | `--color-mist` | Hairline borders, card outlines, button shadows — the lightest visible structural line |"
    info: "| Marble | `#f0eff4` | `--color-marble` | Page canvas background — slightly cooler than pure white, sets product sections apart from card surfaces |"
    info: "| Paper | `#ffffff` | `--color-paper` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Shadow Violet | `#0a0359` | `--color-shadow-violet` | Deep shadow color tinted violet (rgba 0.3) — appears only in the hero card's large ambient shadow, giving elevation an on-brand cool cast |"
    info: "| Hero Stage | `linear-gradient(90deg, rgb(83, 24, 235), rgb(171, 110, 249))` | `--color-hero-stage` | Primary hero gradient end-stop — linear gradient(90deg, #5718eb, #ab6ef9) fills the entire first screen behind the headline |"

  tokens___typography:

    eina01___primary_ui_and_body_font__used_for_navigation__buttons__body_copy__list_items__badges__and_subheadings_up_to_28px__its_signature_is_a_wide__0_1em_letter_spacing_applied_consistently___this_airiness_gives_the_ui_a_measured__deliberate_pace_rather_than_dense_saas_compression__substitute__inter_or_manrope_both_geometric_sans_with_similar_x_height_____font_eina01:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 600, 700, 800"
      - "**Sizes:** 13, 14, 15, 16, 18, 22, 24, 28"
      - "**Line height:** 1.2–1.6"
      - "**Letter spacing:** 0.1em"
      - "**Role:** Primary UI and body font. Used for navigation, buttons, body copy, list items, badges, and subheadings up to 28px. Its signature is a wide +0.1em letter-spacing applied consistently — this airiness gives the UI a measured, deliberate pace rather than dense SaaS compression. Substitute: Inter or Manrope (both geometric sans with similar x-height)."

    mark_pro___display_and_headline_font_only__used_for_hero_headlines_60_80px__section_headings_42px__and_small_uppercase_labels_13px__the_display_sizes_carry_tight_negative_tracking__0_02em_at_60_80px___0_01em_at_27_28px_that_contrasts_with_eina01_s_openness___the_two_fonts_create_a_deliberate_tight_wide_duality__substitute__s_hne_closest_match_or_inter_at_heavy_weight_____font_mark_pro:
      - "**Substitute:** Söhne"
      - "**Weights:** 700, 800"
      - "**Sizes:** 13, 27, 28, 42, 60, 80"
      - "**Line height:** 1.0–1.4"
      - "**Letter spacing:** -0.02em at 60–80px, -0.01em at 27–28px, 0.1em at 13px (uppercase labels)"
      - "**Role:** Display and headline font only. Used for hero headlines (60–80px), section headings (42px), and small uppercase labels (13px). The display sizes carry tight negative tracking (-0.02em at 60–80px, -0.01em at 27–28px) that contrasts with Eina01's openness — the two fonts create a deliberate tight/wide duality. Substitute: Söhne (closest match) or Inter at heavy weight."

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.6 | 1.3px | `--text-caption` |"
      info: "| body | 16px | 1.6 | 1.6px | `--text-body` |"
      info: "| body-lg | 18px | 1.6 | 1.8px | `--text-body-lg` |"
      info: "| subheading | 22px | 1.4 | 2.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | 2.4px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.2 | 2.8px | `--text-heading` |"
      info: "| heading-lg | 42px | 1.1 | -0.42px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -1.44px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      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: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 159 | 159px | `--spacing-159` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 26px |"
      info: "| small | 3px |"
      info: "| badges | 20px |"
      info: "| inputs | 6px |"
      info: "| buttons | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.15) 0px 3px 10px 0px` | `--shadow-md` |"
      info: "| xl | `rgba(103, 110, 144, 0.2) 0px 8px 26px 0px` | `--shadow-xl` |"
      info: "| xl-2 | `rgba(43, 42, 53, 0.25) 0px 6px 27px 0px` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(43, 42, 53, 0.5) 0px 6px 27px 0px` | `--shadow-xl-3` |"
      info: "| xl-4 | `rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.0...` | `--shadow-xl-4` |"

    layout:

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

  components:

    filled_primary_button:
      role: "Primary action — the main CTA on a page or section."

      info: "Background #6b53ff, white text, 20px border-radius (pill), 12px vertical × 20px horizontal padding, Eina01 weight 600 at 14–15px with 0.1em tracking. Optional right arrow icon in white. The high radius is signature — these buttons read as soft pills, not rectangles."

    inverted_white_filled_button:
      role: "Secondary action on light backgrounds, primary on dark sections."

      info: "Background #ffffff, text #2b2a35, 20px radius, 12px × 20px padding, Eina01 weight 600. Used for 'Sign up' in the dark navigation and for 'Sign up for free' on the hero gradient — the white pill is the counterweight to the violet pill."

    ghost_outlined_button:
      role: "Low-emphasis action, used over colored or image backgrounds."

      info: "Transparent background, 1.5px white border, white text, 20px radius, 12px × 20px padding. 'Log in' in the header uses this treatment — it sits in the dark navigation without competing with the white 'Sign up' pill."

    pill_badge_tag:
      role: "Category tags, feature labels, inline metadata."

      info: "20px border-radius, 4px vertical × 12px horizontal padding, Eina01 weight 600 at 13px with 0.1em tracking and uppercase. Violet fill with white text for active tags, neutral fill for passive ones. Compact and self-contained."

    feature_card:
      role: "Marketing feature blocks with image, title, and description."

      info: "White (#ffffff) surface, 26px border-radius, 20px padding, soft shadow rgba(0,0,0,0.15) 0px 3px 10px. Optionally escalates to the deep violet ambient shadow rgba(10,3,89,0.3) 0px 20px 90px for hero feature cards. Generous internal whitespace with image-top, text-below composition."

    testimonial_card:
      role: "Social proof blocks with avatar, quote, and attribution."

      info: "Violet (#6b53ff) background, 26px radius, white text, circular avatar photo (60–80px diameter) with a yellow ring border (#ffd02c). The violet fill makes testimonials visually loud — they're meant to be the emotional peak of a section."

    hero_section:
      role: "First-screen brand impression."

      info: "Full-bleed background with linear-gradient(90deg, #5718eb, #ab6ef9). Centered white headline (Mark Pro weight 700–800 at 60–80px, -0.02em tracking, line-height 1.0), white subtext (Eina01 weight 400 at 18px), and two-button row (white pill + violet pill). Optional 3D illustrative elements float in the corners with soft violet glow."

    navigation_bar:
      role: "Top-level site navigation."

      info: "Transparent background sitting directly on the hero gradient. White text (Eina01 weight 600 at 15px, 0.1em tracking). Logo mark on the left (violet 'P' glyph on a white rounded square). Right-aligned: ghost 'Log in' + white-filled 'Sign up'. No background fill until scroll."

    announcement_banner:
      role: "Top-of-page news/feature announcement."

      info: "White background, centered single-line text in Eina01 weight 400 at 13–14px. Dark text body with a violet 'See what's new →' link in weight 600. Hairline bottom border in #dddfe5. 2px vertical padding — minimal height to stay non-intrusive."

    tab_segment_control:
      role: "Switching between audience-specific feature views."

      info: "Horizontal row of uppercase Eina01 labels (weight 600, 13px, 0.1em tracking) in #6f7387. Active tab is #6b53ff with a 2px violet underline bar. No background fill on the row itself — the underline alone carries the active state."

    checklist_item:
      role: "Feature list with checkmark icons."

      info: "Violet checkmark icon (#6b53ff, ~20px) left-aligned, dark text label in Eina01 weight 400 at 16–18px to its right. 15px vertical gap between items. The violet check is the only color — everything else is monochrome charcoal."

    cookie_consent_card:
      role: "GDPR/privacy notification overlay."

      info: "White surface, ~16px radius, soft shadow, fixed-position bottom-left. Body text in Eina01 at 13px, 'Agree' button in violet #6b53ff, 'More options' as a text link. Compact — must not dominate the viewport."

    client_logo_strip:
      role: "Social proof — brands using the product."

      info: "Horizontal row of grayscale client logos (#2b2a35 or near-black) at uniform height (~24–32px), evenly spaced with generous gaps. Logos desaturate to gray to avoid competing with the violet brand. Sits centered on a white or #f0eff4 band."

    slide_preview_product_card:
      role: "Inline product mockup showing the editor or a finished deck."

      info: "White surface, 6px–16px radius, 20px padding, contained within a larger card. Shows actual product UI (toolbar, canvas, slide thumbnails). Sits on a light gray (#f0eff4) background to separate the product from the marketing page."

  do_s_and_don_ts:

    do:
      - "Use Signal Violet (#6b53ff) as the exclusive fill for primary action buttons and brand marks — never substitute with another color"
      - "Apply 20px border-radius to all buttons, badges, and pill-shaped elements; 26px for larger cards; 6px for inputs and small tags"
      - "Use Eina01 at 0.1em letter-spacing for all UI text — this wide tracking is the system's signature rhythm"
      - "Reserve Mark Pro (weight 700–800) for display headlines at 42px and above with tight -0.02em tracking"
      - "Use the hero gradient linear-gradient(90deg, #5718eb, #ab6ef9) as a full-bleed section background for maximum-emphasis content blocks"
      - "Keep card padding at 20px and element gaps at 20px for the standard product surface rhythm"
      - "Use soft shadows only — rgba(0,0,0,0.15) 0px 3px 10px is the default; escalate to the violet-tinted deep shadow only for hero feature cards"

    don_t:
      - "Don't introduce new accent colors — Solar Yellow (#ffd02c) and Ember Orange (#ffa000) are decorative-only, never use for buttons or status"
      - "Don't use Eina01 at display sizes above 28px — switch to Mark Pro for anything larger to maintain the tight/wide duality"
      - "Don't apply tight negative tracking to Eina01 — its 0.1em positive spacing is non-negotiable for the UI voice"
      - "Don't use heavy borders or hard outlines on cards — the system signals elevation through soft shadows and background contrast, not strokes"
      - "Don't place body text directly on the violet hero gradient at small sizes — minimum 16px white text, or move text to a white card surface"
      - "Don't use Deep Indigo (#371789) as a button fill — it's a text and gradient color, not an interactive surface"
      - "Don't mix purple and yellow on the same component — they serve different functions (violet = action, yellow = energy) and combining them muddles the hierarchy"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Marble | `#f0eff4` | Page canvas — the default background for content sections below the hero |"
    info: "| 1 | Paper | `#ffffff` | Card and panel surfaces — sits one step above Marble, the primary product surface |"
    info: "| 2 | Elevated Paper | `#ffffff` | Modals, popovers, floating toolbars — same white but distinguished by stronger shadow and/or border |"
    info: "| 3 | Hero Stage | `#5718eb` | Full-bleed brand sections — the violet gradient, reserved for hero and major emotional peaks |"

  elevation:

    - "**Standard card / image container:** `0px 3px 10px rgba(0, 0, 0, 0.15)`"
    - "**Elevated feature card:** `0px 8px 26px rgba(103, 110, 144, 0.2)`"
    - "**Hero feature card (ambient lift):** `0px 20px 90px rgba(10, 3, 89, 0.3), 0px 0px 0px 1px rgba(0, 0, 0, 0.02)`"
    - "**Primary button (active/pressed state):** `0px 6px 27px rgba(43, 42, 53, 0.5)`"

  imagery:

    info: "Visuals are a mix of product screenshots (the editor UI, slide thumbnails) and 3D-rendered decorative objects — a compass, a gear, a clock — that float with soft violet glows in the corners of content sections. Product screenshots are always contained within rounded white cards (16–26px radius) with soft shadows, never full-bleed. The 3D objects are stylized, slightly glossy, and tinted with brand violet and warm yellow to feel cohesive with the hero. Photography is absent — no lifestyle shots, no human photography in marketing (human presence is limited to circular avatar crops in testimonial cards). The overall visual density is moderate: text-dominant with product visuals as supporting evidence rather than spectacle."

  layout:

    info: "The page is a vertical scroll of alternating full-width bands: a violet gradient hero (centered headline, two-button row, decorative 3D objects in corners) → product preview band (centered slide editor card on white) → client logo strip (centered, generous spacing) → 'for the whole team' section (centered text + tabbed feature blocks) → testimonial band (violet card with circular avatar) → checklist section (two-column: image left, checkmark list right). Max content width is ~1200px centered. Navigation is a transparent top bar that overlays the hero and likely solidifies on scroll. Section gaps are 80px — generous enough for theatrical pacing, tight enough to maintain momentum. The rhythm is: dark violet hero → white product band → gray social proof → white feature section → violet testimonial → white checklist. This alternating dark/light cadence creates visual punctuation without needing dividers."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #2b2a35"
    - "Secondary text: #1e1d28"
    - "Muted text: #6f7387"
    - "Background (canvas): #f0eff4"
    - "Card surface: #ffffff"
    - "Border: #dddfe5"
    - "primary action: no distinct CTA color"
    - "Accent: #ffd02c (decorative yellow only)"

    example_component_prompts:

    - "**Hero section**: Full-bleed background linear-gradient(90deg, #5718eb, #ab6ef9). Centered white headline at 60px Mark Pro weight 700, letter-spacing -0.02em, line-height 1.0. White subtext at 18px Eina01 weight 400, letter-spacing 0.1em. Two buttons side by side: white-filled pill (white bg, #2b2a35 text, 20px radius, 12px 20px padding) and violet-filled pill (#6b53ff bg, white text, 20px radius)."

    - "**Feature card**: White (#ffffff) surface, 26px border-radius, 20px padding, shadow 0px 3px 10px rgba(0,0,0,0.15). Image fills the top with 6px radius. Title in Eina01 weight 700 at 22px, #2b2a35, 0.1em tracking. Body in Eina01 weight 400 at 16px, #3f4250."

    - "**Testimonial card**: Violet (#6b53ff) background, 26px radius, 20px padding. Circular avatar (72px diameter) with 3px #ffd02c border ring. Quote in Eina01 weight 400 at 18px, white, 0.1em tracking. Attribution name in Eina01 weight 700 at 14px, white."

    - "**Tab control**: Horizontal row, no background. Labels in Eina01 weight 600 at 13px, 0.1em tracking, uppercase. Inactive tabs in #6f7387, active tab in #6b53ff with a 2px violet underline bar (4px below text, 100% width of label)."

    - "**Checklist item**: 20px violet (#6b53ff) checkmark icon left-aligned. Label in Eina01 weight 400 at 18px, #2b2a35, 0.1em tracking, 15px gap from icon. Items separated by 15px vertical space."

  duality_principle:

    the_system_runs_on_a_tight_wide_duality: "Mark Pro is tight (-0.02em) and heavy, Eina01 is wide (+0.1em) and light. This is not a style choice but a hierarchy tool — when you see tight tracking, you're in the headline voice (marketing, emotion); when you see wide tracking, you're in the product voice (interface, utility). Never collapse the two into one tracking style. This is the single most distinctive choice in the system."

  color_rationing:

    info: "Violet is rationed, not splashed. On a given screen, violet should appear on: one primary CTA, the logo, the active tab indicator, and checkmark icons — and nothing else. If you find yourself reaching for violet on a third component, that's a signal to use charcoal instead. The single yellow accent is even more rationed: one decorative element per section maximum, always small, always supporting — never competing with the violet."

  similar_brands:

    - "**Notion** — Same minimal-light canvas approach with a single brand color (Notion's black) rationed across actions, and similarly soft shadows on white cards with 16–20px radii"
    - "**Linear** — Same tight typographic discipline with a single chromatic accent (Linear's purple) and generous use of grayscale for structure — though Pitch leans more expressive with the violet hero gradient"
    - "**Figma** — Shares the 3D-illustrated product marketing language (floating geometric objects, product UI screenshots in contained white cards) and a similar punchy single-accent palette"
    - "**Framer** — Same dark-gradient hero → white content section rhythm, with the brand color flooding the first screen and then retreating to a clean workspace below"
    - "**Webflow** — Both use a vivid single-hue brand color (Webflow's blue, Pitch's violet) as the sole interactive accent against a near-white workspace with soft elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-violet: #6b53ff;
          --color-lighter-violet: #8d49f7;
          --color-deep-indigo: #371789;
          --color-solar-yellow: #ffd02c;
          --gradient-solar-yellow: linear-gradient(90deg, #ffd02c, #ff9e2c);
          --color-ember-orange: #ffa000;
          --color-slate-ink: #2b2a35;
          --color-carbon: #1e1d28;
          --color-steel: #3f4250;
          --color-fog: #6f7387;
          --color-ash: #95959a;
          --color-mist: #dddfe5;
          --color-marble: #f0eff4;
          --color-paper: #ffffff;
          --color-shadow-violet: #0a0359;
          --color-hero-stage: #5718eb;
          --gradient-hero-stage: linear-gradient(90deg, rgb(83, 24, 235), rgb(171, 110, 249));
        
          /* Typography — Font Families */
          --font-eina01: 'Eina01', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mark-pro: 'Mark Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.6;
          --tracking-caption: 1.3px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: 1.6px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: 1.8px;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --tracking-subheading: 2.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 2.4px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: 2.8px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.42px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --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-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-120: 120px;
          --spacing-159: 159px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 56px;
        
          /* Named Radii */
          --radius-cards: 26px;
          --radius-small: 3px;
          --radius-badges: 20px;
          --radius-inputs: 6px;
          --radius-buttons: 20px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.15) 0px 3px 10px 0px;
          --shadow-xl: rgba(103, 110, 144, 0.2) 0px 8px 26px 0px;
          --shadow-xl-2: rgba(43, 42, 53, 0.25) 0px 6px 27px 0px;
          --shadow-xl-3: rgba(43, 42, 53, 0.5) 0px 6px 27px 0px;
          --shadow-xl-4: rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-marble: #f0eff4;
          --surface-paper: #ffffff;
          --surface-elevated-paper: #ffffff;
          --surface-hero-stage: #5718eb;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-violet: #6b53ff;
          --color-lighter-violet: #8d49f7;
          --color-deep-indigo: #371789;
          --color-solar-yellow: #ffd02c;
          --color-ember-orange: #ffa000;
          --color-slate-ink: #2b2a35;
          --color-carbon: #1e1d28;
          --color-steel: #3f4250;
          --color-fog: #6f7387;
          --color-ash: #95959a;
          --color-mist: #dddfe5;
          --color-marble: #f0eff4;
          --color-paper: #ffffff;
          --color-shadow-violet: #0a0359;
          --color-hero-stage: #5718eb;
        
          /* Typography */
          --font-eina01: 'Eina01', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mark-pro: 'Mark Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.6;
          --tracking-caption: 1.3px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: 1.6px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: 1.8px;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --tracking-subheading: 2.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 2.4px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: 2.8px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.42px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --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-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-120: 120px;
          --spacing-159: 159px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 56px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.15) 0px 3px 10px 0px;
          --shadow-xl: rgba(103, 110, 144, 0.2) 0px 8px 26px 0px;
          --shadow-xl-2: rgba(43, 42, 53, 0.25) 0px 6px 27px 0px;
          --shadow-xl-3: rgba(43, 42, 53, 0.5) 0px 6px 27px 0px;
          --shadow-xl-4: rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
        }