wizz___style_reference:
  info: "> Neon pink highlighter on a black-and-white editorial — like a single fluorescent mark on a fashion magazine spread."

  theme: "light"

  info: "Wizz operates on a high-contrast social-app language: saturated black-and-white structure shot through with one electric hot-pink accent that functions as the only chromatic signal in the system. The hero is deliberately loud — a full-bleed multi-hue gradient (lavender, coral, sky, amber) supporting massive compressed black type — while every section below retreats to white space and lets pink do the work as a single, recurring punctuation mark. Typography is geometric and architectural: PolySans Bulky at display sizes, PolySans Median for headings and nav, PolySans Neutral for body — each weight stepping down in confidence rather than warmth. Components are rounded, pill-heavy, and flat; the only depth comes from a very faint black shadow on raised buttons. The navigation bar is a floating black pill that hovers above the page, setting the visual rhythm of dark-on-light framing devices."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Volt Pink | `#ff3d9e` | `--color-volt-pink` | Primary action buttons, section labels, active states, cookie accept — the sole chromatic brand color, carrying 100% of the accent weight in the interface |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page text, floating navigation bar, bold display headlines, cookie banner surface, icon fills |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, section backgrounds, text on dark surfaces, card surfaces in light sections |"
    info: "| Ash | `#dadada` | `--color-ash` | Hairline borders, card inset rings, subtle dividers, secondary text on light backgrounds |"
    info: "| Charcoal | `#444444` | `--color-charcoal` | Input borders, secondary surface fills, muted UI elements |"
    info: "| Onyx | `#292929` | `--color-onyx` | Secondary button backgrounds, elevated surface tone |"
    info: "| Mist | `#eeeeee` | `--color-mist` | Input field backgrounds, subtle fill surfaces |"

  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"

    polysans_bulky___hero_display_headlines___the_signature_compressed_ultra_bold_weight__tight_line_height_1_0_lets_the_letters_stack_like_a_logo_mark_rather_than_reading_as_paragraphs____font_polysans_bulky:
      - "**Substitute:** Druk Wide Bold, Archivo Black, or system impact weight"
      - "**Weights:** 700"
      - "**Sizes:** 72px"
      - "**Line height:** 1.00"
      - "**Role:** Hero display headlines — the signature compressed ultra-bold weight; tight line-height (1.0) lets the letters stack like a logo mark rather than reading as paragraphs"

    polysans_median___primary_workhorse___nav_links__section_headings__the_86px_display_for_page_openers__all_caps_micro_labels_with_0_05em_tracking__the_compressed_line_heights_0_85_1_0_at_large_sizes_are_what_give_wizz_its_editorial_magazine_density____font_polysans_median:
      - "**Substitute:** Inter, Manrope, or system geometric sans"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 10px, 13px, 14px, 16px, 18px, 86px"
      - "**Line height:** 0.85, 1.00, 1.10, 1.20, 1.25, 1.44, 1.50, 2.00"
      - "**Letter spacing:** -0.0100em at display sizes, 0.0500em for all-caps labels"
      - "**Role:** Primary workhorse — nav links, section headings, the 86px display for page-openers, all-caps micro-labels with 0.05em tracking. The compressed line-heights (0.85–1.0) at large sizes are what give Wizz its editorial-magazine density"

    polysans_neutral___body_copy__paragraph_text__descriptive_content___generous_line_height_1_5_creates_reading_rhythm_distinct_from_the_tight_display_set____font_polysans_neutral:
      - "**Substitute:** Inter, system-ui sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 18px"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50"
      - "**Role:** Body copy, paragraph text, descriptive content — generous line-height (1.5) creates reading rhythm distinct from the tight display set"

    polysans_slim___light_weight_utility_text__subtle_links__fine_print_detail___provides_typographic_contrast_against_heavier_median_weights_in_the_same_layout____font_polysans_slim:
      - "**Substitute:** Inter Light, system sans-serif at weight 300"
      - "**Weights:** 300"
      - "**Sizes:** 14px"
      - "**Line height:** 1.00, 1.10"
      - "**Role:** Light-weight utility text, subtle links, fine-print detail — provides typographic contrast against heavier Median weights in the same layout"

    inter___inter___detected_in_extracted_data_but_not_described_by_ai____font_inter:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** Inter — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | 0.05px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | — | `--text-body-sm` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| display-xl | 72px | 1 | — | `--text-display-xl` |"
      info: "| display | 86px | 0.85 | -0.86px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    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: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| icons | 5px |"
      info: "| pills | 999px |"
      info: "| images | 24px |"
      info: "| inputs | 12px |"
      info: "| buttons | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.05) 0px 1px 10px 0px` | `--shadow-md` |"
      info: "| xl | `rgba(0, 0, 0, 0.3) 0px 1px 30px 0px` | `--shadow-xl` |"
      info: "| subtle | `rgb(218, 218, 218) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 16px"
      - "**Element gap:** 10px"

  components:

    floating_navigation_pill:
      role: "Primary site navigation bar"

      info: "Black (#000000) pill-shaped bar, border-radius 999px, floating at top of page. Contains white Wizz logotype on left, nav links (white text, PolySans Median 14px weight 400) in center, and pink (#ff3d9e) 'Download' CTA button on right. Full-width within page max-width with generous horizontal padding (~20px). No visible border; relies on the black-fill contrast against the white page."

    primary_cta_button_download___accept___our_news:
      role: "Main call-to-action"

      info: "Filled with Volt Pink (#ff3d9e), white text, PolySans Median weight 600, 14–16px. Border-radius 12px. Padding approximately 10px 20px. The small 'Our News' variant uses 16px 24px padding. This is the only chromatic action element in the system."

    news___announcement_pill:
      role: "Inline news banner"

      info: "Pill-shaped, border-radius 999px, dark fill (#000000 or very dark), containing a small 'NEWS' tag in pink or white, followed by announcement text in white PolySans Median 13–14px. Includes a right-pointing arrow or chevron. Padding approximately 8px 16px."

    cookie_consent_card:
      role: "Privacy compliance overlay"

      info: "Rectangular card, black (#000000) background, white text, rounded corners (~12px). Title 'Cookie Settings' in PolySans Median 700 at ~16px. Body copy in PolySans Neutral 400 at 14px with 1.5 line-height. Contains two buttons: a ghost 'Reject' (dark surface, white text) and a filled pink 'Accept' (#ff3d9e). Fixed-position bottom-right."

    app_store_download_badge_pair:
      role: "App download CTAs"

      info: "Two standard dark (#000000) pill-shaped badges side by side: 'Download on the App Store' and 'GET IT ON Google Play'. Rounded corners, white logo + text. Padding approximately 8px 16px. Serve as secondary download action below the primary pink CTA in the hero."

    trust_indicator_strip:
      role: "Social proof band"

      info: "Three-column horizontal layout with small monochrome icons (trophy/award, globe, shield) in circular outline containers (~32px). Each column has a bold heading in PolySans Median 600 (~16px) and lighter subtext in PolySans Neutral 400 (~14px). Separated by faint vertical or horizontal dividers. Functions as a credibility row between hero and content."

    section_eyebrow_label:
      role: "Category label above section headings"

      info: "All-caps, Volt Pink (#ff3d9e), PolySans Median weight 600, ~13–14px, letter-spacing 0.05em. Used as a small pink tag introducing each content section (e.g. 'REVOLUTIONIZING CONNECTION', 'EMPOWERMENT AND SELF-ESTEEM', 'JOY'). Sits directly above a larger dark heading."

    display_headline:
      role: "Page-opener and section title"

      info: "PolySans Bulky or PolySans Median at 72–86px, weight 700, line-height 0.85–1.0, black (#000000). Near-zero letter-spacing at large sizes. Examples: 'MEET YOUR PEOPLE NOW', 'OUR MISSION', 'OUR COMMUNITY'. All-caps with compressed leading is the signature."

    feature_row_mission_section:
      role: "Mission statement with heading + body"

      info: "Two-column or single-column layout. Large black bold heading on left (PolySans Median 700, ~32–40px). Right column stacks: pink eyebrow label, then bold dark body statement (PolySans Median 600, ~16–18px), then regular body copy (PolySans Neutral 400, ~14–16px, 1.5 line-height). Generous vertical spacing between blocks."

    phone_mockup_carousel:
      role: "Product showcase with tilted device images"

      info: "Row of phone screenshots, each rotated at slight angles (-8° to +8°), overlapping with adjacent frames. The phones have large 24px border-radius, showing the dark-themed chat interface inside. Arranged horizontally across the page width, creating a fan-layout effect."

    input_field:
      role: "Form input"

      info: "Rounded rectangle, 12px border-radius, background #eeeeee (light gray fill), border 1px solid #444444 (charcoal). Placeholder and text in PolySans Median 400, ~14px. Subtle inset shadow optional. Dark border on light fill is distinctive — most sites use border-only with white fill."

    ghost___secondary_button:
      role: "Non-primary action"

      info: "Dark fill (#000000 or #292929), white text, PolySans Median 400–600, 12px border-radius. Used for 'Reject' in cookie banner, and likely for secondary nav or modal actions. No border outline; relies on fill contrast."

  do_s_and_don_ts:

    do:
      - "Use Volt Pink (#ff3d9e) as the sole chromatic accent — for one primary action per view, for section eyebrow labels, and for the cookie Accept button. Never dilute it across multiple elements on the same screen."
      - "Set all-caps display headlines in PolySans Bulky or PolySans Median weight 700 at 72–86px with line-height 0.85–1.0 and near-zero letter-spacing. The compressed vertical rhythm is what makes the type feel editorial."
      - "Apply 999px border-radius to the floating navigation bar, news pills, and any tag/chip elements. Use 12px radius for buttons, cards, and inputs. Use 24px for image frames."
      - "Use black (#000000) for the floating nav surface, bold display text, and the cookie banner — and always pair it with white or pink text on top. This black-on-white framing is the system's structural backbone."
      - "Apply 0.05em letter-spacing to all-caps micro-labels and eyebrow text at 10–14px. This widens the optical density of the small type and makes the pink section labels feel deliberately stamped."
      - "Keep body copy in PolySans Neutral weight 400 at 16px with line-height 1.5 for reading comfort. Never use Median weights for paragraphs."
      - "Add the very faint shadow rgba(0,0,0,0.05) 0px 1px 10px to card surfaces and rgba(0,0,0,0.3) 0px 1px 30px to the primary CTA. These are the only two shadow depths in the system."

    don_t:
      - "Never introduce a second accent color. The entire brand identity depends on pink being the only chromatic signal in a black-and-white field."
      - "Never use decorative gradients on UI elements. The hero gradient is the only allowed multi-color surface — everything else is flat solid fills."
      - "Never use drop shadows heavier than the two defined values. The system is intentionally flat; heavy elevation breaks the editorial feel."
      - "Don't use system sans-serif for headings. PolySans Median and Bulky are the identity — fall back to Inter or Manrope only if the custom fonts are unavailable."
      - "Never place body copy below 14px. The compact density is created through tight spacing, not through microscopic type."
      - "Don't use sharp corners (<5px radius) on any interactive element. Every button, input, card, and nav must have at least 12px or fully pill-shaped radius."
      - "Never use the pink accent on body text longer than a few words. Pink is for labels, buttons, and emphasis — not for paragraphs or descriptions."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Default page background for all content sections |"
    info: "| 1 | Input Fill | `#eeeeee` | Input field resting state |"
    info: "| 2 | Input Border | `#444444` | Input field outline, secondary UI element borders |"
    info: "| 3 | Hairline Surface | `#dadada` | Card inset rings, dividers, subtle framing |"
    info: "| 4 | Elevated Surface | `#292929` | Secondary button fill, mid-elevation UI panels |"
    info: "| 5 | Dark Surface | `#000000` | Floating navigation pill, cookie banner, bold text fills |"
    info: "| 6 | Accent Surface | `#ff3d9` | Primary action button fill, active accent moments |"

  elevation:

    - "**Primary CTA Button:** `rgba(0, 0, 0, 0.3) 0px 1px 30px 0px`"
    - "**Cards and elevated content:** `rgba(0, 0, 0, 0.05) 0px 1px 10px 0px`"
    - "**Card inset ring:** `rgb(218, 218, 218) 0px 0px 0px 1px inset`"

  imagery:

    info: "Imagery is product-led and minimal. The primary visual asset is the phone mockup of the app's chat interface, shown in a fanned, tilted arrangement across a horizontal band — each device rotated at a slight angle, overlapping its neighbors, with large 24px radii. The chat screens themselves are dark-themed with pink/purple gradient backgrounds, reinforcing the brand palette. No lifestyle photography, no abstract illustrations, no stock imagery. The hero is a pure gradient field (lavender, sky blue, coral, amber) — no photos. User-generated content appears as faded, desaturated avatar tiles in the community section, receding behind the headline."

  layout:

    info: "Page is max-width 1200px centered, with a floating black pill navigation that hovers above the content. The hero is full-bleed, spanning the full viewport width with the multi-color gradient and a centered headline stack (eyebrow → huge display text → app download buttons). Below the hero, content alternates between white sections and faint gray dividers, all centered-aligned. The mission section uses a two-column pattern (large heading left, content right). The community section uses a full-width image band of tilted phone mockups, followed by a centered headline. Section gaps are generous (~80px). The overall rhythm is: loud gradient hero → quiet white content bands → loud product showcase band → quiet text section. Navigation is a single pill bar, sticky/floating. No sidebar, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #000000 (primary), #444444 (muted)"
    - "Background: #ffffff (page), #000000 (dark surfaces), #eeeeee (input fill)"
    - "Border: #dadada (hairline), #444444 (input)"
    - "Accent: #ff3d9e (Volt Pink — eyebrow labels, emphasis)"
    - "primary action: #ff3d9e (filled action)"

    example_component_prompts:

    - "**Hero Section**: Full-bleed gradient background (lavender → coral → sky blue → amber). Centered stack: small black 'NEWS' pill at top, then 'MEET YOUR PEOPLE NOW' in PolySans Bulky 72px weight 700, color #000000, line-height 1.0, letter-spacing -0.72px. Below: two app store download badges side by side, each black (#000000) pill with white text and icon."

    - "**Floating Navigation Bar**: Black (#000000) pill, 999px border-radius, max-width 1200px centered, padding 10px 20px. White Wizz logotype left, 5 nav links in white PolySans Median 14px weight 400 center, pink (#ff3d9e) 'Download' button (12px radius, 10px 20px padding) right."

    - "**Section with Eyebrow Label**: White background, 80px vertical padding. Stack: pink (#ff3d9e) all-caps eyebrow 'REVOLUTIONIZING CONNECTION' in PolySans Median 600 at 13px, letter-spacing 0.05em. Below: bold body statement in PolySans Median 600 at 18px, color #000000. Below: paragraph in PolySans Neutral 400 at 16px, line-height 1.5, color #000000."

    - "**Cookie Consent Card**: Fixed bottom-right, 320px wide. Black (#000000) background, 12px border-radius, padding 20px. Title 'Cookie Settings' in PolySans Median 700, 16px, white. Body in PolySans Neutral 400, 14px, white, line-height 1.5. Two buttons side by side: 'Reject' as dark ghost (#292929 fill, white text, 12px radius), 'Accept' as filled pink (#ff3d9e, white text, 12px radius)."

    - "**Phone Mockup Showcase Band**: White background, full-width row of 8–10 phone mockups. Each phone: 24px border-radius, rotated -8° to +8° alternating, slight overlap. Inside each phone: dark chat interface with pink/purple gradient. No shadows on phones; the rotation creates the visual energy."

  gradient_system:

    info: "The hero gradient is the only multi-color surface in the design system and should not be replicated on other sections. It blends lavender (#a78bfa-ish), sky blue (#7dd3fc-ish), coral/peach (#fb923c-ish), and soft amber in a smooth, almost atmospheric field — resembling a sunset through frosted glass. The gradient runs diagonally from top-left lavender to bottom-right amber. This is the system's single moment of color abundance; everything else must remain black, white, and pink."

  similar_brands:

    - "**BeReal** — Same Gen-Z social app energy with a single vivid accent color (BeReal uses red-orange) against monochrome chrome, and the floating pill navigation pattern"
    - "**Locket Widget** — Similar compact social-app landing page with large compressed display type, floating dark nav pill, and minimal product-led layout"
    - "**Yubo** — Direct competitor in the young-audience social space; same hero-centric layout with one bright accent and phone mockup showcases"
    - "**Threads (Meta)** — Same editorial-magazine approach to social app marketing: massive compressed headlines, single accent color, phone mockup carousels, and generous white space"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-volt-pink: #ff3d9e;
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-ash: #dadada;
          --color-charcoal: #444444;
          --color-onyx: #292929;
          --color-mist: #eeeeee;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-bulky: 'PolySans Bulky', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-median: 'PolySans Median', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-neutral: 'PolySans Neutral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-slim: 'PolySans Slim', 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;
          --tracking-caption: 0.05px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-display-xl: 72px;
          --leading-display-xl: 1;
          --text-display: 86px;
          --leading-display: 0.85;
          --tracking-display: -0.86px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --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-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 45px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-icons: 5px;
          --radius-pills: 999px;
          --radius-images: 24px;
          --radius-inputs: 12px;
          --radius-buttons: 12px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 1px 10px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.3) 0px 1px 30px 0px;
          --shadow-subtle: rgb(218, 218, 218) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-input-fill: #eeeeee;
          --surface-input-border: #444444;
          --surface-hairline-surface: #dadada;
          --surface-elevated-surface: #292929;
          --surface-dark-surface: #000000;
          --surface-accent-surface: #ff3d9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-volt-pink: #ff3d9e;
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-ash: #dadada;
          --color-charcoal: #444444;
          --color-onyx: #292929;
          --color-mist: #eeeeee;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-bulky: 'PolySans Bulky', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-median: 'PolySans Median', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-neutral: 'PolySans Neutral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-polysans-slim: 'PolySans Slim', 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;
          --tracking-caption: 0.05px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-display-xl: 72px;
          --leading-display-xl: 1;
          --text-display: 86px;
          --leading-display: 0.85;
          --tracking-display: -0.86px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 45px;
          --radius-full: 999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 1px 10px 0px;
          --shadow-xl: rgba(0, 0, 0, 0.3) 0px 1px 30px 0px;
          --shadow-subtle: rgb(218, 218, 218) 0px 0px 0px 1px inset;
        }