lovi___style_reference:
  info: "> prescription violet on porcelain"

  theme: "light"

  info: "Lóvi operates as a prescription-grade beauty interface: deep indigo ink on near-white porcelain, with a single saturated violet as the brand voice. The visual system is deliberately clinical-minimal — almost all surfaces are paper-white or bone, borders are hairline or non-existent, and the only significant shadow is a single low-opacity elevation wash. Typography is split between a custom geometric display face (ES Rebond Grotesque) for headlines and a neutral sans (Inter) for body, creating a clear hierarchy without color shouting. The rich chromatic spectrum detected in raw data (pinks, greens, oranges) is almost entirely decorative or illustrative — design-system tokens are austere: one brand violet, a muted lavender for secondary text, and a handful of semantic accents. Every screen should feel like a clinical leaflet: calm, confident, printed rather than rendered."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Indigo Ink | `#151581` | `--color-indigo-ink` | Primary headlines, body emphasis, and brand voice — this is the only color that carries the brand identity. All top-level headings and primary body text are set in this violet rather than black, giving every screen a tinted authority without ever feeling decorative |"
    info: "| Electric Violet | `linear-gradient(270deg, rgba(102, 127, 255, 0.8) 19.614%, rgba(206, 162, 255, 0.8) 50.0389%, rgba(255, 133, 177, 0.8) 86.0908%)` | `--color-electric-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color; Voice-bar and scan-overlay gradient sweeping Electric Violet → Lilac → Petal Blush — the signature visual of the AI interaction moment |"
    info: "| Lavender Mist | `#a1a1cd` | `--color-lavender-mist` | Secondary body text, muted links, and sub-labels — sits one step down from Indigo Ink on the same hue, creating a tonal ladder without introducing a different color family |"
    info: "| Lilac Accent | `#9f73e6` | `--color-lilac-accent` | Decorative and illustrative accent — used in iconography, gradient midpoints, and the scan/voice visual treatment rather than for UI controls |"
    info: "| Petal Blush | `#de62de` | `--color-petal-blush` | Decorative accent in illustrations and the brand gradient — supports the scan/face-overlay visual treatment, not part of the UI palette |"
    info: "| Verified Green | `#00bb76` | `--color-verified-green` | Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Alert Rose | `#f25c75` | `--color-alert-rose` | Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Info Blue | `#20a2e3` | `--color-info-blue` | Blue supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Porcelain | `#f6f6fa` | `--color-porcelain` | Dominant page canvas — every section breathes on this near-white, slightly cool surface |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, phone mockup screen, and elevated content blocks — sits one step above Porcelain for subtle layering |"
    info: "| Bone | `#f6f5f4` | `--color-bone` | Warm surface for review cards and section blocks that need tonal separation from the cool Porcelain canvas |"
    info: "| Fog | `#d6d6d6` | `--color-fog` | Hairline borders, divider lines, and the ambient shadow tint source — the only structural gray in the system |"
    info: "| Pebble | `#bfbfbd` | `--color-pebble` | Inactive controls, placeholder fills, and tertiary borders — warm gray that recedes |"
    info: "| Graphite | `#292824` | `--color-graphite` | Dark mode text and icon fills — near-black with a faint warm cast, used when maximum contrast is needed against light surfaces |"
    info: "| Ash | `#949392` | `--color-ash` | Secondary metadata, timestamps, and de-emphasized body text — sits between Graphite and Pebble in the neutral scale |"

  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"

    es_rebond_grotesque___display_and_heading_face___used_at_28_48px_weight_400_for_hero_headlines__section_titles__and_brand_statements__the_geometric_construction_and_uniform_weight_no_bold_create_an_anti_convention_restraint__authority_through_proportions__not_stroke_thickness__the__ss02__feature_setting_activates_a_specific_alternate_glyph_set_that_gives_the_headlines_their_slightly_architectural_feel__substitute__inter_tight_or_manrope_as_a_free_alternative__though_the_exact_geometric_warmth_will_differ_____font_es_rebond_grotesque:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 20px, 22px, 28px, 32px, 44px, 48px"
      - "**Line height:** 0.91–1.14"
      - "**Letter spacing:** -0.0420em at 48px, -0.0360em at 44px, -0.0310em at 32px, -0.0230em at 28px"
      - "**OpenType features:** `\"ss02\" on`"
      - "**Role:** Display and heading face — used at 28–48px weight 400 for hero headlines, section titles, and brand statements. The geometric construction and uniform weight (no bold) create an anti-convention restraint: authority through proportions, not stroke thickness. The 'ss02' feature setting activates a specific alternate glyph set that gives the headlines their slightly architectural feel. Substitute: Inter Tight or Manrope as a free alternative, though the exact geometric warmth will differ."

    es_rebond_grotesque_medium___sub_heading_and_emphasis_face___used_for_14_22px_text_that_needs_a_touch_more_presence_than_inter_body__like_card_titles_and_emphasized_inline_text_within_body_copy_____font_es_rebond_grotesque_medium:
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 20px, 22px"
      - "**Line height:** 1.09–1.25"
      - "**Letter spacing:** -0.0450em at 22px, -0.0360em at 20px, -0.0310em at 16px, -0.0250em at 14px"
      - "**Role:** Sub-heading and emphasis face — used for 14–22px text that needs a touch more presence than Inter body, like card titles and emphasized inline text within body copy."

    inter___primary_body_and_ui_face___covers_all_functional_text_from_9px_metadata_to_24px_subheadings__weight_400_for_body__500_for_labels_and_emphasis__600_for_strong_ui_elements__substitute__keep_inter___it_s_already_free_and_ubiquitous_____font_inter:
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 9px, 12px, 14px, 16px, 18px, 24px"
      - "**Line height:** 1.11–1.43"
      - "**Letter spacing:** -0.0620em at 24px down to -0.0190em at 9px — a continuous tightening scale"
      - "**Role:** Primary body and UI face — covers all functional text from 9px metadata to 24px subheadings. Weight 400 for body, 500 for labels and emphasis, 600 for strong UI elements. Substitute: keep Inter — it's already free and ubiquitous."

    geist___secondary_body_face_for_specific_content_blocks___used_where_a_slightly_different_rhythm_is_desired__the__dlig___ss01___ss02___ss06__features_activate_geist_s_discretionary_ligatures_and_alternate_sets_for_a_more_refined_reading_experience__substitute__inter_close_enough_or_geist_sans_free_____font_geist:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 18px"
      - "**Line height:** 1.22, 1.38"
      - "**Letter spacing:** -0.0310em, -0.0280em"
      - "**OpenType features:** `\"dlig\" on, \"ss01\" on, \"ss02\" on, \"ss06\" on`"
      - "**Role:** Secondary body face for specific content blocks — used where a slightly different rhythm is desired. The 'dlig', 'ss01', 'ss02', 'ss06' features activate Geist's discretionary ligatures and alternate sets for a more refined reading experience. Substitute: Inter (close enough) or Geist Sans (free)."

    inter_medium___inter_medium___detected_in_extracted_data_but_not_described_by_ai____font_inter_medium:
      - "**Weights:** 500"
      - "**Sizes:** 14px, 16px, 20px, 24px"
      - "**Line height:** 1.2, 1.25, 1.29"
      - "**Letter spacing:** -0.071, -0.05, -0.044, -0.042, -0.037, -0.031"
      - "**Role:** Inter-Medium — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.25px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | -0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.38 | -0.44px | `--text-body` |"
      info: "| body-lg | 18px | 1.38 | -0.5px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.25 | -1.49px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.14 | -0.64px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.05 | -0.99px | `--text-heading` |"
      info: "| heading-lg | 44px | 0.92 | -1.58px | `--text-heading-lg` |"
      info: "| display | 48px | 0.91 | -2.02px | `--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: "| 52 | 52px | `--spacing-52` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 12px |"
      info: "| cards | 24px |"
      info: "| images | 16px |"
      info: "| buttons | 48px |"
      info: "| phone-mockup | 36-40px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41,...` | `--shadow-xl` |"

    layout:

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

  components:

    top_navigation:
      role: "Sticky minimal header with brand mark and app store link"

      info: "Pure white background, 16px horizontal padding. Brand mark (Lóvi logotype) at left in Indigo Ink (#151581), App Store download badge at right — a standard 135×40px black pill with Apple logo and 'Download on the App Store' text. No nav links, no menu — the page is a single-scroll landing."

    award_banner:
      role: "Pill-shaped trust badge floating above the hero headline"

      info: "White pill with 9999px radius, 2px vertical padding, subtle border. Contains a sparkle emoji and 'Lóvi won Beauty Innovation Award!' in Inter 12px weight 400, Indigo Ink. Soft, understated social proof — not a loud banner."

    hero_headline_block:
      role: "Centered three-line display headline with subtext"

      info: "ES Rebond Grotesque 48px weight 400, Indigo Ink, letter-spacing -2.02px, line-height 0.91. Three lines, centered. Subtext in Inter 18px weight 400, Lavender Mist (#a1a1cd), 16px margin-top."

    phone_mockup_with_face_scan:
      role: "Hero visual — iPhone frame with live face scan interface"

      info: "iPhone device frame at ~320px wide, 40px border-radius, the signature dual shadow (rgba(36,36,41,0.07) 0px 8px 34px + rgba(37,36,41,0.09) 0px 1px 2px). Screen shows a cropped face photograph with 'Face scan in progress...' text in white at top. The scan overlay is the most visually complex element on the page."

    voice_input_bar:
      role: "Bottom-of-screen input pill within the phone mockup"

      info: "Translucent glass bar at phone bottom, 24px radius, the brand gradient (blue→purple→pink) at 0.8 opacity as background. Contains 'Ask Lóvi anything' placeholder text in white Inter 14px and a waveform icon at right. This is the signature gradient moment."

    feature_description_block:
      role: "Scroll-reveal text block beneath the hero"

      info: "Two-paragraph feature copy in ES Rebond Grotesque Medium 22px, Indigo Ink, left-aligned, max-width ~480px. Second paragraph uses a scroll-fade effect (text reveals as user scrolls past). Scattered emoji icons (🌈, 👃, 💎) are inline with the text for visual punctuation."

    review_card:
      role: "User testimonial with star rating and verified badge"

      info: "White card on Porcelain background, no border, 24px padding, 24px radius. Top row: 5 green stars (#00bb76) left, 'Verified' badge in Verified Green right. Title in Inter Medium 16px Indigo Ink, body in Inter 14px weight 400 Graphite. 3-column grid with 16px gap. Very card-light — no shadow, no border, just tonal separation from the canvas."

    verified_badge:
      role: "Trust indicator on review cards"

      info: "Inline text 'Verified' in Inter 12px weight 500, Verified Green (#00bb76). No pill, no background — just the green text. Restrained but unmistakable."

    star_rating:
      role: "5-star display on review cards"

      info: "5 small green star icons (#00bb76), ~14px each, inline. The green stars instead of gold/orange is a deliberate brand choice — medical-verified rather than entertainment-positive."

    medical_authority_section:
      role: "'Medically backed by professionals' section with expert cards"

      info: "Section title in ES Rebond Grotesque 28px Indigo Ink, centered, 'Medically backed by professionals' format. Below: 3-column card grid with 16px gap. Each card: oval/circular cropped photo of a doctor (8px radius, aspect ratio ~3:4), name in Inter Medium 16px Indigo Ink below."

    doctor_expert_card:
      role: "Professional profile card in the medical authority section"

      info: "White background, 24px radius, 24px padding. Portrait photo at top in 8px-radius rounded rectangle. Name in ES Rebond Grotesque Medium 20px Indigo Ink, title in Inter 14px Lavender Mist. No border, no shadow — tonal layering only. Circular right-arrow button at 48×48px for carousel navigation."

    carousel_arrow:
      role: "Right/left navigation for scrollable card rows"

      info: "48×48px circle, white background, Graphite arrow icon centered. No border, subtle shadow on hover only. Sits overlapping the right edge of the card row at vertical center."

    section_container:
      role: "Large rounded section block (reviews, professionals)"

      info: "White or Bone background, 40px radius, 48-64px internal padding, 24px gap from neighboring sections. These containers float on the Porcelain canvas and carry the subtle dual shadow. The 40px radius is a signature — much larger than typical card rounding."

    beauty_award_seal:
      role: "Circular trust badge in bottom-right corner"

      info: "Small circular seal (~48px diameter) in bottom-right viewport position, dark background with white text. Acts as a persistent trust signal across scroll. Fixed position."

  do_s_and_don_ts:

    do:
      - "Set all primary headings and body text in Indigo Ink (#151151) — never pure black (#000000). The violet is the brand voice; black would make the page feel generic."
      - "Use ES Rebond Grotesque for all display text 28px and above, weight 400 only. The uniform weight is the signature — do not introduce bold headlines."
      - "Apply 24px radius to cards and 40-48px radius to large section containers. The contrast between card rounding (24px) and section rounding (40px) is what makes the layout feel like floating tablets rather than nested boxes."
      - "Use the dual shadow pattern (rgba(36,36,41,0.07) 0px 8px 34px 0px + rgba(37,36,41,0.09) 0px 1px 2px 0px) for any element that needs elevation. This is the only shadow in the system."
      - "Center-align all hero and section-level content. Left-align only within cards and feature description blocks. The centered rhythm is essential to the clinical-leaflet feel."
      - "Reserve the brand gradient (blue→purple→pink) exclusively for the voice input bar and scan-related overlays. No other element should use multi-color fills."
      - "Use Verified Green (#00bb76) for all trust signals — stars, checkmarks, verified badges. Never use gold or yellow for ratings."

    don_t:
      - "Do not use bold or semibold display headlines. ES Rebond Grotesque at weight 400 is the rule; weight 500+ breaks the restraint."
      - "Do not add colored buttons, filled CTAs, or solid action backgrounds. The system has no distinct CTA color — actions should be neutral pills, ghost outlines, or text links."
      - "Do not use borders on cards. Use tonal layering (white card on Porcelain canvas) or the dual shadow for separation. Borders make the design feel boxy."
      - "Do not introduce new colors beyond the palette. The rich chromatic spectrum in the data is decorative/illustrative only — UI must stay in the violet-on-white family plus semantic accents."
      - "Do not use tight line-heights on body text. Body copy needs 1.29-1.38 line-height — the headlines are tight (0.91-1.14), but body should breathe."
      - "Do not place the brand gradient on large backgrounds, hero sections, or decorative shapes. It is a micro-element treatment only — the voice bar and scan overlay are its only homes."
      - "Do not use more than 3 columns in any grid. The review and expert sections use 3 columns max; wider content should stack vertically."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f6f6fa` | Dominant page background — the cool near-white that every section sits on |"
    info: "| 1 | Card | `#ffffff` | Elevated content blocks, phone mockup screen, and review cards |"
    info: "| 2 | Warm Block | `#f6f5f4` | Tonal section backgrounds and review containers for warm separation |"

  elevation:

    - "**Phone mockup:** `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`"
    - "**Section cards:** `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`"

  imagery:

    info: "Photography is the dominant visual medium — real human faces fill the hero (cropped, mid-scan) and the medical authority section (full professional portraits). Treatment: tight crops, natural skin tones, no heavy filters, no duotone. The faces are always authentic and slightly imperfect — freckled, varied skin tones — reinforcing the medical-credibility message. The phone mockup overlays a live scan treatment on one face. Iconography is minimal: scattered emoji (🌈 👃 💎) appear inline with feature copy for visual punctuation, and small sparkle/award glyphs in badges. No illustrations, no 3D renders, no abstract graphics — the design is photographic + typographic only. The beauty award seal in the bottom-right is a small dark circular badge that persists across scroll."

  layout:

    info: "Single-column centered layout, max-width 1200px, with all content centered horizontally. The hero is a vertical stack: award pill → headline → subtext → phone mockup, with generous vertical breathing room (80px+ between elements). Below the hero, sections alternate between full-width white containers with 40px radius floating on the Porcelain canvas, and direct-on-canvas content blocks. The review section uses a 3-column card grid. The medical authority section uses a 3-column card grid with a carousel arrow for overflow. Navigation is a minimal top bar — no menu, no links, just logo and App Store badge. No sidebar, no sticky elements beyond the award seal. The overall rhythm is: generous whitespace, centered stacks, horizontal grids only when comparing (reviews, experts). Sections are separated by large vertical gaps (80px) rather than dividers — the whitespace IS the divider."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #151581 (Indigo Ink)"
    - "Text (secondary): #a1a1cd (Lavender Mist)"
    - "Text (body neutral): #292824 (Graphite)"
    - "Background (canvas): #f6f6fa (Porcelain)"
    - "Background (card): #ffffff (Paper White)"
    - "Border/divider: #d6d6d6 (Fog)"
    - "Accent: #5465ff (Electric Violet)"
    - "Verified/trust: #00bb76 (Verified Green)"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Create a hero section:* Porcelain (#f6f6fa) background. Headline 'Science-backed AI Cosmetologist you can trust' at ES Rebond Grotesque 48px weight 400, #151581, letter-spacing -2.02px, line-height 0.91, centered. Subtext 'Focused around you and your beauty' in Inter 18px weight 400, #a1a1cd, centered, 16px margin-top. Below: iPhone mockup 320px wide, 40px radius, shadow rgba(36,36,41,0.07) 0px 8px 34px 0px + rgba(37,36,41,0.09) 0px 1px 2px 0px."

    - "*Create a review card:* White (#ffffff) background, 24px radius, 24px padding, no border. Top row: 5 green stars (#00bb76) at 14px left-aligned, 'Verified' text in Inter 12px weight 500 #00bb76 right-aligned. Title in ES Rebond Grotesque Medium 16px #151581, body in Inter 14px weight 400 #292824. Place on Porcelain (#f6f6fa) canvas with 16px gap in a 3-column grid."

    - "*Create a voice input bar:* 24px radius, the brand gradient as background: linear-gradient(270deg, rgba(102,127,255,0.8) 19.6%, rgba(206,162,255,0.8) 50%, rgba(255,133,177,0.8) 86%). Placeholder text 'Ask Lóvi anything' in Inter 14px white, waveform icon right-aligned. Height ~44px, full width of container."

    - "*Create a section container:* White (#ffffff) background, 40px radius, 64px padding all sides. Section title in ES Rebond Grotesque 28px weight 400 #151581, centered. Shadow: rgba(36,36,41,0.07) 0px 8px 34px 0px. Contains a 3-column card grid with 16px gap."

    - "*Create a doctor profile card:* White background, 24px radius, 24px padding. Portrait photo 8px radius at top, aspect 3:4. Name in ES Rebond Grotesque Medium 20px #151581 below photo, title in Inter 14px #a1a1cd. No border, no shadow — sits directly in the section grid."

  gradient_system:

    the_brand_has_one_signature_gradient: "blue→purple→pink at 0.8 opacity (linear, 270deg). This appears exclusively on the voice input bar and potentially the scan overlay — it is the only moment of multi-color on the entire site. All other gradients in the raw data are decorative/illustrative (conic rainbow, radial green) and are not design-system tokens. Rule: if you need a gradient, use only the brand gradient. Never introduce new gradient directions or color stops."

  similar_brands:

    - "**Curology** — Same clinical-leaflet approach: near-white canvas, minimal borders, generous whitespace, photography-led hero, and a single brand color carrying the identity"
    - "**Hims** — Same prescription-grade visual language with violet-tinted text on cream surfaces, centered hero stacks, and trust-signal emphasis on medical authority"
    - "**Calm** — Same restraint philosophy — single accent color, large geometric display type, photography of real people, and tonal layering instead of borders"
    - "**Whoop** — Same minimal navigation (logo + single action), centered single-column hero, and clinical-white surface treatment with one signature accent"
    - "**Prose** — Same beauty-meets-clinical positioning with soft white surfaces, large rounded section containers, and an AI-product showcase through phone mockups"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-indigo-ink: #151581;
          --color-electric-violet: #5465ff;
          --gradient-electric-violet: linear-gradient(270deg, rgba(102, 127, 255, 0.8) 19.614%, rgba(206, 162, 255, 0.8) 50.0389%, rgba(255, 133, 177, 0.8) 86.0908%);
          --color-lavender-mist: #a1a1cd;
          --color-lilac-accent: #9f73e6;
          --color-petal-blush: #de62de;
          --color-verified-green: #00bb76;
          --color-alert-rose: #f25c75;
          --color-info-blue: #20a2e3;
          --color-porcelain: #f6f6fa;
          --color-paper-white: #ffffff;
          --color-bone: #f6f5f4;
          --color-fog: #d6d6d6;
          --color-pebble: #bfbfbd;
          --color-graphite: #292824;
          --color-ash: #949392;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-es-rebond-grotesque: 'ES Rebond Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-es-rebond-grotesque-medium: 'ES Rebond Grotesque Medium', 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: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-medium: 'Inter-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.25px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.44px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.38;
          --tracking-body-lg: -0.5px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -1.49px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.14;
          --tracking-heading-sm: -0.64px;
          --text-heading: 32px;
          --leading-heading: 1.05;
          --tracking-heading: -0.99px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: -1.58px;
          --text-display: 48px;
          --leading-display: 0.91;
          --tracking-display: -2.02px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* 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-52: 52px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-104: 104px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8-12px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 36px;
          --radius-3xl-5: 40px;
          --radius-3xl-6: 44px;
          --radius-full: 48px;
          --radius-full-2: 56px;
          --radius-full-3: 60px;
          --radius-full-4: 64px;
          --radius-full-5: 70px;
          --radius-full-6: 80px;
          --radius-full-7: 100px;
          --radius-full-8: 300px;
        
          /* Named Radii */
          --radius-tags: 12px;
          --radius-cards: 24px;
          --radius-images: 16px;
          --radius-buttons: 48px;
          --radius-phone-mockup: 36-40px;
        
          /* Shadows */
          --shadow-xl: rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #f6f6fa;
          --surface-card: #ffffff;
          --surface-warm-block: #f6f5f4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-indigo-ink: #151581;
          --color-electric-violet: #5465ff;
          --color-lavender-mist: #a1a1cd;
          --color-lilac-accent: #9f73e6;
          --color-petal-blush: #de62de;
          --color-verified-green: #00bb76;
          --color-alert-rose: #f25c75;
          --color-info-blue: #20a2e3;
          --color-porcelain: #f6f6fa;
          --color-paper-white: #ffffff;
          --color-bone: #f6f5f4;
          --color-fog: #d6d6d6;
          --color-pebble: #bfbfbd;
          --color-graphite: #292824;
          --color-ash: #949392;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-es-rebond-grotesque: 'ES Rebond Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-es-rebond-grotesque-medium: 'ES Rebond Grotesque Medium', 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: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-medium: 'Inter-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.25px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.44px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.38;
          --tracking-body-lg: -0.5px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -1.49px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.14;
          --tracking-heading-sm: -0.64px;
          --text-heading: 32px;
          --leading-heading: 1.05;
          --tracking-heading: -0.99px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: -1.58px;
          --text-display: 48px;
          --leading-display: 0.91;
          --tracking-display: -2.02px;
        
          /* 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-52: 52px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-104: 104px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-3xl-4: 36px;
          --radius-3xl-5: 40px;
          --radius-3xl-6: 44px;
          --radius-full: 48px;
          --radius-full-2: 56px;
          --radius-full-3: 60px;
          --radius-full-4: 64px;
          --radius-full-5: 70px;
          --radius-full-6: 80px;
          --radius-full-7: 100px;
          --radius-full-8: 300px;
        
          /* Shadows */
          --shadow-xl: rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px;
        }