letters___style_reference:
  info: "> morning clinic under open sky — a sterile white desk beneath a wash of soft blue, dotted with surgical-blue instruments."

  theme: "light"

  info: "Letters is a medical letterwriting tool that opens with an open-sky gradient hero — a soft blue atmospheric band that sets a calm, clinical tone before dropping into a clean white workspace. The system is 99% monochrome: pure white canvas, near-black text (#070709), pill-shaped dark CTAs, and 18px rounded cards floating on hairline shadows. One vivid blue (#2597d0) is reserved for functional punctuation — icons, micro-graphics, waveform players — never for buttons or large fills. Typography leans on Open Runde, a geometric humanist sans with aggressive negative tracking at display sizes (-0.04em at 80px) that tightens headlines into confident blocks. Components feel medical-instrument light: thin borders, generous card padding, pill buttons, and a reserved use of elevation that lets the sky hero do the emotional work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#070709` | `--color-obsidian` | Primary text, filled CTA buttons, and dark UI surfaces — near-black chosen over pure #000 to soften contrast against white canvas |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, and button text — the primary canvas across all sections below the hero |"
    info: "| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | Secondary card surfaces and section backgrounds — separates feature blocks from main canvas |"
    info: "| Sky Tint | `#d7e6f5` | `--color-sky-tint` | Card box-shadow tint and subtle blue-toned surface — keeps elevation feeling atmospheric rather than gray |"
    info: "| Charcoal | `#60606c` | `--color-charcoal` | Body text, secondary copy, and muted borders — the dominant neutral for non-heading content |"
    info: "| Slate | `#8b8b8b` | `--color-slate` | Tertiary text and inactive border states — used for placeholder labels and disabled affordances |"
    info: "| Ink | `#151515` | `--color-ink` | Heading color and strong dividers — slightly lighter than Obsidian for less severe emphasis |"
    info: "| Surgical Blue | `#2597d0` | `--color-surgical-blue` | Icon strokes, mic glyph, waveform player, and small functional accents — the single chromatic note across the interface |"
    info: "| Sky Gradient | `linear-gradient(180deg, #779bc1 0%, #9abfda 58%, #cbdcec 100%)` | `--color-sky-gradient` | Hero background — vertical wash from medium blue to near-white that establishes the medical-aspirational mood |"

  tokens___typography:

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

    open_runde___primary_display_and_heading_face___geometric_humanist_with_tight_tracking_at_large_sizes__the__0_04em_at_80px_compresses_the_headline_into_a_single_confident_block__use_for_all_headings__nav__and_large_text_____font_open_runde:
      - "**Substitute:** Inter Tight, General Sans, or Manrope"
      - "**Weights:** 400, 500, 600, 700, 900"
      - "**Sizes:** 10, 12, 14, 16, 17, 18, 20, 28, 44, 80"
      - "**Line height:** 0.90, 1.10, 1.20, 1.40, 1.49, 1.50"
      - "**Letter spacing:** -0.0400em at display (80px), -0.0100em at body (16-18px), normal at small (10-12px)"
      - "**OpenType features:** `'ss01' on`"
      - "**Role:** Primary display and heading face — geometric humanist with tight tracking at large sizes; the -0.04em at 80px compresses the headline into a single confident block. Use for all headings, nav, and large text."

    inter___secondary_body_and_ui_text___used_for_small_labels__nav_items__and_inline_links_where_a_more_neutral_reading_rhythm_is_needed__pairs_with_open_runde_for_hierarchy_contrast_____font_inter:
      - "**Substitute:** system-ui, -apple-system"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14"
      - "**Line height:** 1.20, 1.40, 1.50"
      - "**Letter spacing:** -0.0220em at 14px, -0.0100em at 14px"
      - "**Role:** Secondary body and UI text — used for small labels, nav items, and inline links where a more neutral reading rhythm is needed. Pairs with Open Runde for hierarchy contrast."

    the_doctor_freeversion___decorative_handwritten_doctor_s_note_face___used_only_in_the_before_after_card_illustrations_to_evoke_clinical_handwriting__not_for_functional_ui_text_____font_the_doctor_freeversion:
      - "**Substitute:** Caveat, Kalam"
      - "**Weights:** 400"
      - "**Sizes:** 14, 38"
      - "**Line height:** 0.90, 1.40"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Decorative handwritten/doctor's note face — used only in the Before/After card illustrations to evoke clinical handwriting. Not for functional UI text."

    open_runde_semibold___open_runde_semibold___detected_in_extracted_data_but_not_described_by_ai____font_open_runde_semibold:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 17px, 18px, 44px"
      - "**Line height:** 1.1, 1.32, 1.4, 1.49"
      - "**Letter spacing:** -0.04, -0.011, -0.01, -0.009"
      - "**Role:** Open Runde Semibold — detected in extracted data but not described by AI"

    open_runde_medium___open_runde_medium___detected_in_extracted_data_but_not_described_by_ai____font_open_runde_medium:
      - "**Weights:** 400"
      - "**Sizes:** 11px, 12px, 14px, 17px, 28px, 40px"
      - "**Line height:** 1.09, 1.2, 1.3, 1.33, 1.4, 1.43"
      - "**Letter spacing:** -0.08, -0.04, -0.012, -0.01, -0.007, -0.006, -0.001, 0.02"
      - "**Role:** Open Runde Medium — detected in extracted data but not described by AI"

    open_runde_regular___open_runde_regular___detected_in_extracted_data_but_not_described_by_ai____font_open_runde_regular:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px, 17px"
      - "**Line height:** 1.14, 1.33, 1.4, 1.43, 1.45"
      - "**Letter spacing:** -0.012, -0.01, -0.006"
      - "**Role:** Open Runde Regular — detected in extracted data but not described by AI"

    open_runde_bold___open_runde_bold___detected_in_extracted_data_but_not_described_by_ai____font_open_runde_bold:
      - "**Weights:** 400"
      - "**Sizes:** 20px, 28px"
      - "**Line height:** 1.2, 1.4"
      - "**Letter spacing:** -0.04, -0.01"
      - "**Role:** Open Runde Bold — 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.01px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | -0.01px | `--text-body-sm` |"
      info: "| body | 16px | 1.49 | -0.01px | `--text-body` |"
      info: "| body-lg | 18px | 1.4 | -0.01px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | -0.04px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.2 | -0.04px | `--text-heading-sm` |"
      info: "| heading | 44px | 1.1 | -0.04px | `--text-heading` |"
      info: "| display | 80px | 0.9 | -0.04px | `--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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 18px |"
      info: "| icons | 8px |"
      info: "| inputs | 12px |"
      info: "| buttons | 100px |"
      info: "| nav-pills | 100px |"
      info: "| large-cards | 32-48px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(228, 229, 231, 0.24) 0px 1px 2px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(23, 107, 197, 0.08) 0px 1px 1px 0px, rgba(23, 107, 1...` | `--shadow-subtle-3` |"
      info: "| xl | `rgba(16, 55, 132, 0.03) 0px 17px 37px 0px, rgba(16, 55, 1...` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 40-48px"
      - "**Element gap:** 12-16px"

  components:

    pill_primary_button:
      role: "Hero and feature CTAs — 'Sign up for free'"

      info: "Filled pill button, 100px border-radius, 12-16px vertical padding, 24px horizontal padding. Background: #070709 (Obsidian). Text: white, Open Runde 14-16px weight 500, letter-spacing -0.01em. Carries a four-layer soft drop shadow: rgba(36,36,40,0.1) 0 1px 2px, rgba(36,36,40,0.09) 0 3px 3px, rgba(36,36,40,0.05) 0 6px 4px, rgba(36,36,40,0.01) 0 11px 4px — a barely-perceptible lift."

    outlined_ghost_button:
      role: "Secondary actions, login, utility nav"

      info: "Pill-shaped (100px radius) with transparent fill, 1px border in #000 or #bebecc, Open Runde 14px weight 500 in #070709. Used in the nav bar for 'Login' — sits beside the filled Sign up button for visual contrast without competing for weight."

    feature_card:
      role: "Large product capability cards — 'Letters' and 'Transcribe' blocks"

      info: "White surface, 18-32px border-radius, generous 40-48px internal padding. Carries the signature blue-tinted shadow: rgba(16,55,132,0.03) 0 17px 37px, 0 67px 67px, 0 150px 90px — large, very low-opacity, atmospheric. Inside: pill tag at top with icon (envelope/mic in #2597d0), 28-44px heading in Open Runde weight 600, supporting copy in #60606c."

    upload_drop_zone:
      role: "Document upload affordance inside feature cards"

      info: "Dashed 1px border in #bebecc, 12px radius, 16px padding. Centered icon (envelope in #2597d0) above 12px Open Runde label. On hover: border darkens to #8b8b8b, no fill change."

    waveform_audio_player:
      role: "Consultation recording player inside Transcribe card"

      info: "White card with 12px radius, 16px padding. Horizontal waveform rendered in #2597d0 (surgical blue) against white — the single most expressive use of chromatic color in the product UI. Play/pause dot in matching blue."

    before_after_document_card:
      role: "Hero illustration showing transformation from handwritten to typed letter"

      info: "Two overlapping white cards, 12-18px radius, slight rotation for stacked effect. 'Before' card uses The Doctor FreeVersion font with cursive text; 'After' card uses Open Runde body text. Each card has a small pill tag with checkmark/icon in #2597d0 at the top."

    top_navigation_bar:
      role: "Site-wide primary navigation"

      info: "Sticky top bar, white background, 1px bottom border in #000 or transparent. Left: logo (Letters wordmark + icon). Center: horizontal nav links — 'Use cases', 'Features', 'Pricing', 'Our doctors' in Inter 14px weight 500, #070709. Right: 'Login' ghost button + 'Sign up' filled pill button (same as hero CTA)."

    pill_tag___chip:
      role: "Category labels inside feature cards (Letters, Transcribe)"

      info: "100px radius, 4-6px vertical padding, 10-14px horizontal padding. White background with 1px border in #000. Icon (envelope/mic in #2597d0) + label in Open Runde 12-14px weight 500, #070709."

    section_heading_block:
      role: "Section intros like 'Save [5] hours a week with Letters'"

      centered_stack: "28-44px Open Runde heading, weight 600, letter-spacing -0.04em, #070709. Optional inline number/emoji in #2597d0 for emphasis. No subtitle — heading stands alone on white."

    hero_headline:
      role: "Above-the-fold primary message"

      info: "80px Open Runde weight 600, line-height 0.90, letter-spacing -0.04em, white text. Two lines, tight stacked rhythm. Sits centered on the sky gradient with 20-28px between lines."

    hero_subtext:
      role: "Supporting copy below hero headline"

      info: "16-18px Open Runde weight 400, line-height 1.49, letter-spacing -0.01em, white. Two short lines, centered, max-width ~480px. Color is white at 90% opacity over the sky gradient for softness."

  do_s_and_don_ts:

    do:
      - "Use 100px border-radius for all buttons, tags, and pill-shaped elements — full rounding is the signature shape language"
      - "Set display headings at 80px Open Runde weight 600 with letter-spacing -0.04em and line-height 0.90 — the tight stack is a defining rhythm"
      - "Use #070709 (Obsidian) for all filled CTAs — never a chromatic button background, the near-black is the action color"
      - "Apply the sky gradient only to the hero band; keep all other sections on pure white or #f5f5f5"
      - "Reserve #2597d0 (Surgical Blue) for icons, waveform players, and small functional accents under 24px — never as a button fill or large surface"
      - "Use the blue-tinted shadow stack (rgba(16,55,132,0.03) at large blur radii) for feature cards to keep elevation feeling atmospheric rather than corporate"
      - "Center-align section headings and hero text — the layout rhythm is symmetrical, not asymmetric"
      - "Use 40-48px internal padding on feature cards to maintain the spacious, clinical density"

    don_t:
      - "Never use a chromatic color as a CTA button background — the system is intentionally monochrome for action"
      - "Never flatten the letter-spacing on large headings — the -0.04em at 44px+ is what makes Open Runde feel confident rather than generic"
      - "Never apply the sky gradient below the hero — it loses meaning if repeated across sections"
      - "Never use shadows with high opacity (>0.1) on cards — the system relies on barely-visible, large-radius shadows"
      - "Don't pair Open Runde with other geometric sans-serifs like Helvetica or Roboto — the specific humanist geometry is part of the brand"
      - "Never use The Doctor font for functional UI text — it is decorative only, for the handwritten note illustrations"
      - "Don't place white cards directly on the sky gradient without internal padding — the cards need breathing room from the atmospheric background"
      - "Avoid using #2597d0 for text longer than 2 words — it is for icons and micro-graphics, not body copy"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Sky Canvas | `#779bc1` | Hero gradient background — atmospheric top band |"
    info: "| 2 | Paper Canvas | `#ffffff` | Primary page background for all content sections below the hero |"
    info: "| 3 | Cloud Surface | `#f5f5f5` | Card and section backgrounds that need separation from the white canvas |"
    info: "| 4 | Sky Tint Surface | `#d7e6f5` | Subtle blue-tinted surface used in shadow tints and selected highlights |"
    info: "| 5 | Obsidian Surface | `#070709` | Filled CTA buttons, dark mode accents, and inverse UI elements |"

  elevation:

    - "**Feature Card:** `rgba(16, 55, 132, 0.03) 0px 17px 37px 0px, rgba(16, 55, 132, 0.03) 0px 67px 67px 0px, rgba(16, 55, 132, 0.02) 0px 150px 90px 0px`"
    - "**Pill Primary Button:** `rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0.09) 0px 3px 3px 0px, rgba(36, 36, 40, 0.05) 0px 6px 4px 0px, rgba(36, 36, 40, 0.01) 0px 11px 4px 0px`"
    - "**Upload Drop Zone:** `rgba(228, 229, 231, 0.24) 0px 1px 2px 0px`"
    - "**Blue Accent Element:** `rgba(23, 107, 197, 0.08) 0px 1px 1px 0px, rgba(23, 107, 197, 0.07) 0px 3px 3px 0px`"

  imagery:

    info: "Imagery is almost entirely UI-product — no lifestyle photography, no abstract 3D renders. The visual language is built from product cards showing the app's own interface: a Before/After document comparison, an upload zone with dashed border, and a waveform audio player. The only atmospheric visual is the sky gradient hero. Icons are flat, single-color line icons in #2597d0 (envelope, microphone, checkmark) — consistent stroke weight, no filled variants. Illustration style is restrained: product mockups on white with subtle rotation for depth, never tilted dramatically. The handwritten font (The Doctor) provides the only organic/handmade element, used exclusively to evoke clinical penmanship in the Before card."

  layout:

    info: "Full-bleed sky gradient hero with centered headline and subtext, CTA pill below. Transitions seamlessly to a white content area with generous section padding (80-120px). Feature sections use a 2-column grid of large rounded cards (18-32px radius) with equal proportions. Section headings are always centered, single-column, above the card grid. Navigation is a sticky white top bar with center-aligned link cluster and right-aligned auth actions. Overall rhythm: one atmospheric hero band, then alternating white and #f5f5f5 sections with consistent vertical breathing room. No sidebar, no mega-menu, no asymmetric layouts — the page reads as a calm, symmetrical column."

  agent_prompt_guide:

  quick_color_reference:
    - "text (primary): #070709 Obsidian"
    - "text (secondary): #60606c Charcoal"
    - "background: #ffffff Paper White"
    - "surface (alt): #f5f5f5 Cloud Gray"
    - "border: #000000 / #bebecc (use #bebecc for hairlines)"
    - "accent: #2597d0 Surgical Blue (icons/waveforms only)"
    - "primary action: #070709 (filled action)"

  3_5_example_component_prompts:
    - "**Hero section**: Full-bleed sky gradient background (linear-gradient 180deg, #779bc1 → #cbdcec). Centered 80px Open Runde weight 600 headline in white, letter-spacing -0.04em, line-height 0.90. Subtext: 18px Open Runde weight 400, white at 90% opacity, max-width 480px. Below: filled pill button — #070709 background, 100px radius, white text 'Sign up for free', 12px 24px padding, with the four-layer soft shadow stack."

    - "**Feature card**: White surface, 18px border-radius, 48px padding. Pill tag at top (100px radius, 1px black border, 4px 12px padding) with envelope icon in #2597d0 + label 'Letters' in Open Runde 12px weight 500. Below: 28px Open Runde weight 600 heading, then 16px weight 400 body in #60606c. Drop shadow: rgba(16,55,132,0.03) at 17px/67px/150px blur radii."

    - "**Upload drop zone**: 12px border-radius, 1px dashed border in #bebecc, 16px padding. Centered envelope icon in #2597d0, 12px label below in Open Runde weight 500. On hover: border darkens to #8b8b8b."

    - "**Waveform audio player**: White card, 12px radius, 16px padding. Horizontal audio waveform rendered in #2597d0 Surgical Blue across full width. Play/pause dot in matching blue at left."

    - "**Before/After document pair**: Two overlapping white cards (18px radius) with 8px rotation difference for stacked effect. Before card: The Doctor font cursive handwriting. After card: Open Runde 14px weight 400 body text. Each has a small pill tag with checkmark icon in #2597d0 at the top center."

    - "**Top navigation**: Sticky white bar, 1px bottom border. Left: 'Letters' wordmark + icon. Center: 4 nav links in Inter 14px weight 500, #070709. Right: outlined ghost 'Login' button (1px black border, 100px radius) + filled pill 'Sign up' button (#070709, 100px radius, white text)."

  typography_quick_reference:
    - "Display: 80px / 0.90 / -0.04em / weight 600"
    - "Heading: 44px / 1.10 / -0.04em / weight 600"
    - "Subheading: 28px / 1.20 / -0.04em / weight 600"
    - "Body: 16-18px / 1.40-1.49 / -0.01em / weight 400"
    - "Caption: 12px / 1.20 / -0.01em / weight 500"

  similar_brands:

    - "**Linear** — Same monochrome discipline with one restrained accent color, pill-shaped CTAs, and tight geometric sans-serif headings with negative tracking"
    - "**Notion** — Comfortable density with rounded cards floating on near-white surfaces and a minimal icon-driven visual language"
    - "**Cal.com** — Light theme with generous card padding, 18-32px rounded corners, and a single brand color used sparingly for icons and micro-interactions"
    - "**Mercury** — Near-black filled pill CTAs against white surfaces, clinical spaciousness, and the use of gradient hero bands as the only atmospheric color moment"
    - "**Vercel** — Minimal monochrome palette with sharp typographic hierarchy and pill-shaped interactive elements throughout"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #070709;
          --color-paper-white: #ffffff;
          --color-cloud-gray: #f5f5f5;
          --color-sky-tint: #d7e6f5;
          --color-charcoal: #60606c;
          --color-slate: #8b8b8b;
          --color-ink: #151515;
          --color-surgical-blue: #2597d0;
          --color-sky-gradient: #779bc1;
          --gradient-sky-gradient: linear-gradient(180deg, #779bc1 0%, #9abfda 58%, #cbdcec 100%);
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde: 'Open Runde', 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-the-doctor-freeversion: 'The Doctor FreeVersion', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-semibold: 'Open Runde Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-medium: 'Open Runde Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-regular: 'Open Runde Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-bold: 'Open Runde Bold', 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.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.49;
          --tracking-body: -0.01px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.04px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.04px;
          --text-heading: 44px;
          --leading-heading: 1.1;
          --tracking-heading: -0.04px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -0.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* 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-36: 36px;
          --spacing-40: 40px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 40-48px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 36px;
          --radius-3xl-4: 40px;
          --radius-full: 48px;
          --radius-full-2: 60px;
          --radius-full-3: 100px;
          --radius-full-4: 120px;
          --radius-full-5: 135px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 18px;
          --radius-icons: 8px;
          --radius-inputs: 12px;
          --radius-buttons: 100px;
          --radius-nav-pills: 100px;
          --radius-large-cards: 32-48px;
        
          /* Shadows */
          --shadow-subtle: rgba(228, 229, 231, 0.24) 0px 1px 2px 0px;
          --shadow-subtle-2: rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0.09) 0px 3px 3px 0px, rgba(36, 36, 40, 0.05) 0px 6px 4px 0px, rgba(36, 36, 40, 0.01) 0px 11px 4px 0px;
          --shadow-subtle-3: rgba(23, 107, 197, 0.08) 0px 1px 1px 0px, rgba(23, 107, 197, 0.07) 0px 3px 3px 0px;
          --shadow-xl: rgba(16, 55, 132, 0.03) 0px 17px 37px 0px, rgba(16, 55, 132, 0.03) 0px 67px 67px 0px, rgba(16, 55, 132, 0.02) 0px 150px 90px 0px;
        
          /* Surfaces */
          --surface-sky-canvas: #779bc1;
          --surface-paper-canvas: #ffffff;
          --surface-cloud-surface: #f5f5f5;
          --surface-sky-tint-surface: #d7e6f5;
          --surface-obsidian-surface: #070709;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #070709;
          --color-paper-white: #ffffff;
          --color-cloud-gray: #f5f5f5;
          --color-sky-tint: #d7e6f5;
          --color-charcoal: #60606c;
          --color-slate: #8b8b8b;
          --color-ink: #151515;
          --color-surgical-blue: #2597d0;
          --color-sky-gradient: #779bc1;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde: 'Open Runde', 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-the-doctor-freeversion: 'The Doctor FreeVersion', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-semibold: 'Open Runde Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-medium: 'Open Runde Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-regular: 'Open Runde Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-runde-bold: 'Open Runde Bold', 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.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.49;
          --tracking-body: -0.01px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.01px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.04px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.04px;
          --text-heading: 44px;
          --leading-heading: 1.1;
          --tracking-heading: -0.04px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -0.04px;
        
          /* 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-36: 36px;
          --spacing-40: 40px;
          --spacing-52: 52px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 36px;
          --radius-3xl-4: 40px;
          --radius-full: 48px;
          --radius-full-2: 60px;
          --radius-full-3: 100px;
          --radius-full-4: 120px;
          --radius-full-5: 135px;
        
          /* Shadows */
          --shadow-subtle: rgba(228, 229, 231, 0.24) 0px 1px 2px 0px;
          --shadow-subtle-2: rgba(36, 36, 40, 0.1) 0px 1px 2px 0px, rgba(36, 36, 40, 0.09) 0px 3px 3px 0px, rgba(36, 36, 40, 0.05) 0px 6px 4px 0px, rgba(36, 36, 40, 0.01) 0px 11px 4px 0px;
          --shadow-subtle-3: rgba(23, 107, 197, 0.08) 0px 1px 1px 0px, rgba(23, 107, 197, 0.07) 0px 3px 3px 0px;
          --shadow-xl: rgba(16, 55, 132, 0.03) 0px 17px 37px 0px, rgba(16, 55, 132, 0.03) 0px 67px 67px 0px, rgba(16, 55, 132, 0.02) 0px 150px 90px 0px;
        }