metamusic___style_reference:
  info: "> editorial cream broadsheet with sticker-flat accents — a warm-paper canvas where oversized type and hard-offset shadows replace all decoration."

  theme: "mixed"

  info: "MetaMusic speaks in a paper-warm, editorial tone: a cream canvas (#f4f1ea) hosts oversized display headlines (up to 120px) that read like a museum wall label, while one vivid blue (#0066cc) and one deep indigo (#0e2575) carry all functional weight. Surfaces stack from cream → white → light-blue wash → indigo panel, creating a gentle warm-to-cool gradient as the eye scrolls. The defining texture is a hard 4px solid black offset shadow (zero blur) — a flat, almost sticker-like treatment that gives buttons and cards a tactile, printed feel rather than a soft Material elevation. Typography is monolinear and quiet: Maison Neue at every UI role, Spoof reserved for a single 22px accent heading, all set tight with negative tracking at display sizes. Components stay spacious (24px card radius, 40px internal padding) and never compete with the massive hero type; illustrated document and music icons float on warm peach circles as the only decorative voice."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Brand Blue | `#0066cc` | `--color-brand-blue` | Primary action background, link underlines, heading accents, card fills on light surfaces — the single chromatic voice that powers CTAs, active states, and iconography |"
    info: "| Deep Indigo | `#0e2575` | `--color-deep-indigo` | Dark section backgrounds (feature/why panels), hero image frames — the only place a full-bleed surface goes deep and saturated |"
    info: "| Midnight Card | `#213680` | `--color-midnight-card` | Elevated card surface when sitting on Deep Indigo backgrounds — one step lighter than the panel to separate without using shadow |"
    info: "| Charcoal Ink | `#101820` | `--color-charcoal-ink` | Body text and dark-surface secondary fills — slightly cooler than pure black, anchors reading text without harshness |"
    info: "| Paper Cream | `#f4f1ea` | `--color-paper-cream` | Primary page canvas — the warm base that gives the whole site its editorial, printed feel |"
    info: "| White | `#ffffff` | `--color-white` | Card surfaces, nav background, button text on blue, input fills — the clean highlight layer above cream |"
    info: "| Lavender Mist | `#e6e0f8` | `--color-lavender-mist` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Ice Blue | `#e9f4ff` | `--color-ice-blue` | Alternate light surface wash, subtle card background variant — the cool counterpoint to Paper Cream |"
    info: "| Peach Blush | `#f7e1d5` | `--color-peach-blush` | Icon circle backgrounds in audience/feature cards — the only warm accent that breaks the cream-on-cream |"
    info: "| Ash Border | `#d6d6d6` | `--color-ash-border` | Hairline dividers, subtle borders on neutral surfaces — the quietest structural line |"

  tokens___typography:

    maison_neue___the_sole_workhorse_font_across_body__nav__headings__buttons__inputs__cards__and_footers__weight_400_carries_body_and_ui_labels__500_steps_up_to_subheadings_and_nav__600_owns_display_sizes_56_120px__the_type_behaves_like_a_neo_grotesque_with_humanist_warmth___readable_at_12px__monumental_at_120px__negative_tracking_tightens_aggressively_at_display_sizes__0_03em_at_120px___0_02em_at_56_80px___0_01em_at_32_40px_so_headlines_sit_visually_compact_despite_their_scale_____font_maison_neue:
      - "**Substitute:** Inter, Söhne, or IBM Plex Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12, 14, 16, 19, 22, 26, 32, 40, 56, 80, 120"
      - "**Line height:** 0.95, 1.05, 1.10, 1.20, 1.35, 1.40, 1.50"
      - "**Letter spacing:** -0.0300em, -0.0200em, -0.0100em"
      - "**Role:** The sole workhorse font across body, nav, headings, buttons, inputs, cards, and footers. Weight 400 carries body and UI labels; 500 steps up to subheadings and nav; 600 owns display sizes (56–120px). The type behaves like a neo-grotesque with humanist warmth — readable at 12px, monumental at 120px. Negative tracking tightens aggressively at display sizes (-0.03em at 120px, -0.02em at 56–80px, -0.01em at 32–40px) so headlines sit visually compact despite their scale."

    spoof___reserved_for_a_single_accent_heading_or_card_label_at_22px___weight_500__its_ultra_tight_0_90_leading_and__0_02em_tracking_create_a_display_quality_mark_at_a_mid_size___used_as_a_typographic_exclamation_point__never_as_a_workhorse__free_substitute__gt_america_or_a_tight_condensed_sans_like_druk_wide_____font_spoof:
      - "**Substitute:** GT America, Druk Wide, or Söhne Breit"
      - "**Weights:** 500"
      - "**Sizes:** 22"
      - "**Line height:** 0.90"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** Reserved for a single accent heading or card label at 22px / weight 500. Its ultra-tight 0.90 leading and -0.02em tracking create a display-quality mark at a mid size — used as a typographic exclamation point, never as a workhorse. Free substitute: GT America or a tight condensed sans like Druk Wide."

    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.4 | — | `--text-body` |"
      info: "| subheading | 19px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.2 | -0.2px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.1 | -0.4px | `--text-heading-lg` |"
      info: "| display-sm | 56px | 1.05 | -1.12px | `--text-display-sm` |"
      info: "| display | 80px | 1.05 | -1.6px | `--text-display` |"
      info: "| display-lg | 120px | 0.95 | -3.6px | `--text-display-lg` |"

  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: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 24px |"
      info: "| badges | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(0, 0, 0) 0px 4px 0px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    display_headline:
      role: "Hero and section-opening text"

      info: "Maison Neue weight 600, sizes 80–120px, lineHeight 0.95–1.05, letter-spacing -0.02em to -0.03em. Color: Charcoal Ink (#101820) on cream, White on indigo. Sets the editorial voice — monumental, tight, and unadorned."

    section_heading:
      role: "Mid-page section titles"

      info: "Maison Neue weight 600 at 56px, lineHeight 1.05, letter-spacing -0.02em. Color: Charcoal Ink on cream surfaces, White on indigo. The 56px step is the most repeated display size across interior sections."

    accent_eyebrow_label:
      role: "Small blue label above section headings"

      info: "Maison Neue weight 500 at 16–19px, color Brand Blue (#0066cc), no uppercase. Acts as the 'Discover MetaMusic' / 'Who's it for?' pre-title — a short functional punctuation that introduces each section."

    primary_cta_button:
      role: "Filled blue action button"

      info: "Background Brand Blue (#0066cc), text White, Maison Neue weight 500 at 16px, padding 16px 24px, border-radius 9999px (pill), hard 4px black offset shadow. One per view maximum."

    outline_nav_button:
      role: "Log-in / portal entry in header"

      info: "White background, Black 1px border, Charcoal Ink text, Maison Neue weight 500 at 16px, padding 12px 24px, border-radius 9999px, hard 4px black offset shadow. The only outlined pill in the system — sits in the header as a secondary entry point."

    ghost_arrow_button:
      role: "Card continuation control"

      info: "Circular 40px Black (#000000) background, White right-arrow icon, no border, no shadow. Sits in the bottom-right corner of feature cards to signal 'continue' without a full CTA treatment."

    feature_card_on_indigo:
      role: "Numbered step card in dark sections"

      info: "Background Midnight Card (#213680), padding 40px, border-radius 24px, no shadow. Top-left has a 32px Brand Blue circle with white numeral. Title: White Maison Neue weight 500 at 22px. Body: White at 16px."

    audience_card:
      role: "Audience / \"who's it for\" card"

      info: "Background White, padding 40px, border-radius 24px, no shadow. Left side: 48px Peach Blush (#f7e1d5) circle with Brand Blue line-icon. Right: Charcoal Ink title (Maison Neue 500, 19px) and body (16px, 400)."

    text_input:
      role: "Form fields"

      info: "Background White, border 1px Lavender Mist (#e6e0f8), border-radius 8px, padding 16px, Maison Neue 400 at 16px. Focus: border becomes Brand Blue. No floating labels."

    notification_banner:
      role: "Top-of-page announcement bar"

      info: "Background Lavender Mist (#e6e0f8), full-width, padding 8px, Charcoal Ink text at 12–14px, small close × on the right. The only persistent banner in the system."

    illustration_icon_circle:
      role: "Decorative music/document icon"

      info: "48–64px Peach Blush (#f7e1d5) circle with a Brand Blue line-art icon inside (document, magnifying glass, music note). Always paired with or floats near headlines; never used as a functional control."

    top_navigation_bar:
      role: "Primary site navigation"

      info: "White background, 64px height, Maison Neue weight 500 at 16px for links. Logo (Maison Neue wordmark + mark) on the left, links centered/left-aligned, Outline Nav Button on the right. Bottom hairline border in Ash Border (#d6d6d6)."

    language_region_toggle:
      role: "Globe icon with language code in header"

      info: "No background, Charcoal Ink globe icon + 2-letter language code at 14px, right-aligned in nav. Minimal — never wrapped in a button chrome."

  do_s_and_don_ts:

    do:
      - "Use Maison Neue for all UI text; reserve Spoof for one accent heading at 22px per page maximum"
      - "Apply the hard 4px black offset shadow only to interactive controls (buttons, nav items) — never to cards or images"
      - "Stack the surface system in order: Paper Cream canvas → White card → Ice Blue wash → Midnight Card on Deep Indigo; never mix more than two surface levels in one viewport"
      - "Set display headlines at 80–120px with letter-spacing -0.02em to -0.03em; the tight tracking is what makes the oversized type feel intentional rather than bloated"
      - "Use the 24px radius for all cards and the 9999px pill for all buttons and tags; 8px is reserved for inputs only"
      - "Place Peach Blush icon circles only inside audience/feature cards — never on dark indigo surfaces where they would clash"
      - "Use Card Padding 40px and Section Gap 80px as the rhythm; the 8px base unit governs all internal gaps"

    don_t:
      - "Do not use soft, blurred drop shadows — the hard 4px solid offset is the only elevation language in this system"
      - "Do not introduce new chromatic colors; Brand Blue and Deep Indigo are the only saturated voices, and they must not share a surface"
      - "Do not set display type without negative letter-spacing; positive tracking at 56px+ destroys the editorial feel"
      - "Do not use 8px radius on cards or 24px radius on inputs — the three-tier radius system (24px / 9999px / 8px) is strict"
      - "Do not place text directly on Peach Blush or Lavender Mist without checking contrast — both are surface washes, not text backgrounds"
      - "Do not add a second outlined pill button to the same view; the Log-in outline is a one-per-header accent"
      - "Do not center body text longer than a single line; the editorial system relies on left-aligned, ragged-right reading"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper Cream Canvas | `#f4f1ea` | Primary page background — the warm editorial base |"
    info: "| 1 | White Card | `#ffffff` | Standard card and nav surface on cream canvas |"
    info: "| 2 | Ice Blue Wash | `#e9f4ff` | Alternate light surface for secondary cards and callout boxes |"
    info: "| 3 | Lavender Mist | `#e6e0f8` | Input field backgrounds, notification banner tint |"
    info: "| 4 | Peach Blush | `#f7e1d5` | Icon circle containers in feature/audience cards |"
    info: "| 5 | Midnight Card | `#213680` | Elevated card on deep indigo panels |"
    info: "| 6 | Deep Indigo Panel | `#0e2575` | Full-bleed dark feature section background |"

  elevation:

    - "**Buttons, nav buttons, pill controls:** `0px 4px 0px 0px #000000`"

  imagery:

    info: "Visuals are illustrations, not photography — flat, line-art icons drawn in Brand Blue (#0066cc) depicting documents, magnifying glasses, music notes, cassette tapes, and microphones. Icons always sit inside Peach Blush (#f7e1d5) circles on cream surfaces, or float freely near headlines in the hero. The illustration style is geometric and monoweight, never filled, never gradient-shaded. No product screenshots, no lifestyle photography, no 3D renders. Image density is low — illustrations appear as single accents (one per hero, one per card) rather than as galleries. The visual language reads like editorial spot illustrations in a music-industry magazine."

  layout:

    info: "The page model is max-width contained at ~1280px, centered, with generous outer gutters. The hero is a left-aligned oversized headline stack on Paper Cream with floating illustration accents to the right — no full-bleed image, no video. The site alternates between warm cream bands (audience, features) and a single full-width Deep Indigo section ('Why use MetaMusic?'), creating a clear warm→cool progression as the user scrolls. Section rhythm uses 80px vertical gaps with no visible dividers — separation comes from surface color shifts alone. The audience section uses a 2-column split: oversized left-aligned heading on the left, stacked white cards on the right. Feature sections use a 3–4 column card grid on the dark indigo panel. Navigation is a single 64px white top bar — no sticky variant, no sidebar, no mega-menu. The overall density is spacious and editorial: one or two primary elements per viewport, never more."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Text: #101820 (Charcoal Ink) on cream, #ffffff on indigo"
    - "Background: #f4f1ea (Paper Cream) for pages, #0e2575 (Deep Indigo) for dark sections"
    - "Border: #d6d6d6 (Ash) for hairlines, #0066cc (Brand Blue) for interactive borders"
    - "Accent: #0066cc (Brand Blue) — the only chromatic voice"
    - "Icon wash: #f7e1d5 (Peach Blush) circles for decorative icons"
    - "primary action: #0066cc (outlined action border)"

    info: "Example Component Prompts:"

    - "Create a hero section: Paper Cream (#f4f1ea) background, max-width 1280px centered. Accent eyebrow 'Discover MetaMusic' in Brand Blue (#0066cc) Maison Neue 500 at 16px. Headline 'Take control of your music metadata' in Charcoal Ink (#101820) Maison Neue 600 at 80px, lineHeight 1.05, letter-spacing -1.6px. Two cards below at 40px padding, 24px radius: left card is Brand Blue (#0066cc) background with white text 'Create a MetaMusic Beta account' plus a 40px Black circular arrow button; right card is White background with 1px Ash Border, Charcoal Ink text, same arrow button."

    - "Create an audience section: Paper Cream background, 2-column layout. Left column: Accent eyebrow 'Who's it for?' in Brand Blue 16px, then 'MetaMusic is for everyone involved in local music!' in Charcoal Ink Maison Neue 600 at 56px, lineHeight 1.05, letter-spacing -1.12px. Right column: 4 stacked White cards, each 40px padding, 24px radius, containing a 48px Peach Blush (#f7e1d5) circle with a Brand Blue line-icon, a 19px Maison Neue 500 title, and 16px body text."

    - "Create a dark feature section: Deep Indigo (#0e2575) full-width background, white text. Centered heading 'Why use MetaMusic?' in White Maison Neue 600 at 56px, with a Brand Blue link 'Discover MetaMusic's metadata management tool →' below. 4-column grid of Midnight Card (#213680) cards, 40px padding, 24px radius. Each card has a 32px Brand Blue circle with a white numeral (1–4) top-left, a White Maison Neue 500 title at 22px, and White body at 16px."

    - "Create a text input: White background, 1px Lavender Mist (#e6e0f8) border, 8px radius, 16px padding, Maison Neue 400 at 16px, Charcoal Ink text. Focus state: border becomes Brand Blue (#0066cc), no shadow change."

    - "Create the top navigation: White background, 64px height, Ash Border (#d6d6d6) 1px bottom hairline. Left: Brand Blue mark + Maison Neue 600 wordmark. Center-left: nav links (Discover the Tool, Help and training sessions, Resources, News, Contact us) in Maison Neue 500 at 16px Charcoal Ink. Right: Outline Nav Button — White background, 1px Black border, Charcoal Ink 'Log-in to the portal' text, 9999px radius, 12px 24px padding, 0px 4px 0px 0px #000000 shadow. Far right: globe icon + 'Fr' in Maison Neue 400 at 14px."

  typography_voice:

    info: "Maison Neue is the entire voice of the interface — it carries from 12px helper text to 120px hero without ever changing its humanist character. The signature move is the negative letter-spacing ramp: -0.01em at 32–40px, -0.02em at 56–80px, -0.03em at 120px. This tracking compression is what makes the display type feel designed rather than defaulted. Spoof appears once per page maximum at 22px weight 500 — think of it as a typographic period at the end of a headline, not a body face. Never set body text at 0.90 line-height or display text at 1.5; the line-height scale is tightly coupled to size (0.95 at 120px → 1.5 at 12px)."

  similar_brands:

    - "**Splice** — Editorial cream/white canvas with oversized sans-serif headlines and a single blue brand accent; the same museum-label approach to hero typography"
    - "**Bandcamp** — Warm paper-like base color with generous spacing, large confident type, and minimal decoration — music-industry tools that prioritize readability over flash"
    - "**Notion** — Clean light surfaces, generous card padding (40px), 24px card radius, and a single functional accent color for actions and links"
    - "**Linear** — Pill-shaped buttons with hard-offset shadows and a single chromatic accent on a near-white canvas — the same sticker-flat button treatment"
    - "**Squarespace** — Oversized display type with tight negative tracking, generous section gaps, and a warm neutral canvas that signals editorial credibility"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-brand-blue: #0066cc;
          --color-deep-indigo: #0e2575;
          --color-midnight-card: #213680;
          --color-charcoal-ink: #101820;
          --color-paper-cream: #f4f1ea;
          --color-white: #ffffff;
          --color-lavender-mist: #e6e0f8;
          --color-ice-blue: #e9f4ff;
          --color-peach-blush: #f7e1d5;
          --color-ash-border: #d6d6d6;
        
          /* Typography — Font Families */
          --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spoof: 'Spoof', 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.4;
          --text-subheading: 19px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.2px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.32px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.4px;
          --text-display-sm: 56px;
          --leading-display-sm: 1.05;
          --tracking-display-sm: -1.12px;
          --text-display: 80px;
          --leading-display: 1.05;
          --tracking-display: -1.6px;
          --text-display-lg: 120px;
          --leading-display-lg: 0.95;
          --tracking-display-lg: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 40px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 24px;
          --radius-badges: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgb(0, 0, 0) 0px 4px 0px 0px;
        
          /* Surfaces */
          --surface-paper-cream-canvas: #f4f1ea;
          --surface-white-card: #ffffff;
          --surface-ice-blue-wash: #e9f4ff;
          --surface-lavender-mist: #e6e0f8;
          --surface-peach-blush: #f7e1d5;
          --surface-midnight-card: #213680;
          --surface-deep-indigo-panel: #0e2575;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-brand-blue: #0066cc;
          --color-deep-indigo: #0e2575;
          --color-midnight-card: #213680;
          --color-charcoal-ink: #101820;
          --color-paper-cream: #f4f1ea;
          --color-white: #ffffff;
          --color-lavender-mist: #e6e0f8;
          --color-ice-blue: #e9f4ff;
          --color-peach-blush: #f7e1d5;
          --color-ash-border: #d6d6d6;
        
          /* Typography */
          --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spoof: 'Spoof', 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.4;
          --text-subheading: 19px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.2px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.32px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.4px;
          --text-display-sm: 56px;
          --leading-display-sm: 1.05;
          --tracking-display-sm: -1.12px;
          --text-display: 80px;
          --leading-display: 1.05;
          --tracking-display: -1.6px;
          --text-display-lg: 120px;
          --leading-display-lg: 0.95;
          --tracking-display-lg: -3.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgb(0, 0, 0) 0px 4px 0px 0px;
        }