giga___style_reference:
  info: "> Literary dusk over mountain ridges — A serif headline floats over a cinematic photograph, with a single warm ember glow below."

  theme: "mixed"

  info: "Giga operates as a literary enterprise-AI brand: cinematic mountain photography as the primary visual, serif display type for emotional weight, and an almost monastic monochrome palette disrupted by a single warm orange-red accent. The interface alternates between full-bleed photographic light sections and near-black dark panels, creating a dawn-to-dusk rhythm that mirrors the hero image. Headlines use a humanist serif at light weight — anti-convention for an AI company, deliberately editorial rather than technical. Components are compact and pill-shaped: buttons, tags, and badges all share the 9999px radius, while cards settle into a soft 16px. Density is tight but not cramped, with 10px baseline gaps and generous section breathing room (48-64px). Color is rationed — white and near-black do 95% of the work, and the one vivid orange-red (#fe2c02) plus a single green status dot are the only chromatic interruptions."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, hairlines, icon strokes, borders on light surfaces — the dominant structural color |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page backgrounds, card surfaces, text on dark sections |"
    info: "| Carbon | `#161717` | `--color-carbon` | Dark surface panels, filled button backgrounds — warm-tinted near-black, not pure black |"
    info: "| Ember | `#fe2c02` | `--color-ember` | Primary accent — link/CTA emphasis, the one chromatic moment in the system, warm orange-red against the monochrome field |"
    info: "| Sprout | `#49de80` | `--color-sprout` | Green outline accent for tags, dividers, and focused UI edges |"
    info: "| Slate | `#8a8f98` | `--color-slate` | Muted helper text, secondary borders, disabled state strokes |"
    info: "| Iron | `#202020` | `--color-iron` | Secondary text on light surfaces, dark-mode body text |"
    info: "| Fog | `#b3b3b3` | `--color-fog` | Light borders, placeholder text, subtle dividers |"
    info: "| Ash | `#969696` | `--color-ash` | Tertiary text, low-emphasis labels |"
    info: "| Smoke | `#808080` | `--color-smoke` | Muted borders, low-priority separators |"
    info: "| Stone | `#666666` | `--color-stone` | Tertiary text, metadata |"
    info: "| Ink | `#050505` | `--color-ink` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Dusk Fade | `linear-gradient(rgb(0, 0, 0) 0%, rgb(15, 14, 13) 8%)` | `--color-dusk-fade` | Hero overlay gradient endpoint — top-of-photo darkening for text legibility |"

  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"

    emilio_light___display_and_section_headlines___the_signature_choice__a_humanist_serif_at_light_weight_used_at_41_48px_creates_an_editorial__literary_voice_that_contrasts_with_the_ai_tech_convention_of_geometric_sans_serif__letter_spacing_tightens_to__0_03em_at_display_sizes__substitute__cormorant_garamond_light_or_libre_caslon_text_light_for_similar_warmth_without_licensing_the_custom_face_____font_emilio_light:
      - "**Substitute:** Cormorant Garamond"
      - "**Weights:** 300, 400"
      - "**Sizes:** 24px, 41px, 48px"
      - "**Line height:** 1.20, 1.30"
      - "**Letter spacing:** -0.0300em at 48px, -0.0200em at 41px"
      - "**Role:** Display and section headlines — the signature choice. A humanist serif at light weight used at 41-48px creates an editorial, literary voice that contrasts with the AI-tech convention of geometric sans-serif. Letter-spacing tightens to -0.03em at display sizes. Substitute: Cormorant Garamond Light or Libre Caslon Text Light for similar warmth without licensing the custom face."

    inter___body_text__ui_labels__secondary_headings__navigation__the_workhorse___appears_at_every_size_from_8px_micro_labels_to_44px_section_headers__weight_400_is_the_default__500_for_emphasis_____font_inter:
      - "**Substitute:** system-ui"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 8px, 9px, 10px, 11px, 12px, 13px, 14px, 16px, 29px, 44px"
      - "**Line height:** 1.00, 1.36, 1.50, 1.54, 1.64, 1.70, 1.71, 1.75, 1.85, 1.93, 2.00, 2.22"
      - "**Letter spacing:** -0.0300em, 0.0070em"
      - "**Role:** Body text, UI labels, secondary headings, navigation. The workhorse — appears at every size from 8px micro-labels to 44px section headers. Weight 400 is the default, 500 for emphasis."

    geist_mono___code_adjacent_labels__monospace_badges__small_caps_style_indicators__the_slight_positive_tracking_0_009em_gives_it_a_technical__label_like_quality_that_contrasts_with_the_serif_headlines_____font_geist_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 11px, 12px, 14px"
      - "**Line height:** 1.20, 2.00, 2.18"
      - "**Letter spacing:** 0.0090em"
      - "**Role:** Code-adjacent labels, monospace badges, small-caps-style indicators. The slight positive tracking (0.009em) gives it a technical, label-like quality that contrasts with the serif headlines."

    giga_sans_display___custom_display_sans_for_sub_headings_and_card_titles__the_tight_0_86_line_height_at_22px_gives_a_dense__stacked_feel__substitute__inter_at_equivalent_weight_and_tracking_since_the_giga_sans_faces_are_licensed_____font_giga_sans_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 22px"
      - "**Line height:** 0.86, 1.33, 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Custom display sans for sub-headings and card titles. The tight 0.86 line-height at 22px gives a dense, stacked feel. Substitute: Inter at equivalent weight and tracking since the Giga Sans faces are licensed."

    giga_sans_text___custom_body_sans___essentially_an_inter_variant__used_for_link_text_and_dense_body_content__substitute__inter_at_14px_400_____font_giga_sans_text:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Custom body sans — essentially an Inter variant. Used for link text and dense body content. Substitute: Inter at 14px/400."

    inter_display___optically_adjusted_variant_for_body_display_sizes___slightly_wider_apertures_than_standard_inter__substitute__standard_inter_____font_inter_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50, 1.51, 2.50"
      - "**Letter spacing:** 0.0060em"
      - "**Role:** Optically-adjusted variant for body display sizes — slightly wider apertures than standard Inter. Substitute: standard Inter."

    giga_sans_display_trial_400___giga_sans_display_trial_400___detected_in_extracted_data_but_not_described_by_ai____font_giga_sans_display_trial_400:
      - "**Weights:** 400"
      - "**Sizes:** 30px"
      - "**Line height:** 1.33, 1.5"
      - "**Role:** Giga Sans Display Trial 400 — detected in extracted data but not described by AI"

    giga_sans_text_trial_400___giga_sans_text_trial_400___detected_in_extracted_data_but_not_described_by_ai____font_giga_sans_text_trial_400:
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.2"
      - "**Role:** Giga Sans Text Trial 400 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 2.18 | 0.1px | `--text-caption` |"
      info: "| body | 14px | 1.71 | — | `--text-body` |"
      info: "| subheading | 22px | 0.86 | — | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 41px | 1.3 | -0.82px | `--text-heading` |"
      info: "| display | 48px | 1.2 | -1.44px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 16px |"
      info: "| badges | 9999px |"
      info: "| images | 3.85px |"
      info: "| inputs | 6px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(247, 107, 21, 0.5) 0px 0px 4px 0px` | `--shadow-sm` |"
      info: "| xl | `rgba(0, 0, 0, 0.7) 0px 12px 32px -16px, rgba(0, 0, 0, 0.7...` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48-64px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    pill_cta_button:
      role: "Primary call-to-action on light hero surfaces"

      info: "White background, black text, 9999px border-radius (full pill), 9px vertical × 16px horizontal padding, 14px Inter weight 500. No border. Text is short — 2-3 words max. Examples: 'Talk to us', 'Explore Agent Canvas'. The pill shape is the button's defining trait — no rounded-rect buttons exist in this system."

    pill_outline_button:
      role: "Secondary action on dark sections"

      info: "Transparent or #161717 background, 1px border in #ffffff at 9999px radius, white text at 14px Inter 500. 8px vertical × 16px horizontal padding. Used for navigation items like 'Sign in' in the header."

    feature_card:
      role: "Content card in feature grids and product sections"

      info: "Dark surface (#161717) on dark sections, 16px border-radius, 20px internal padding. Icon at top in white or Sprout green at ~16px. Title in Inter 500 14-16px white. Body text in #8a8f98 at 12-14px. No shadow on the card itself — the surface color differentiation is the elevation."

    agent_canvas_showcase_card:
      role: "Product feature card with embedded screenshot"

      info: "White surface, 16px radius, contains a product screenshot/image with the actual app UI visible (mountain landscape, agent creation interface). Title 'Agent Canvas' in Inter 500, body in #969696. Ghost pill button at bottom-left for 'Explore' action."

    status_badge:
      role: "Notification or news indicator"

      info: "Full pill (9999px radius), semi-transparent dark background, uppercase Geist Mono 11px text. Often paired with a 6px Sprout green dot (#49de80) prefix. Examples: 'GIGA LAUNCHES BROKER AGENT'. Padding: 5px vertical, 10px horizontal."

    top_navigation_bar:
      role: "Global site header"

      info: "Transparent over hero image, ~64px height. Logo left (Giga wordmark + small icon), nav items center-left ('Product', 'Company' with dropdown indicators), 'Sign in' text link + pill CTA far right. No background fill — sits directly on the photograph."

    dark_statistics_panel:
      role: "Inline data/metrics display"

      info: "Full-width #161717 band. Label in uppercase Geist Mono 10-11px #8a8f98. Metric value in large Inter 300 at 29-44px, white. Minimal padding — relies on the dark band itself to create visual containment."

    trust_logo_strip:
      role: "Social proof row below hero"

      info: "Full-width row on dark or transparent background. 5-6 partner logos in white/light gray at uniform ~16-20px height, evenly spaced with large gaps (60-80px). Logos are monochrome wordmarks — no color logos."

    feature_column_item:
      role: "Three-column feature list"

      vertical_stack: "icon (16px, white) → title (Inter 500 14px white) → description (12-14px #8a8f98). 3px gap between icon and title, 6px between title and body. Minimal — no card chrome, just typography on the dark surface."

    section_label_tag:
      role: "Eyebrow text above section headings"

      info: "Small uppercase label (e.g., 'CUSTOM AGENTS') in Geist Mono or Inter 10-12px, #8a8f98 or Sprout green. Often prefixed with a small colored dot. Sits 12-16px above the section heading."

  do_s_and_don_ts:

    do:
      - "Use 9999px border-radius for all buttons, badges, and tags — pill shape is non-negotiable"
      - "Use Emilio Light (or Cormorant Garamond substitute) at weight 300 for display headlines at 41-48px with -0.03em letter-spacing"
      - "Use the warm #161717 (Carbon) for dark surfaces, never pure #000000 — the warm tint is intentional"
      - "Reserve #fe2c02 (Ember) for a single accent moment per viewport — link emphasis or one CTA, never multiple"
      - "Pair a Sprout green (#49de80) 6px dot with uppercase Geist Mono status badges"
      - "Maintain 10px baseline element gap and 48-64px section gap for the compact-but-breathing rhythm"
      - "Use 16px radius for cards, 6px for inputs, 3.85px for inline images — never round-rect buttons"

    don_t:
      - "Don't use geometric sans-serif (Inter/SF) for display headlines — the serif at light weight IS the brand"
      - "Don't apply #fe2c02 to backgrounds larger than a link or single button — it loses impact at scale"
      - "Don't use pure #000000 for dark surfaces — the warm #161717 prevents the UI from feeling clinical"
      - "Don't create rounded-rect (4-8px) buttons — every interactive element is a pill or a text link"
      - "Don't stack more than one full-color photograph in a single viewport — the dusk image owns the hero"
      - "Don't add drop shadows to cards on the dark surface — surface color differentiation is the elevation system"
      - "Don't use letter-spacing wider than 0.01em on body text — tracking is tight across the system"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Photographic Canvas | `#000000` | Full-bleed mountain/dusk photograph with dark gradient overlay — the base layer of the hero |"
    info: "| 1 | Dark Panel | `#161717` | Content sections, statistics, feature grids — the dominant dark surface below the hero |"
    info: "| 2 | Card Surface | `#ffffff` | Product showcase cards (Agent Canvas) that sit on the dark panel, creating contrast |"

  elevation:

    - "**Floating card with glow:** `rgba(0, 0, 0, 0.7) 0px 12px 32px -16px, rgba(0, 0, 0, 0.7) 0px 12px 60px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px`"
    - "**Ember glow accent:** `rgba(247, 107, 21, 0.5) 0px 0px 4px 0px`"

  imagery:

    info: "Full-bleed cinematic landscape photography dominates — mountain ridges at dusk with layered atmospheric haze. The photograph is the hero, not a background; it occupies 100% viewport height with text floating over it via a subtle dark gradient overlay at the top. Imagery is high-quality, naturalistic, and serves an emotional/mood function rather than product illustration. No product screenshots, no illustrations, no abstract graphics. The only non-photographic visual elements are monochrome partner logos in the trust strip and small UI icons in feature columns. Photography treatment: high-resolution, no duotone, no heavy filters — the natural blue-to-warm gradient of dusk is the brand's color story."

  layout:

    info: "Full-bleed hero with centered text over photograph, max-width 1200px content from the nav down. The page alternates: photographic light section → dark statistics band → dark feature sections with white product cards. Navigation is a single transparent bar with no background. Content below the hero uses a centered single-column for headlines followed by 3-column feature grids and left-aligned product showcase cards. Section gaps are generous (48-64px) creating breathing room between compact inner content. The overall rhythm is: cinematic opening → dense dark content blocks → expansive product showcases."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (light surfaces), #ffffff (dark surfaces)"
    - "Background: #ffffff (light), #161717 (dark panels), #000000 (photographic hero)"
    - "Border: #000000 (hairlines), #8a8f98 (muted), #ffffff (on dark)"
    - "Accent: #fe2c02 (Ember — single-use warm red)"
    - "Status: #49de80 (Sprout green for live dots)"
    - "primary action: #161717 (filled action)"

  3_5_example_component_prompts:

    - "Create a Primary Action Button: #161717 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Dark Feature Section**: Background #161717, full-width. Section eyebrow 'CUSTOM AGENTS' in Inter 10px uppercase, #8a8f98, with 6px #fe2c02 dot prefix. Section heading 'Built to handle complexity' in Emilio Light 41px weight 300, #ffffff, letter-spacing -0.82px. Three-column feature grid below at 10px column gap: icon (16px white) → title (Inter 500 14px white) → body (Inter 14px #8a8f98)."

    - "**Product Showcase Card**: White surface (#ffffff), 16px border-radius, 20px padding. Contains a product screenshot with 3.85px image radius. Title 'Agent Canvas' in Inter 500 16px #000000. Body in Inter 14px #969696. Ghost pill button bottom-left: transparent background, 1px #000000 border at 9999px radius, 8px×16px padding, Inter 14px weight 500 #000000."

    - "**Statistics Band**: Full-width #161717 background. Two metrics side by side with large gap. Label 'DEFLECTION RATE' in Geist Mono 10px uppercase #8a8f98. Value '7%' in Inter 300 at 44px, #ffffff."

    - "**Trust Logo Strip**: Transparent or dark background. Five monochrome white logos at 16-20px height, evenly spaced with 60-80px gaps. No captions, no borders — logos sit on the existing surface."

  gradient_system:

    info: "Gradients are used sparingly and only for atmospheric purposes:"
    - "**Hero overlay**: linear-gradient(rgb(0,0,0) 0%, rgb(15,14,13) 8%) — a near-invisible dark fade at the very top of the photograph to anchor the nav"
    - "**Section transitions**: linear-gradient(rgb(0,0,0) 15%, rgb(249,249,249) 90%) — used between the photographic hero and the first content section"
    - "**Color-tinted washes**: pink (#ff9aea), green (#c3eaca), and blue (#88bbf5) gradients fading to white — decorative accents in feature sections, each at 0-30% width"
    info: "Never use gradients on buttons, cards, or interactive elements. Gradients are purely atmospheric."

  similar_brands:

    - "**Linear** — Same pill-button + monochrome palette approach, though Linear is fully dark; Giga borrows the pill geometry and single-accent discipline"
    - "**Vercel** — Shared compact density, minimal color rationing, and full-bleed dark hero photography; both use Geist family for labels"
    - "**Anthropic** — Similar enterprise-AI positioning with warm-tinted dark surfaces and cinematic photography; both ration color aggressively"
    - "**Stripe** — Same trust-strip pattern below hero and editorial headline treatment; Giga takes Stripe's literary confidence further with a serif display face"
    - "**Arc Browser** — Shared full-bleed photographic hero with floating text and a single warm accent color punctuating an otherwise neutral interface"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper: #ffffff;
          --color-carbon: #161717;
          --color-ember: #fe2c02;
          --color-sprout: #49de80;
          --color-slate: #8a8f98;
          --color-iron: #202020;
          --color-fog: #b3b3b3;
          --color-ash: #969696;
          --color-smoke: #808080;
          --color-stone: #666666;
          --color-ink: #050505;
          --color-dusk-fade: #0f0e0d;
          --gradient-dusk-fade: linear-gradient(rgb(0, 0, 0) 0%, rgb(15, 14, 13) 8%);
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-emilio-light: 'Emilio Light', 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-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-giga-sans-display: 'Giga Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-text: 'Giga Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-display-trial-400: 'Giga Sans Display Trial 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-text-trial-400: 'Giga Sans Text Trial 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 2.18;
          --tracking-caption: 0.1px;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-subheading: 22px;
          --leading-subheading: 0.86;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.33;
          --text-heading: 41px;
          --leading-heading: 1.3;
          --tracking-heading: -0.82px;
          --text-display: 48px;
          --leading-display: 1.2;
          --tracking-display: -1.44px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-64px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 3.85px;
          --radius-md-2: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 1000px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 16px;
          --radius-badges: 9999px;
          --radius-images: 3.85px;
          --radius-inputs: 6px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(247, 107, 21, 0.5) 0px 0px 4px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.7) 0px 12px 32px -16px, rgba(0, 0, 0, 0.7) 0px 12px 60px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-photographic-canvas: #000000;
          --surface-dark-panel: #161717;
          --surface-card-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper: #ffffff;
          --color-carbon: #161717;
          --color-ember: #fe2c02;
          --color-sprout: #49de80;
          --color-slate: #8a8f98;
          --color-iron: #202020;
          --color-fog: #b3b3b3;
          --color-ash: #969696;
          --color-smoke: #808080;
          --color-stone: #666666;
          --color-ink: #050505;
          --color-dusk-fade: #0f0e0d;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-emilio-light: 'Emilio Light', 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-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-giga-sans-display: 'Giga Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-text: 'Giga Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-display-trial-400: 'Giga Sans Display Trial 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-giga-sans-text-trial-400: 'Giga Sans Text Trial 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 2.18;
          --tracking-caption: 0.1px;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-subheading: 22px;
          --leading-subheading: 0.86;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.33;
          --text-heading: 41px;
          --leading-heading: 1.3;
          --tracking-heading: -0.82px;
          --text-display: 48px;
          --leading-display: 1.2;
          --tracking-display: -1.44px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 3.85px;
          --radius-md-2: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 1000px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(247, 107, 21, 0.5) 0px 0px 4px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.7) 0px 12px 32px -16px, rgba(0, 0, 0, 0.7) 0px 12px 60px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px;
        }