flora___style_reference:
  info: "> Black velvet gallery — pure dark canvas, vivid images as the only color"

  theme: "dark"

  info: "FLORA is a black-velvet gallery for AI-generated imagery: a pure #000000 canvas where the only color comes from the images themselves. The interface is austere and editorial — no chromatic brand accent, no decorative gradients, no icon color. Geist carries every functional surface with quiet efficiency while Redaction 10 and Redaction 50 Italic lend expressive typographic weight to the few moments that need to feel curated (the hero question, the section openers). Components float on #191919 cards with hairline #b4b4b4 borders and 24px radii, looking more like matted photographs than software panels. The entire system is designed to disappear so that the generated visual output — the actual product — becomes the only vivid thing on screen."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page canvas, primary borders, image frame edges |"
    info: "| Carbon | `#191919` | `--color-carbon` | Card surfaces, elevated panels, input fields — one step above the canvas |"
    info: "| Graphite | `#303030` | `--color-graphite` | Deeper elevated surfaces, input interiors, subtle panel separation |"
    info: "| Slate | `#606060` | `--color-slate` | Muted headings, secondary borders, subdued labels |"
    info: "| Ash | `#7b7b7b` | `--color-ash` | Body secondary text, link borders, metadata text |"
    info: "| Fog | `#b4b4b4` | `--color-fog` | Primary borders, hairlines, dividers, muted body text |"
    info: "| Mist | `#bfbfbf` | `--color-mist` | Light borders, subtle surface edges |"
    info: "| Bone | `#eeeeee` | `--color-bone` | Primary text, high-contrast borders, heading strokes — the only near-white |"
    info: "| Pitch | `#050505` | `--color-pitch` | Near-black for icon strokes, inverted button text, fine detail borders |"

  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"

    geist___primary_ui_and_body_font___used_across_all_functional_text__nav__buttons__inputs__labels__and_standard_headings__the_weight_range_is_tight_400_for_body__500_for_emphasis__600_for_strong_labels_creating_a_restrained_typographic_voice__letter_spacing_tightens_at_larger_sizes__0_0300em_at_80px___0_0170em_at_20px_giving_headings_a_compressed_editorial_feel__the_cv03_cv04_cv09_cv11_alternates_and_blwf_feature_shape_geist_s_letterforms_into_a_distinctly_modern__slightly_geometric_sans_____font_geist:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 8, 11, 12, 14, 15, 16, 20, 22, 30, 60, 80px"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** -0.0300em at 80px, -0.0250em at 60px, -0.0170em at 20px, -0.0100em at 16px, -0.0010em at 14px, normal at 12px and below"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Primary UI and body font — used across all functional text, nav, buttons, inputs, labels, and standard headings. The weight range is tight (400 for body, 500 for emphasis, 600 for strong labels) creating a restrained typographic voice. Letter-spacing tightens at larger sizes (-0.0300em at 80px, -0.0170em at 20px) giving headings a compressed editorial feel. The cv03/cv04/cv09/cv11 alternates and blwf feature shape Geist's letterforms into a distinctly modern, slightly geometric sans."

    redaction_10___display_heading_font___used_for_editorial_section_titles_where_the_word_itself_needs_presence__redaction_is_a_high_contrast_serif_transitional_with_extreme_thin_strokes__at_42px_with__0_0360em_tracking_it_reads_as_a_magazine_masthead__not_ui__the_signature_choice_is_using_a_serif_on_a_pure_black_generative_ai_product___it_humanizes_the_machine_____font_redaction_10:
      - "**Substitute:** Playfair Display, EB Garamond"
      - "**Weights:** 400"
      - "**Sizes:** 42px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.0360em"
      - "**Role:** Display heading font — used for editorial section titles where the word itself needs presence. Redaction is a high-contrast serif/transitional with extreme thin strokes; at 42px with -0.0360em tracking it reads as a magazine masthead, not UI. The signature choice is using a serif on a pure-black generative-AI product — it humanizes the machine."

    redaction_50_italic___accent_display_variant___used_for_one_or_two_words_within_an_otherwise_upright_redaction_headline_e_g___what_should_we_make__with__make__in_italic__the_italic_is_a_loaded_gesture__it_signals_the_creative_act__the_human_agency_of_prompting__tracking_at__0_0240em_keeps_the_italic_from_sprawling_____font_redaction_50_italic:
      - "**Substitute:** Playfair Display Italic, Cormorant Italic"
      - "**Weights:** 400"
      - "**Sizes:** 42px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0240em"
      - "**Role:** Accent display variant — used for one or two words within an otherwise upright Redaction headline (e.g. 'What should we make?' with 'make' in italic). The italic is a loaded gesture: it signals the creative act, the human agency of prompting. Tracking at -0.0240em keeps the italic from sprawling."

    satoshi___occasional_bold_subhead___used_sparingly_for_card_titles_or_section_labels_where_geist_at_600_would_feel_too_neutral_and_redaction_would_feel_too_editorial__satoshi_at_700_fills_the_middle_ground_____font_satoshi:
      - "**Substitute:** Inter Bold, Geist Bold"
      - "**Weights:** 700"
      - "**Sizes:** 22px"
      - "**Line height:** 1.15"
      - "**Letter spacing:** -0.0300em"
      - "**Role:** Occasional bold subhead — used sparingly for card titles or section labels where Geist at 600 would feel too neutral and Redaction would feel too editorial. Satoshi at 700 fills the middle ground."

    geist_variable___geist_variable___detected_in_extracted_data_but_not_described_by_ai____font_geist_variable:
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px"
      - "**Line height:** 1"
      - "**Letter spacing:** 0.029"
      - "**Role:** Geist Variable — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.37 | -0.14px | `--text-body-sm` |"
      info: "| body-lg | 16px | 1.4 | -0.16px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.2 | -0.34px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.15 | -0.66px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.1 | — | `--text-heading` |"
      info: "| display | 42px | 1.1 | -1.01px | `--text-display` |"
      info: "| display-lg | 60px | 1 | -1.5px | `--text-display-lg` |"
      info: "| display-xl | 80px | 1 | -2.4px | `--text-display-xl` |"

  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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 10px |"
      info: "| cards | 24px |"
      info: "| pills | 9999px |"
      info: "| inputs | 24px |"
      info: "| buttons | 10px |"

    layout:

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

  components:

    prompt_input:
      role: "Hero CTA — the primary interaction surface"

      info: "Full-width Carbon (#191919) surface, 24px radius, hairline Fog (#b4b4b4) border, 24px internal padding. Placeholder text in Ash (#7b7b7b) at 15px Geist 400. Contains a circular submit button (24px, #eeeeee fill, dark icon) at the right edge. This is the largest functional element on the page — it must feel inviting and centered."

    feature_card_ideate_iterate_scale:
      role: "Three-column capability showcase"

      info: "Carbon (#191919) surface, 24px radius, 1px Fog (#b4b4b4) border. Internal padding 24px. Large numeral (01/02/03) at 30px Geist 600 in Ash, paired with a heading at 30px Geist 600 in Bone. Contains a screenshot/UI preview image filling the card body, followed by a short descriptor in Body text and a bullet subhead in Geist 600."

    ghost_navigation_button:
      role: "Top-right secondary action"

      info: "Transparent fill, 1px Fog (#b4b4b4) border, 10px radius, padding 9px 13px. Text in Bone at 14px Geist 500. On hover, background lifts to #191919."

    primary_pill_button:
      role: "Top-right primary action ('Get started for free')"

      info: "Bone (#eeeeee) fill, Pitch (#050505) text, 9999px radius (fully pill), padding 9px 14px. Text at 14px Geist 500. This is the only light element in the nav — it functions as the bright dot in a dark field."

    pill_suggestion_chip:
      role: "Quick-prompt buttons under the main input"

      info: "Transparent fill, 1px Fog (#b4b4b4) border, 9999px radius, padding 6px 14px. Text at 14px Geist 400 in Bone, with a small leading icon. Three chips sit in a row: 'On-brand variations', 'Editorial shoot', 'Campaign moodboard'."

    top_navigation_bar:
      role: "Site-wide navigation"

      info: "Sticky, transparent (canvas #000000 shows through), no border. Logo (FLORA wordmark with monogram) on the left, nav links centered, two action buttons on the right. Links at 14px Geist 400 in Bone, with dropdown chevrons. The wordmark uses a serif treatment distinguishing it from the sans-serif UI."

    image_preview_thumbnail:
      role: "Floating gallery of generated outputs"

      info: "Aspect-ratio-locked image tile with 10px or 24px radius, no border, 2–3px gap between tiles. Images are the only chromatic content — they sit on the black canvas like prints hung on a gallery wall, slightly overlapping in parallax positions."

    tag_pill__new:
      role: "Feature freshness indicator"

      small_pill: "Carbon (#191919) fill, 10px radius, padding 1px 8px. Text at 11px Geist 500 in Bone, often paired with a parent nav link (e.g., 'Techniques New')."

    workflow_diagram_card:
      role: "Node-graph visualization in the 'Scale' section"

      info: "Carbon (#191919) panel, 24px radius, containing 3–4 image nodes connected by thin Fog (#b4b4b4) curved lines. Nodes have 10px radius, show a small image preview and a label in caption-size Geist."

    section_heading_redaction:
      role: "Editorial section titles"

      info: "Redaction 10 at 42px, tracking -0.0360em, color Bone (#eeeeee), with one word in Redaction 50 Italic for emphasis. Line-height 1.10. Appears above or beside a short descriptive paragraph in body Geist."

    text_left_large_display:
      role: "Full-bleed section headers ('Visual Effects', 'Fashion', 'Advertising')"

      info: "Display at 60–80px Geist, tracking -0.0250em to -0.0300em, in Bone. Large section labels stack vertically with generous 48px+ vertical rhythm. Sits on the black canvas — no card, no border."

    footer_link:
      role: "Bottom-of-page navigation"

      info: "Text-only, no background. Ash (#7b7b7b) at 14px Geist 400, 4–8px gap between items. On hover, color shifts to Bone."

  do_s_and_don_ts:

    do:
      - "Use Carbon (#191919) for every elevated surface — cards, inputs, modals — so they read as one step above the black canvas"
      - "Set primary text and key headings in Bone (#eeeeee); use Ash (#7b7b7b) for secondary metadata and Fog (#b4b4b4) for body text and borders"
      - "Use Redaction 10/50 Italic for editorial section titles and the hero question; reserve Geist for all functional UI text"
      - "Apply 24px radius to cards, inputs, and large surfaces; 10px to buttons and tags; 9999px only to the primary pill CTA and quick-prompt chips"
      - "Apply -0.0300em letter-spacing at 60–80px display sizes and -0.0170em at 20–22px subheadings to maintain the compressed editorial voice"
      - "Keep the interface fully monochrome — let the generated images be the only source of color in any composition"
      - "Use 1px Fog (#b4b4b4) borders on cards and inputs; never use shadows to denote elevation"

    don_t:
      - "Do not introduce a chromatic brand accent color — the zero-colorfulness palette is the signature"
      - "Do not use Redaction for body text, buttons, or functional UI; it is display-only"
      - "Do not apply box-shadows to cards or panels — the system relies on #191919 surface contrast against #000000 canvas, not elevation shadows"
      - "Do not use Satoshi at 700 for long headlines; it is a subhead accent, not a display face"
      - "Do not center-align body paragraphs or card descriptions — use left-align to match the editorial left-edge rhythm"
      - "Do not use 4px or 5px radii for cards or inputs; stay on the 10/24/9999px system"
      - "Do not use color-coded status indicators (green/yellow/red) — if feedback is needed, use weight, size, or position changes within the gray scale"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Page background — pure black absorbs all attention toward the generated imagery |"
    info: "| 1 | Card | `#191919` | Elevated panels, prompt input, feature cards — one stop above the canvas |"
    info: "| 2 | Deep Surface | `#303030` | Input interiors, nested panels, subtle layering |"

  elevation:

    info: "FLORA uses no box-shadows. Elevation is communicated entirely through surface tone: the canvas is #000000, elevated panels are #191919, and deeper nested surfaces are #303030. This eliminates the visual noise of cast shadows and keeps the black-velvet-gallery feel intact. Hairline 1px borders in Fog (#b4b4b4) define card edges instead."

  imagery:

    info: "Imagery is the product — generated photographs, editorial compositions, and creative outputs are the dominant visual content. Images appear as floating tiles on the pure black canvas, often with parallax overlap, no captions, and slight rotation. They are full-color, high-contrast, and editorial in quality (fashion-editorial lighting, cinematic compositions). In UI mockups embedded within cards, screenshots show the FAUNA agent interface with mock generation results. No illustrations, no 3D renders, no abstract graphics — the generated photographic output carries all visual weight."

  layout:

    info: "Full-bleed sections on a 1280px max-width centered track. The hero is a centered prompt input with floating image previews above and beside it, arranged in a loose asymmetric collage on the black canvas. Below the hero, a three-column feature grid (Ideate/Iterate/Scale) with equal-width cards. Further down, a two-column split with a large left-aligned display heading stacked vertically (Visual Effects / Fashion / Advertising) and a workflow diagram card on the right. Section rhythm uses 48px vertical gaps with no dividers — sections flow seamlessly on the black canvas. Navigation is a single transparent sticky bar at the top."

  agent_prompt_guide:

    quick_color_reference:
    - "Canvas/background: #000000"
    - "Card/elevated surface: #191919"
    - "Deep surface: #303030"
    - "Primary text: #eeeeee"
    - "Secondary text/borders: #b4b4b4"
    - "Muted text: #7b7b7b"
    - "primary action: #000000 (filled action)"

    example_component_prompts:
    - "*Hero prompt input*: Full-width Carbon (#191919) surface, 24px radius, 1px Fog (#b4b4b4) border, 24px padding. Placeholder 'Shoot an on-figure editorial in a Tokyo alley…' in Ash (#7b7b7b) at 15px Geist 400. Circular 24px submit button with Bone fill at right edge."

    - "*Three-column feature card*: Carbon (#191919) fill, 24px radius, 1px Fog border, 24px padding. Numeral '01' in Ash at 30px Geist 600, heading 'Ideate' in Bone at 30px Geist 600. Body text in Fog at 15px Geist 400. Contains a UI mockup image filling the card width."

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

    - "*Editorial section heading*: Redaction 10 at 42px, tracking -0.0360em, color Bone, line-height 1.10. One word swapped to Redaction 50 Italic for emphasis."

    - "*Ghost nav button*: Transparent fill, 1px Fog (#b4b4b4) border, 10px radius, padding 9px 13px. Text 'Contact sales' at 14px Geist 500 in Bone."

  monochrome_discipline:

    info: "The palette has zero colorfulness. This is not a constraint — it is the core identity. Every chromatic pixel in the system comes from user-generated imagery, never from UI chrome. When adding any new component, audit it for color: fills, borders, icons, and text must all be drawn from the 9-step achromatic scale (#000000 → #050505 → #191919 → #303030 → #606060 → #7b7b7b → #b4b4b4 → #bfbfbf → #eeeeee). The only permitted color in chrome is the gradient highlight on the submit arrow and the green 'New' badge dot — and even these are used minimally."

  similar_brands:

    - "**Midjourney** — Same monochrome dark gallery aesthetic where the generated images are the only color; floating image grid on pure black canvas"
    - "**Krea AI** — Same zero-chrome dark interface with prompt-centric hero and image-preview gallery arranged asymmetrically on black"
    - "**Ideogram** — Same editorial dark-mode product UI with serif display accents on a pure black canvas and compact card grids"
    - "**Runway** — Same black-canvas generative-AI landing page pattern with floating creative output tiles and minimal UI chrome"
    - "**Linear** — Same hairline-border-on-dark-surface component language (1px borders, subtle #191919 card elevation, no shadows) and Geist-family typography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-carbon: #191919;
          --color-graphite: #303030;
          --color-slate: #606060;
          --color-ash: #7b7b7b;
          --color-fog: #b4b4b4;
          --color-mist: #bfbfbf;
          --color-bone: #eeeeee;
          --color-pitch: #050505;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction-10: 'Redaction 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction-50-italic: 'Redaction 50 Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-variable: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.37;
          --tracking-body-sm: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.34px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.66px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --text-display: 42px;
          --leading-display: 1.1;
          --tracking-display: -1.01px;
          --text-display-lg: 60px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.5px;
          --text-display-xl: 80px;
          --leading-display-xl: 1;
          --tracking-display-xl: -2.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --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-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 10px;
          --radius-3xl: 24px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-tags: 10px;
          --radius-cards: 24px;
          --radius-pills: 9999px;
          --radius-inputs: 24px;
          --radius-buttons: 10px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-card: #191919;
          --surface-deep-surface: #303030;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-carbon: #191919;
          --color-graphite: #303030;
          --color-slate: #606060;
          --color-ash: #7b7b7b;
          --color-fog: #b4b4b4;
          --color-mist: #bfbfbf;
          --color-bone: #eeeeee;
          --color-pitch: #050505;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction-10: 'Redaction 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-redaction-50-italic: 'Redaction 50 Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-variable: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.37;
          --tracking-body-sm: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.34px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.66px;
          --text-heading: 30px;
          --leading-heading: 1.1;
          --text-display: 42px;
          --leading-display: 1.1;
          --tracking-display: -1.01px;
          --text-display-lg: 60px;
          --leading-display-lg: 1;
          --tracking-display-lg: -1.5px;
          --text-display-xl: 80px;
          --leading-display-xl: 1;
          --tracking-display-xl: -2.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 10px;
          --radius-3xl: 24px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        }