deel___style_reference:
  info: "> Global command split-screen — a war-room purple panel beside a neon product showcase, then warm cream scrolls below."

  theme: "mixed"

  info: "Deel operates in contrasting registers — a deep purple-black (#201547) hero punched through with electric yellow-green product shots, then a cream-warm (#fffbf4) body that stretches through the rest of the page. The dual-zone layout is the signature move: dark/vivid left panel with serif-weight condensed Bagoss headlines, fluorescent product imagery on the right, then warmth and space below. Accent violet (#a98df6 to #5938b7) appears only within the dark hero for the word 'anywhere.' and CTAs — never in the light body sections. Pill-shaped buttons (200px radius) coexist with 24px-radius cards, creating a soft geometry throughout. The custom Bagoss family — in Condensed, Extended, Standard, and VF cuts — gives the brand typographic range unavailable through any system font."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Deep Cosmos | `#201547` | `--color-deep-cosmos` | Hero section background — the darkest brand surface, houses white headlines and violet accent text |"
    info: "| Violet Mid | `#5938b7` | `--color-violet-mid` | CTA buttons in hero context, pill backgrounds — saturated mid-violet bridges cosmos and accent |"
    info: "| Lavender Pulse | `#a98df6` | `--color-lavender-pulse` | Headline accent text ('anywhere.') in dark hero — vivid violet pops against #201547 |"
    info: "| Pale Amethyst | `#c4b1f9` | `--color-pale-amethyst` | Soft violet surface tint, used as background on secondary dark panels |"
    info: "| Indigo Shadow | `#381f89` | `--color-indigo-shadow` | Deep violet body text or decorative elements within dark sections |"
    info: "| Electric Lime | `#ffcf25` | `--color-electric-lime` | Product screenshot accent, border highlights — the neon counterpoint to deep purple creating visual tension |"
    info: "| Amber Core | `#faaf00` | `--color-amber-core` | Icon fills and body-level accent color in light sections — warm, confident |"
    info: "| Butter Glow | `#ffe27c` | `--color-butter-glow` | Light amber for icon strokes, decorative fills — softer version of Amber Core |"
    info: "| Sky Mist | `#d8ebff` | `--color-sky-mist` | Button and panel backgrounds in light sections — very pale blue-gray tint |"
    info: "| Celadon Check | `#53a945` | `--color-celadon-check` | Success state chip background (e.g. green checkmark on Crypto selection chip) |"
    info: "| Powder Blue | `#b1d8fc` | `--color-powder-blue` | UI illustration fill in product screenshots |"
    info: "| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, icon fills, borders — near-universal dark token |"
    info: "| Graphite | `#1b1b1b` | `--color-graphite` | Body text, nav labels, CTA button background (dark pill), footer text |"
    info: "| Obsidian | `#141414` | `--color-obsidian` | Dark section backgrounds, deepest surface in light-theme stacks |"
    info: "| Charcoal | `#404040` | `--color-charcoal` | Mid-dark surface, secondary panel backgrounds |"
    info: "| Slate | `#5f5f5f` | `--color-slate` | Secondary body text, metadata, captions |"
    info: "| Fog | `#767676` | `--color-fog` | Tertiary text, muted labels |"
    info: "| Ash | `#a4a4a4` | `--color-ash` | Disabled states, light icon tones |"
    info: "| Bone | `#dbdbdb` | `--color-bone` | Border separators, input outlines, card dividers |"
    info: "| Linen | `#d9d0ca` | `--color-linen` | Warm-toned rule lines and subtle separators in cream body sections |"
    info: "| Warm Cream | `#fffbf4` | `--color-warm-cream` | Page body background — warm off-white gives light sections a tactile, paper-like quality vs pure white |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, nav background, input backgrounds, button text on dark |"
    info: "| Near Black | `#101828` | `--color-near-black` | High-contrast body text alternative to pure black |"

  tokens___typography:

    bagosscondensedfont___primary_display_and_hero_headlines___the_condensed_cut_lets_oversized_text_fill_wide_containers_without_breaking__the__0_005em_tracking_tightens_the_text_mass__this_is_deel_s_most_distinctive_typographic_voice__large__dense__confident_headlines_that_compress_horizontal_space_____font_bagosscondensedfont:
      - "**Weights:** 500"
      - "**Sizes:** 16px, 24px, 28px, 44px, 60px"
      - "**Line height:** 1.00–1.15"
      - "**Letter spacing:** -0.005em"
      - "**OpenType features:** `\"ss01\" on, \"ss02\" on`"
      - "**Role:** Primary display and hero headlines — the condensed cut lets oversized text fill wide containers without breaking; the -0.005em tracking tightens the text mass. This is Deel's most distinctive typographic voice: large, dense, confident headlines that compress horizontal space."

    bagossextendedfont___section_headers_where_width_is_the_feature___extended_cut_fills_horizontal_space_at_large_sizes__used_for_spread_out_banner_headlines_like__the_global_people_platform_____font_bagossextendedfont:
      - "**Weights:** 600"
      - "**Sizes:** 30px, 64px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.005em"
      - "**OpenType features:** `\"ss02\" on`"
      - "**Role:** Section headers where width is the feature — extended cut fills horizontal space at large sizes, used for spread-out banner headlines like 'The Global People Platform'"

    bagossstandardfont___ui_labels__badge_text__small_captions___the_workhorse_standard_cut_at_utility_sizes____font_bagossstandardfont:
      - "**Weights:** 500, 600"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.50–1.70"
      - "**Letter spacing:** 0.015em"
      - "**OpenType features:** `\"ss02\" on, \"ss01\" on`"
      - "**Role:** UI labels, badge text, small captions — the workhorse standard cut at utility sizes"

    bagossstandardvf___navigation_items_and_button_labels___variable_font_version_allows_optical_tuning_at_this_critical_interactive_size____font_bagossstandardvf:
      - "**Weights:** 500"
      - "**Sizes:** 15px"
      - "**Line height:** 1.60"
      - "**Letter spacing:** 0.025em"
      - "**OpenType features:** `\"ss02\" on, \"ss01\" on`"
      - "**Role:** Navigation items and button labels — variable-font version allows optical tuning at this critical interactive size"

    inter___all_body_copy__subheadings__stats__footer_text__input_values___inter_handles_everything_below_headline_level__the_wide_weight_range_400_700_creates_internal_hierarchy_without_switching_families__ss01_ss02_features_keep_it_feeling_designed_rather_than_default_____font_inter:
      - "**Substitute:** Inter (Google Fonts)"
      - "**Weights:** 400, 460, 500, 560, 600, 700"
      - "**Sizes:** 10px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 60px"
      - "**Line height:** 1.40–1.60"
      - "**Letter spacing:** varies: -0.01em at large sizes, +0.006em to +0.025em at small sizes, +0.06em for all-caps labels"
      - "**OpenType features:** `\"ss01\" on, \"ss02\" on`"
      - "**Role:** All body copy, subheadings, stats, footer text, input values — Inter handles everything below headline level. The wide weight range (400–700) creates internal hierarchy without switching families. ss01/ss02 features keep it feeling designed rather than default."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | — | `--text-caption` |"
      info: "| body | 15px | 1.6 | 0.375px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 44px | 1.05 | -0.22px | `--text-heading` |"
      info: "| heading-lg | 60px | 1 | -0.3px | `--text-heading-lg` |"
      info: "| display | 64px | 1 | 0.32px | `--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: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 200px |"
      info: "| cards | 24px |"
      info: "| chips | 100px |"
      info: "| icons | 5px |"
      info: "| inputs | 200px |"
      info: "| panels | 12px |"
      info: "| buttons | 200px |"
      info: "| buttonsMedium | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27...` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8-16px"

  components:

    dark_hero_cta_button:
      role: "Primary call-to-action within the dark hero panel"

      info: "Pill-shaped button (200px radius), background #5938b7, white text, Inter or BagossStandardVF 15px weight 500, padding 8px 16px. Small right-facing arrow icon. On #201547 backgrounds only."

    ghost_pill_navigation_button:
      role: "Nav items with dropdown indicators"

      info: "Transparent background, #1b1b1b text, 200px border-radius, padding 8px 12px, BagossStandardVF 15px weight 500, letter-spacing 0.025em. Includes chevron icon at 12px. No border in default state."

    dark_filled_pill_button:
      role: "'Book a demo' CTA in the top nav"

      info: "Background #1b1b1b, white text, 200px border-radius, padding 8px 16px, BagossStandardVF 15px weight 500. The highest-contrast nav element — only solid-fill nav button."

    ghost_underline_button:
      role: "Text-level inline CTAs like 'Learn more →'"

      info: "Transparent background, #1b1b1b text, no border-radius (0px), padding 8px 0px, no horizontal padding. Arrow character appended. Signals navigation without visual weight."

    pill_input_with_search:
      role: "Search and email capture fields"

      info: "Background #ffffff, border rgba(27,27,27,0.16) 1px, border-radius 200px, padding 1px 54px 1px 24px. Right-side icon or button inset at 54px. Inter 14px weight 400 placeholder text in #767676."

    feature_product_card:
      role: "Product feature cards (Deel Payroll, Deel HR, Deel IT)"

      info: "Background #fffbf4 (warm cream), border-radius 24px, no shadow, padding 24px. Contains a bold label in BagossCondensedFont 24px weight 500, descriptor in Inter 16px weight 400 #5f5f5f, and a product screenshot cropped at bottom. Border: 1px solid #dbdbdb."

    dark_stats_panel:
      role: "Stat callout panels on dark background sections"

      info: "Background rgba(255,255,255,0.05) — frosted white tint at 5% on dark surfaces. Border-radius 24px. No shadow. Contains bold stat in BagossCondensedFont 44px weight 500, descriptor in Inter 15px #d9d0ca."

    currency_selection_chip:
      role: "Illustrative UI chips showing selectable options (ARS, CAD, USD, etc.)"

      info: "Background #ffffff or rgba(255,255,255,0.9), border 1px solid #dbdbdb, border-radius 200px, padding 8px 16px. Flag emoji + currency code in Inter 16px weight 500 #1b1b1b. Active state adds green checkmark badge (#53a945)."

    customer_logo_badge:
      role: "Testimonial attribution chip (e.g. Robinhood badge on carousel)"

      info: "Background #ffffff, border-radius 16px, padding 6px 12px, contains company logo image at 16px height + company name in Inter 13px weight 500 #1b1b1b. Subtle box-shadow: rgba(27,27,27,0.16) 0px 16px 32px."

    trust_logo_strip:
      role: "Social proof logo row below hero"

      info: "Flat company wordmarks rendered in #a4a4a4 or #dbdbdb on #ffffff background. 16px vertical spacing between label ('TRUSTED BY 40,000+...') and logos. Labels use Inter 10px weight 600 letter-spacing 0.06em in Slate. Logos at approximately 80px wide, 24px tall."

    section_eyebrow_label:
      role: "Pre-heading category label (e.g. 'WHAT DEEL DOES')"

      info: "Inter 12px weight 600, letter-spacing 0.06em, all-caps, color #5f5f5f. No background. Left-aligned above the section heading. Creates category context without visual mass."

    stat_callout_row:
      role: "Three-column feature stat blocks in dark sections"

      info: "Dark background (#141414 or #1b1b1b), three equal columns each with bold lead text in BagossCondensedFont 24px weight 500 #ffffff, body in Inter 15px weight 400 #d9d0ca. 'Learn more →' or 'Book a demo →' ghost links at bottom of each column."

    hero_split_panel:
      role: "Primary homepage hero container"

      left_panel: "background #201547, padding 64px 48px. Right panel: background vivid product image with #ffcf25 accent border elements, no padding. Two-column 50/50 split at viewport width. Left contains BagossCondensedFont 60px headline in #ffffff with 'anywhere.' in #a98df6."

  do_s_and_don_ts:

    do:
      - "Use BagossCondensedFont at 44-60px weight 500 with -0.005em letter-spacing for all primary hero headlines inside dark (#201547) sections."
      - "Apply 200px border-radius to all pill buttons, search inputs, and currency chips — this is the system's defining shape token."
      - "Use #fffbf4 (Warm Cream) as the page body background, never pure white (#ffffff), for all light-theme content sections below the hero."
      - "Accent the single most emotionally charged word in each hero headline with #a98df6 (Lavender Pulse) — one word only, never a phrase."
      - "Pair dark (#141414 or #201547) section backgrounds with Inter body text in #d9d0ca (Linen) — not pure white — for softer contrast on extended reading."
      - "Use rgba(27,27,27,0.16) as the standard border color for inputs and card outlines in light sections — never a solid opaque gray."
      - "Reserve #ffcf25 (Electric Lime) strictly for product screenshots and graphic accents — never apply it as a button or text color."

    don_t:
      - "Don't use BagossCondensedFont below 16px — at small sizes switch to BagossStandardFont or Inter for legibility."
      - "Don't use 8px or 16px border-radius on primary CTA buttons — those radii belong only to secondary badges and icon containers."
      - "Don't use #5938b7 (Violet Mid) or any saturated violet in light (cream) body sections — violet is hero-zone-only."
      - "Don't apply box shadows to feature product cards — the system uses border (1px #dbdbdb) as the only card boundary in light sections; shadows appear only on floating overlays."
      - "Don't mix BagossExtendedFont and BagossCondensedFont in the same heading — choose one cut per section based on available width."
      - "Don't use pure white (#ffffff) as the page background — the system's warm cream (#fffbf4) distinguishes Deel's light theme from generic white-page SaaS."
      - "Don't apply letter-spacing to BagossCondensedFont display headlines — the -0.005em is already set; adding positive tracking breaks the compressed silhouette."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Warm Cream Page | `#fffbf4` | Base page background for all light-theme content sections |"
    info: "| 2 | Pure White Card | `#ffffff` | Card surfaces, nav bar, input backgrounds elevated above cream |"
    info: "| 3 | Deep Cosmos Hero | `#201547` | Hero left panel — deepest dark surface, maximum brand presence |"
    info: "| 4 | Dark Feature Band | `#141414` | Near-black bands for stat/feature sections on dark alternating zones |"
    info: "| 5 | Frosted Glass | `#ffffff` | rgba(255,255,255,0.05) overlay tint on dark surfaces for card differentiation without opacity loss |"

  elevation:

    - "**Floating Overlay Card (testimonial badge, currency chip group):** `rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27, 0.05) 0px 2px 32px 0px`"

  imagery:

    deel_mixes_two_distinct_image_registers: "dark-panel graphic design (geometric yellow-green forms as abstract background shapes on the right hero panel, pure graphic, no photography) and real-world lifestyle photography (hands holding a purple iPhone over a table with an orange mug — warm, candid, slightly editorial). Product screenshots are rendered as phone mockups or flat UI crops embedded in cards, contained with 24px radius. The hero right panel uses a dramatic high-contrast shot — black angular shapes over electric yellow-green (#ffcf25), iPhone floating in front — this is purely product showcase, not human context. Below the hero, photography shifts to warm, natural-light scenes that feel ambient rather than staged. Icons are outlined, monochrome (#1b1b1b or white depending on surface), consistent 16-20px stroke-weight SVGs. Customer logos are rendered as flat gray silhouettes at reduced opacity to avoid visual competition. The overall ratio is approximately 40% imagery, 60% text+UI."

  layout:

    info: "Max-width approximately 1280px centered, but the hero breaks this rule — it runs full viewport width as a 50/50 split: left panel (#201547) contains text + CTA, right panel is full-bleed product imagery with no padding. Below the hero, content resets to max-width contained with 80-120px vertical section gaps. Sections alternate: white/cream light bands with card grids (3-column feature cards), then full-width dark (#141414) bands with 3-column stat rows, then a full-bleed photo section with floating UI chips overlaid. Navigation is a fixed top bar — pure white background, logo left, dropdown nav center, language + log in + CTA pill right. Hero is not full-viewport-height but a defined panel (~480px). The brand logo section (trust strip) uses a horizontal scrolling row of gray logos on white, 2 rows, separated by a light rule. Feature product cards use a 3-column equal grid with 16px gaps."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #1b1b1b"
    - "Page background (light): #fffbf4"
    - "Hero background: #201547"
    - "CTA button (dark): #1b1b1b"
    - "CTA button (violet, hero): #5938b7"
    - "Accent headline: #a98df6"
    - "Border / divider: rgba(27,27,27,0.16)"
    - "Secondary text: #5f5f5f"

    example_component_prompts:

    - "**Hero Section (dark left panel):** Full-viewport-width, 50/50 split. Left: #201547 background, padding 64px 48px. Headline in BagossCondensedFont 60px weight 500, #ffffff, line-height 1.00, letter-spacing -0.005em — final word 'anywhere.' in #a98df6. Subtext Inter 17px weight 400 #d9d0ca. Pill CTA: background #5938b7, white text, 200px radius, padding 8px 16px, BagossStandardVF 15px. Right: full-bleed product photo, no padding."

    - "**Feature Product Card (3-column grid):** Background #fffbf4, border 1px solid #dbdbdb, border-radius 24px, padding 24px. Title: BagossCondensedFont 24px weight 500 #1b1b1b. Description: Inter 16px weight 400 #5f5f5f. Product screenshot image cropped at card bottom."

    - "**Dark Stat Row Section:** Background #141414, full width. Three equal columns, 48px vertical padding, 80px horizontal. Each column: stat headline BagossCondensedFont 44px weight 500 #ffffff, descriptor Inter 15px weight 400 #d9d0ca, ghost CTA 'Learn more →' Inter 14px #a98df6 below."

    - "**Top Navigation Bar:** Background #ffffff, height 64px, 1280px max-width centered. Logo left (Deel wordmark, #1b1b1b). Center: Ghost pill nav items (200px radius, 8px 12px padding, BagossStandardVF 15px #1b1b1b) with chevron. Right: 'Log in' ghost button + 'Book a demo' filled dark pill (#1b1b1b bg, #ffffff text, 200px radius, 8px 16px padding)."

    - "**Currency Selector Chip:** Background #ffffff, border 1px solid #dbdbdb, border-radius 200px, padding 8px 16px. Flag icon 20px + currency code Inter 16px weight 500 #1b1b1b. Active state: green badge (#53a945) checkmark at trailing edge."

  bagoss_typeface_system:

    info: "Deel uses a proprietary 4-cut type family (BagossCondensedFont, BagossExtendedFont, BagossStandardFont, BagossStandardVF) as its typographic identity. Each cut has a defined role: Condensed at 44-60px for compressed hero headlines; Extended at 64px for wide-spread section banners; Standard at 12-16px for UI labels and badges; StandardVF for interactive elements (nav, buttons) where variable-font optical sizing matters. All cuts share ss01/ss02 OpenType features that enable stylistic alternate glyphs — these must remain active for authentic brand rendering. Do NOT substitute Bagoss with a condensed system font at headline sizes — the proportions are distinct enough to visually break the design. If Bagoss is unavailable, use Barlow Condensed (Google Fonts, weight 500) as a structural proxy while noting it lacks the custom OpenType personality."

  similar_brands:

    - "**Rippling** — Same deep-purple dark hero panel with white condensed headline typography, cream body sections below, and dual-tone split hero"
    - "**Stripe** — Custom typeface with multiple optical cuts (Stripe's StripeS has Condensed/Display variants like Bagoss), paired with Inter for body"
    - "**Remote.com** — Global HR/payroll SaaS with identical pill-button system (200px radius), violet brand accent against white/cream backgrounds"
    - "**Workday** — Enterprise HR platform using alternating dark/light section banding with full-width dark stat panels"
    - "**Gusto** — Warm off-white body background (not pure white) with rounded pill forms as the primary shape language across buttons and chips"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-cosmos: #201547;
          --color-violet-mid: #5938b7;
          --color-lavender-pulse: #a98df6;
          --color-pale-amethyst: #c4b1f9;
          --color-indigo-shadow: #381f89;
          --color-electric-lime: #ffcf25;
          --color-amber-core: #faaf00;
          --color-butter-glow: #ffe27c;
          --color-sky-mist: #d8ebff;
          --color-celadon-check: #53a945;
          --color-powder-blue: #b1d8fc;
          --color-midnight-ink: #000000;
          --color-graphite: #1b1b1b;
          --color-obsidian: #141414;
          --color-charcoal: #404040;
          --color-slate: #5f5f5f;
          --color-fog: #767676;
          --color-ash: #a4a4a4;
          --color-bone: #dbdbdb;
          --color-linen: #d9d0ca;
          --color-warm-cream: #fffbf4;
          --color-pure-white: #ffffff;
          --color-near-black: #101828;
        
          /* Typography — Font Families */
          --font-bagosscondensedfont: 'BagossCondensedFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossextendedfont: 'BagossExtendedFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossstandardfont: 'BagossStandardFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossstandardvf: 'BagossStandardVF', 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;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body: 15px;
          --leading-body: 1.6;
          --tracking-body: 0.375px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 44px;
          --leading-heading: 1.05;
          --tracking-heading: -0.22px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.3px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: 0.32px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w460: 460;
          --font-weight-medium: 500;
          --font-weight-w560: 560;
          --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-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        
          /* Named Radii */
          --radius-tags: 200px;
          --radius-cards: 24px;
          --radius-chips: 100px;
          --radius-icons: 5px;
          --radius-inputs: 200px;
          --radius-panels: 12px;
          --radius-buttons: 200px;
          --radius-buttonsmedium: 16px;
        
          /* Shadows */
          --shadow-xl: rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27, 0.05) 0px 2px 32px 0px;
        
          /* Surfaces */
          --surface-warm-cream-page: #fffbf4;
          --surface-pure-white-card: #ffffff;
          --surface-deep-cosmos-hero: #201547;
          --surface-dark-feature-band: #141414;
          --surface-frosted-glass: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-cosmos: #201547;
          --color-violet-mid: #5938b7;
          --color-lavender-pulse: #a98df6;
          --color-pale-amethyst: #c4b1f9;
          --color-indigo-shadow: #381f89;
          --color-electric-lime: #ffcf25;
          --color-amber-core: #faaf00;
          --color-butter-glow: #ffe27c;
          --color-sky-mist: #d8ebff;
          --color-celadon-check: #53a945;
          --color-powder-blue: #b1d8fc;
          --color-midnight-ink: #000000;
          --color-graphite: #1b1b1b;
          --color-obsidian: #141414;
          --color-charcoal: #404040;
          --color-slate: #5f5f5f;
          --color-fog: #767676;
          --color-ash: #a4a4a4;
          --color-bone: #dbdbdb;
          --color-linen: #d9d0ca;
          --color-warm-cream: #fffbf4;
          --color-pure-white: #ffffff;
          --color-near-black: #101828;
        
          /* Typography */
          --font-bagosscondensedfont: 'BagossCondensedFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossextendedfont: 'BagossExtendedFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossstandardfont: 'BagossStandardFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bagossstandardvf: 'BagossStandardVF', 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;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body: 15px;
          --leading-body: 1.6;
          --tracking-body: 0.375px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 44px;
          --leading-heading: 1.05;
          --tracking-heading: -0.22px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.3px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: 0.32px;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        
          /* Shadows */
          --shadow-xl: rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27, 0.05) 0px 2px 32px 0px;
        }