launchdarkly___style_reference:
  info: "> Neon control room — a dark cockpit where violet signals pulse through charcoal panels."

  theme: "dark"

  launchdarkly_is_a_midnight_control_room: "deep charcoal canvas, cool violet-blue as the only chromatic voice, and white type that cuts through like console output. The interface is dense and technical without feeling cluttered — it borrows the visual language of developer tools (monospace code, panel grids, pill-shaped inputs) and wraps it in a confident marketing skin. The violet→blue gradient (#405bff → #7084ff) acts as the brand's electronic pulse, appearing in glows, hero text, active states, and decorative washes rather than flat fills. Components are pill-soft (30-60px radii dominate), borders are hairline-white on near-black, and elevation is communicated through glow rather than shadow."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Violet | `linear-gradient(179deg, #405bff 1.06%, #7084ff 123.42%)` | `--color-signal-violet` | Hero text accent, link underlines, icon glows, decorative gradient endpoint — the brand's chromatic signature; used as paint, not fill; Hero ambient washes, card glow halos, decorative background floods |"
    info: "| Voltage Blue | `#405bff` | `--color-voltage-blue` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Midnight Ink | `#0e0e0e` | `--color-midnight-ink` | Page canvas, deepest background layer |"
    info: "| Carbon | `#191919` | `--color-carbon` | Surface level 1 — nav pill, card backgrounds, button fills, footer |"
    info: "| Graphite | `#414042` | `--color-graphite` | Surface level 2 — elevated panels, card borders, secondary surfaces |"
    info: "| Steel | `#58595b` | `--color-steel` | Input borders, inactive form fields |"
    info: "| Slate | `#6d6e71` | `--color-slate` | Muted helper text, disabled labels |"
    info: "| Fog | `#a7a9ac` | `--color-fog` | Secondary text, subtle borders, placeholder copy |"
    info: "| Ash | `#d1d3d4` | `--color-ash` | Tertiary text, icon strokes, list dividers |"
    info: "| Paper | `#ffffff` | `--color-paper` | Primary text, heading fills, icon strokes, card backgrounds in product-screenshot panels |"
    info: "| Smoke | `#2c2c2c` | `--color-smoke` | List dividers, row separators in dense tables |"
    info: "| Plasma Cyan | `#3dd6f5` | `--color-plasma-cyan` | Secondary gradient endpoint — used sparingly in radial glows for atmospheric warmth |"

  tokens___typography:

    bodyfont___bodyfont___detected_in_extracted_data_but_not_described_by_ai____font_bodyfont:
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 32px, 36px, 40px, 66px, 84px, 85px, 100px, 125px"
      - "**Line height:** 1, 1.09, 1.2, 1.3, 1.4, 1.5, 1.6, 1.71"
      - "**Letter spacing:** 0.129, 0.167"
      - "**Role:** bodyFont — detected in extracted data but not described by AI"

    sohne___custom_grotesk___primary_interface_and_display_typeface__weight_500_dominates_headings___heavier_than_typical_marketing_sites_400_600_but_lighter_than_editorial_displays_700_800__landing_in_a_confident_middle_register__the_largest_sizes_84_125px_carry_very_tight_line_height_1_0_1_09__letting_headlines_stack_as_a_solid_block_of_type__letter_spacing_opens_up_to_0_129_0_167em_on_small_uppercase_labels_eyebrows__tags_but_stays_normal_on_body_and_display_____font_sohne_custom_grotesk:
      - "**Substitute:** Inter, Geist, Söhne (if licensed), or Space Grotesk"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 66, 84, 85, 100, 125"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50, 1.60"
      - "**Role:** Primary interface and display typeface. Weight 500 dominates headings — heavier than typical marketing sites (400-600) but lighter than editorial displays (700-800), landing in a confident middle register. The largest sizes (84-125px) carry very tight line-height (1.0-1.09), letting headlines stack as a solid block of type. Letter-spacing opens up to 0.129-0.167em on small uppercase labels (eyebrows, tags) but stays normal on body and display."

    sohne_mono___jetbrains_mono___code_snippets__sdk_names__technical_labels__normal_letter_spacing__1_50_1_65_line_height_for_readability__appears_in_the_hero_email_input_and_the__copy__paste__go__code_block_____font_sohne_mono_jetbrains_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Geist Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14, 16, 20, 22"
      - "**Line height:** 1.50, 1.65"
      - "**Role:** Code snippets, SDK names, technical labels. Normal letter-spacing, 1.50-1.65 line-height for readability. Appears in the hero email input and the 'Copy, paste, go.' code block."

    monofont___monofont___detected_in_extracted_data_but_not_described_by_ai____font_monofont:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px, 22px"
      - "**Line height:** 1.09, 1.5, 1.65"
      - "**Role:** monoFont — detected in extracted data but not described by AI"

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

    helvetica___helvetica___detected_in_extracted_data_but_not_described_by_ai____font_helvetica:
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** 0.007"
      - "**Role:** Helvetica — detected in extracted data but not described by AI"

    headingfont1___headingfont1___detected_in_extracted_data_but_not_described_by_ai____font_headingfont1:
      - "**Weights:** 500"
      - "**Sizes:** 125px"
      - "**Line height:** 1"
      - "**Role:** headingFont1 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 66px | 1.09 | — | `--text-heading-lg` |"
      info: "| display | 100px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 30px |"
      info: "| cards | 30px |"
      info: "| inputs | 10px |"
      info: "| buttons | 30px |"
      info: "| navPill | 60px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.45) 0px 4px 20px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    floating_nav_pill:
      role: "Primary site navigation"

      info: "Centered floating pill at top of viewport, 60px radius, Carbon (#191919) fill, 1px white-alpha border. Contains: logo with arrow icon, nav links (Platform, Solutions, Resources, Developers, Pricing) with chevron dropdowns, Sign In text link, Sandbox text link, and Voltage Blue (#405bff) 'Get a demo' button. Sits 16-24px from viewport top with horizontal margin. No traditional header bar — the pill IS the header."

    primary_action_button:
      role: "Main CTA"

      info: "Voltage Blue (#405bff) fill, white text, 30px radius, 16px vertical × 24px horizontal padding. Used for 'Get a demo' in nav and 'Get started' in hero form. No border, no shadow — the saturated blue is enough presence."

    hero_form_input:
      role: "Email capture"

      info: "Large dark input with Carbon (#191919) fill, 10px radius, 1px subtle border. Internal layout: email field (white text, #58595b placeholder) fills left, Voltage Blue 'Get started' button fills right. The whole composite has a soft blue glow halo (rgba(64,91,255,0.25) box-shadow) making it feel like a glowing console. Approximately 600px wide, centered, with generous vertical padding (~16-20px)."

    segmented_tab_control:
      role: "Section navigation"

      info: "Three-tab pill control (Release / Observe / Iterate) with 30px radius, Carbon fill, 1px border. Active tab indicated by a small Voltage Blue dot to the left of the label and brighter white text. Inactive tabs use Ash (#d1d3d4) text. Centered above a two-column section."

    feature_checklist_item:
      role: "Section bullet list"

      info: "Checkmark icon in Voltage Blue or white, followed by white text at ~16-18px. No background, no card. Vertical stack with 12-16px gap between items."

    sub_feature_card:
      role: "Linked feature callout"

      info: "Semi-transparent dark card with subtle violet/blue glow at edges, rounded 16-20px radius. Contains: small icon (blue or violet), white label text, right-arrow icon. Sits inside a larger section as a navigational sub-element."

    product_screenshot_panel:
      role: "Embedded UI demonstration"

      info: "Pure white (#ffffff) card with 12-20px radius and soft shadow, containing the actual LaunchDarkly product interface (pipeline configuration). Contrasts sharply with the dark page — the product UI is always shown as 'light' even on the dark marketing page, signaling that the real tool has its own bright workspace."

    code_snippet_block:
      role: "SDK code example"

      info: "Dark Carbon (#191919) panel with 12-16px radius, containing syntax-highlighted code. Language tabs (JavaScript / Python / iOS / React) at top in Ash text with active language in white. Code uses mono font at 14-16px with Dracula-inspired syntax colors (green strings, cyan keywords, pink literals). Copy button in top-right corner."

    sdk_resource_card:
      role: "Linkable resource tile"

      info: "Dark card (Carbon fill) with 1px white-alpha border, 20-30px radius, 32-40px padding. Contains: small icon top-left, white heading text (~18-20px weight 500), white subtext at 14-15px weight 400. Used in grids of 3 columns to link to Docs, Demo Project, Discord, etc."

    logo_strip:
      role: "Social proof"

      info: "Horizontal row of grayscale partner/customer logos (SpaceX, Tricentis, GoPro, Volvo, Ally, Priceline) at ~70% opacity, Ash or Fog tone. Logos are rendered in white-alpha on the dark background — no boxes, no borders, just quiet type marks."

    hero_headline:
      role: "Primary page heading"

      info: "Two-line display headline at 84-100px, weight 500, line-height 1.0-1.09. First line in white ('Move at AI speed.'), second line in Signal Violet ('Stay in control.'). The violet second line is the signature — the brand literally colorizes its differentiator. Letter-spacing tight (normal or slight negative)."

    ghost___outlined_action:
      role: "Secondary CTA"

      info: "Transparent fill with 1px Signal Violet (#7084ff) border, Signal Violet text, 30px radius. Used for secondary actions where the primary blue button already exists. The violet outline echoes the hero accent — secondary actions share the brand's signature hue rather than fading to neutral."

  do_s_and_don_ts:

    do:
      - "Use 30px radius for all buttons, tags, and cards — the pill-softness is non-negotiable for this brand"
      - "Use 60px radius for the top navigation pill and any full-width pill containers"
      - "Use Signal Violet (#7084ff) for the second half of hero headlines to split the message into 'what' (white) and 'why it matters' (violet)"
      - "Render embedded product screenshots as pure white panels on the dark canvas — the contrast signals 'this is the real workspace'"
      - "Use the #405bff → #7084ff linear gradient at 179deg for ambient glows behind cards and hero text"
      - "Set body text at 16-18px weight 400, white on Carbon — never below 14px for readability on dark"
      - "Use mono font for SDK names, code, and technical identifiers — the monospace voice is part of the developer-tool identity"

    don_t:
      - "Don't use square corners or small radii (4-8px) on user-facing components — they break the pill language"
      - "Don't use drop shadows for elevation — use glow (rgba(64,91,255,0.25) or rgba(112,132,255,0.19)) instead to stay on-brand"
      - "Don't introduce additional accent colors — the entire system is monochromatic-plus-violet; adding green, red, or yellow dilutes the signal"
      - "Don't use white or gray for primary action buttons — Voltage Blue (#405bff) is the only correct fill for a main CTA"
      - "Don't center-align body copy or feature lists — only headlines and hero blocks center; everything else is left-aligned"
      - "Don't use 1.5+ line-height on display headlines — keep it tight (1.0-1.09) so the type stacks as a solid block"
      - "Don't put dark product screenshots on the page — the real product UI is always bright/white, creating the page's key visual tension"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Canvas | `#0e0e0` | Page background — the void beneath everything |"
    info: "| 1 | Carbon Panel | `#191919` | Nav pill, footer, primary card surface |"
    info: "| 2 | Graphite Edge | `#414042` | Card borders, elevated panel outlines, subtle separation on dark |"
    info: "| 3 | Product White | `#ffffff` | Embedded product screenshots — the LaunchDarkly pipeline UI appears as a bright white card floating on the dark canvas |"

  elevation:

    - "**Floating Nav Pill:** `0 4px 20px rgba(0, 0, 0, 0.45)`"
    - "**Hero Form Input:** `0 0 40px rgba(64, 91, 255, 0.25)`"

  imagery:

    info: "Imagery is sparse and functional. The primary visual content is embedded product UI screenshots — bright white panels showing the LaunchDarkly pipeline interface floating on the dark page. The hero has no photography or illustration; it relies on type, glow, and a large form input. Customer logos appear as a grayscale strip. The code-snippet section uses syntax-highlighted mono text as a visual element. There is no lifestyle photography, no abstract 3D, no decorative illustration — the brand's visual language is the product itself, the code, and the type."

  layout:

    info: "Full-bleed dark canvas with max-width 1200px content containers centered inside. The hero is a tall vertical block (80-100vh) with centered headline + subtext + form input stacked vertically with generous breathing room. Below the hero, sections alternate between two-column layouts (text-left / product-screenshot-right) and three-column card grids. The floating nav pill sits fixed at top center. Section gaps are large (80-120px) to let the dark canvas breathe between content blocks. Content rhythm: hero → logo strip → tabbed feature section (2-col) → code integration section (2-col) → resource card grid (3-col)."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff"
    - "background: #0e0e0e"
    - "card/surface: #191919"
    - "border: rgba(255,255,255,0.1) or #414042"
    - "accent: #7084ff"
    - "primary action: #191919 (filled action)"

    example_component_prompts:
    - "**Hero headline block**: Full-width dark section, centered. First line 'Move at AI speed.' at 96px weight 500, #ffffff, line-height 1.0. Second line 'Stay in control.' at 96px weight 500, #7084ff, line-height 1.0. Subtext below at 18px weight 400, #d1d3d4, max-width 560px centered."
    - "Create a Primary Action Button: #191919 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "**Floating nav pill**: Fixed top center, 60px border-radius, #191919 fill, 1px solid rgba(255,255,255,0.08) border, padding 8px 8px 8px 24px. Logo left, links in #d1d3d4 at 14px, 'Get a demo' button (Voltage Blue, white, 30px radius) right."
    - "**Product screenshot card**: White #ffffff panel, 16px radius, 32px padding, contains embedded light-UI screenshot. Sits on dark canvas with a subtle rgba(64,91,255,0.2) glow."
    - "**Code snippet block**: Dark #191919 panel, 12px radius, 24px padding. Language tabs at top (#d1d3d4 inactive, #ffffff active). Code in mono font 14px, syntax colors: strings #a6e22e, keywords #66d9ef, literals #f92672."

  similar_brands:

    - "**Linear** — Same dark-canvas + single-accent-glow approach; both treat the product UI itself as the hero visual, and both use pill-shaped inputs and tight type stacks."
    - "**Vercel** — Shares the monochrome dark palette with one chromatic accent, gradient-driven glow effects, and the practice of rendering product interfaces as bright white cards on a dark page."
    - "**Datadog** — Both use deep charcoal surfaces with violet/purple brand accents, and both embed real product dashboards (not mockups) as the primary visual proof."
    - "**Stripe** — Similar typographic confidence — large weight-500 display headlines, tight line-height, and the strategy of using color selectively on a subset of words in a headline for emphasis."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-violet: #7084ff;
          --gradient-signal-violet: linear-gradient(179deg, #405bff 1.06%, #7084ff 123.42%);
          --color-voltage-blue: #405bff;
          --color-midnight-ink: #0e0e0e;
          --color-carbon: #191919;
          --color-graphite: #414042;
          --color-steel: #58595b;
          --color-slate: #6d6e71;
          --color-fog: #a7a9ac;
          --color-ash: #d1d3d4;
          --color-paper: #ffffff;
          --color-smoke: #2c2c2c;
          --color-plasma-cyan: #3dd6f5;
        
          /* Typography — Font Families */
          --font-bodyfont: 'bodyFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne-custom-grotesk: 'Sohne / custom grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne-mono-jetbrains-mono: 'Sohne Mono / JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-monofont: 'monoFont', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-headingfont1: 'headingFont1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 66px;
          --leading-heading-lg: 1.09;
          --text-display: 100px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 32-48px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
          --radius-3xl-3: 46px;
          --radius-full: 60px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-tags: 30px;
          --radius-cards: 30px;
          --radius-inputs: 10px;
          --radius-buttons: 30px;
          --radius-navpill: 60px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.45) 0px 4px 20px 0px;
        
          /* Surfaces */
          --surface-midnight-canvas: #0e0e0;
          --surface-carbon-panel: #191919;
          --surface-graphite-edge: #414042;
          --surface-product-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-violet: #7084ff;
          --color-voltage-blue: #405bff;
          --color-midnight-ink: #0e0e0e;
          --color-carbon: #191919;
          --color-graphite: #414042;
          --color-steel: #58595b;
          --color-slate: #6d6e71;
          --color-fog: #a7a9ac;
          --color-ash: #d1d3d4;
          --color-paper: #ffffff;
          --color-smoke: #2c2c2c;
          --color-plasma-cyan: #3dd6f5;
        
          /* Typography */
          --font-bodyfont: 'bodyFont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne-custom-grotesk: 'Sohne / custom grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne-mono-jetbrains-mono: 'Sohne Mono / JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-monofont: 'monoFont', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-headingfont1: 'headingFont1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 66px;
          --leading-heading-lg: 1.09;
          --text-display: 100px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
          --radius-3xl-3: 46px;
          --radius-full: 60px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.45) 0px 4px 20px 0px;
        }