campsite___style_reference:
  info: "> sunlit editorial workspace — warm cream paper with one orange stamp of intent"

  theme: "light"

  info: "Campsite is a sunlit editorial workspace — warm cream canvas, near-black Inter typography, and a single vivid orange that marks brand moments. The interface reads like a thoughtfully arranged bulletin board: compact rows, pill-shaped controls, soft 5%-black shadows, and generous breathing room between sections. Color is rationed — chromatic notes appear only in the logo, the paint-splash decorative motifs, a few tags, and semantic states. The density is compact but the layout feels open because of wide gutters and generous section padding; everything important sits on pure white cards floating just above the cream paper beneath them."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Campfire Orange | `#ff6b1a` | `--color-campfire-orange` | Logo badge, notification pills, and brand-punctuation moments — a single warm coral that anchors the entire palette against the cream canvas |"
    info: "| Ember Brown | `#451a03` | `--color-ember-brown` | Deep brown accent for paint-splash illustration shadows and inline highlight text in testimonials |"
    info: "| Sunlit Cream | `#fef3c7` | `--color-sunlit-cream` | Soft warm wash behind tags, badges, and inline highlights |"
    info: "| Forest Pulse | `#22c55e` | `--color-forest-pulse` | Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Ember Alert | `#ef4444` | `--color-ember-alert` | Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Midnight Ink | `#171717` | `--color-midnight-ink` | Primary text, headings, icon strokes, and dark filled buttons |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, and the top of the surface stack |"
    info: "| Parchment | `#fffdf9` | `--color-parchment` | Page canvas — a barely-warm off-white that gives the whole site its sunlit feel |"
    info: "| Fog Gray | `#f5f5f5` | `--color-fog-gray` | Muted backgrounds, secondary surface fills, and input field chrome |"
    info: "| Linen | `#f0f0f0` | `--color-linen` | Subtle dividers, hover wash on rows, and tag backgrounds |"
    info: "| Ash Gray | `#a3a3a3` | `--color-ash-gray` | Muted helper text, placeholder copy, and disabled labels |"
    info: "| Slate | `#737373` | `--color-slate` | Secondary text, timestamps, and metadata in lists |"
    info: "| Graphite | `#525252` | `--color-graphite` | Tertiary text and muted icon strokes |"
    info: "| Stone | `#8f7668` | `--color-stone` | Warm muted accent for body copy that should feel quieter than Midnight Ink |"

  tokens___typography:

    inter___sole_typeface_across_ui__headings__and_body___no_display_or_serif_counterpart__the_single_family_commitment_is_deliberate__inter_s_geometric_neutrality_keeps_focus_on_content__and_the_three_weight_range_400_body__500_metadata__600_display_carries_all_hierarchy_____font_inter:
      - "**Substitute:** Inter Tight or IBM Plex Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 29, 58"
      - "**Line height:** 1.00–1.80"
      - "**Letter spacing:** -1.8px at 58px display, -0.52px at 29px heading, -0.37px at 22px subheading, +0.25px at 10–12px captions"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Sole typeface across UI, headings, and body — no display or serif counterpart. The single-family commitment is deliberate: Inter's geometric neutrality keeps focus on content, and the three-weight range (400 body, 500 metadata, 600 display) carries all hierarchy."

    ui_monospace___inline_code_fragments_and_keyboard_shortcuts_inside_the_feed____font_ui_monospace:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12"
      - "**Line height:** 1.00"
      - "**Role:** Inline code fragments and keyboard shortcuts inside the feed"

    emoji___emoji___detected_in_extracted_data_but_not_described_by_ai____font_emoji:
      - "**Weights:** 500, 600"
      - "**Sizes:** 12px, 14px"
      - "**Line height:** 1"
      - "**Role:** emoji — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.3px | `--text-caption` |"
      info: "| body | 15px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.4 | -0.37px | `--text-heading-sm` |"
      info: "| heading | 29px | 1.2 | -0.52px | `--text-heading` |"
      info: "| display | 58px | 1 | -1.8px | `--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: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8-12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 8px |"
      info: "| avatars | 9999px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05)...` | `--shadow-sm` |"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08)...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-2` |"

    layout:

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

  components:

    brand_logo_badge:
      role: "Persistent brand mark in the top-left of every page"

      info: "28px rounded square (radius 8px) filled with Campfire Orange (#ff6b1a), white 'C' glyph at 16px Inter weight 600 centered inside. Acts as the home button."

    notification_pill_banner:
      role: "Headline-area announcement strip"

      info: "Inline pill, 9999px radius, 8px 16px padding, Campfire Orange fill, white text at 13px Inter weight 500. Optional leading 'NEW' tag in a 2-tone orange + dot indicator. Sits above the hero headline."

    hero_headline:
      role: "First-screen page title"

      info: "58px Inter weight 600 in Midnight Ink, centered, line-height 1.00, letter-spacing -1.8px. Two short lines max. Followed by a 17–18px Inter weight 400 subtitle in Slate (#737373), centered."

    section_heading:
      role: "Inter-section title in marketing pages"

      info: "29px Inter weight 600 Midnight Ink, centered, line-height 1.20, letter-spacing -0.52px. One to two lines."

    filled_pill_button:
      role: "Primary interactive action"

      info: "9999px radius, 8px 16px padding, Midnight Ink background, white text at 14px Inter weight 500. No border. Soft inset highlight from the elevation stack to suggest a tactile surface."

    ghost_pill_button:
      role: "Secondary action / link-style button"

      info: "9999px radius, 8px 16px padding, transparent background, 1px Linen (#f0f0f0) border, Slate text. On hover: Fog Gray wash."

    app_preview_frame:
      role: "Wrapping frame around product screenshots in marketing"

      info: "White surface, 12px radius, subtle 5%-black shadow stack from the elevation set, optional browser-chrome header (traffic-light dots, title text) at top. Acts as the visual proof artifact for each feature."

    sidebar_nav_item:
      role: "Navigation row inside the product app"

      info: "Compact row, 8px 12px padding, small 16px icon in Slate, 14px Inter weight 500 label in Midnight Ink. Active state: Fog Gray fill, Midnight Ink icon. 9999px radius to match the pill language."

    post_list_item:
      role: "Single row inside the main feed"

      info: "White card surface, 16px padding, 12px radius. Left: 24px avatar (9999px, colored fill or image). Center: author name 14px Inter weight 600, body 14px weight 400 in Midnight Ink. Right: tag pill (9999px, Sunlit Cream fill, Ember Brown text) and timestamp in Ash Gray."

    channel_card:
      role: "Discoverable team space tile in the channels section"

      info: "White card, 12px radius, 16px padding, 1px Linen border. Title 18px Inter weight 600, member avatars stacked (16px, 9999px), and a ghost pill CTA in the corner with a small icon."

    tag___status_pill:
      role: "Inline metadata badge"

      info: "9999px radius, 4px 10px padding, 12px Inter weight 500. Variants: Sunlit Cream fill with Ember Brown text, Forest Pulse fill with white text for success, Ember Alert fill with white text for error."

    search_input:
      role: "People and content search field"

      info: "Full-width input, 8px radius, 8px 12px padding, Fog Gray fill, Ash Gray placeholder at 14px Inter weight 400. No visible border — the fill is the chrome. Leading 16px search icon in Ash Gray."

    people_list_item:
      role: "Right-rail entry showing a person in the app"

      info: "32px avatar (9999px), 14px Inter weight 500 name in Midnight Ink, 12px Inter weight 400 status in Ash Gray. 8px 12px padding, no card chrome — sits directly on the Fog Gray panel."

    testimonial_block:
      role: "Pull-quote between feature sections"

      info: "Left-aligned body copy at 17px Inter weight 400 in Midnight Ink, with the brand-defining sentence set in Inter weight 600 in Ember Brown. Attribution row below: 24px avatar + 13px Inter weight 500 name in Slate, 12px role in Ash Gray."

    decorative_paint_splash:
      role: "Page-edge ornamental motif"

      info: "Organic orange + Ember Brown splatter illustration clipped to the far left/right of the viewport on the hero and mid-page sections. Pure decoration — never carries content, never overlaps text. Anchors the 'creative workspace' mood."

  do_s_and_don_ts:

    do:
      - "Use 9999px radius for every interactive element — buttons, tags, avatars, and pills all share the same full-curve language"
      - "Set hero headlines at 58px Inter weight 600 with -1.8px letter-spacing so the type settles into a confident, compressed silhouette"
      - "Layer surfaces as Parchment (#fffdf9) canvas → Paper White (#ffffff) card → Fog Gray (#f5f5f5) inset — never use pure gray borders to separate layers"
      - "Reserve Campfire Orange (#ff6b1a) for logo, notification pills, and one or two brand moments per page — never use it for routine CTAs"
      - "Keep the 4px base unit: use 8px for element gaps, 12–16px for card padding, 64–80px for section gaps"
      - "Apply the soft 5%-black shadow stack to any card that floats above another surface — inset highlight shadows belong only on filled buttons"
      - "Use Inter weight 600 for all display sizes and weight 500 for metadata, never let body copy go above weight 400"

    don_t:
      - "Don't introduce a second typeface — the single-family Inter system is the design, not a limitation to work around"
      - "Don't add blue, purple, or any cool chromatic accent — the palette is intentionally warm-only, and a cool note would break the cream-paper mood"
      - "Don't use hard 1px gray borders to separate cards from the canvas — the warm off-white background already does the work"
      - "Don't use Campfire Orange for everyday buttons, links, or icon states — chromatic color is rationed to brand punctuation only"
      - "Don't set headlines above 60px or below 22px without a structural reason — the 22/29/58 scale carries the rhythm"
      - "Don't use sharp 0px or 2px radii on surfaces — the 8–12px range is what makes the cards feel like paper, not glass"
      - "Don't place photography or lifestyle imagery inside the marketing flow — paint splashes and product screenshots are the only visual registers"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Parchment Canvas | `#fffdf9` | Page background — warm off-white that absorbs the site into editorial paper |"
    info: "| 2 | Paper White | `#ffffff` | Card surfaces and the main feed container — pure white lifts content above the canvas |"
    info: "| 3 | Fog Gray | `#f5f5f5` | Hover states, secondary panels, and the inside of the people sidebar |"
    info: "| 4 | Sunlit Cream | `#fef3c7` | Occasional warm wash for highlighted tags and inline callouts |"

  elevation:

    - "**Card / surface elevation:** `0 3px 6px -3px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05), 0 1px 1px -1px rgba(0,0,0,0.05), 0 1px 0 -1px rgba(0,0,0,0.05)`"
    - "**Filled button / interactive inset:** `0 1px 1px -1px rgba(0,0,0,0.08), 0 2px 2px -1px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06), inset 0 1px 0 #fff, inset 0 1px 2px 1px #fff, inset 0 1px 2px 0 rgba(0,0,0,0.06)`"
    - "**Subtle row / chip:** `0 1px 2px 0 rgba(0,0,0,0.05)`"

  imagery:

    info: "Imagery is split into three strict registers and nothing else. (1) Decorative paint-splash illustrations in Campfire Orange and Ember Brown clipped to the far left and right of the viewport on hero and mid-page sections — organic, asymmetric, never overlapping text, never carrying meaning. (2) Product screenshots wrapped in a white App Preview Frame with optional browser-chrome header and soft 5%-black shadow — these are the proof artifacts for each feature and always sit centered below their section heading. (3) Avatar circles only — 24–32px, 9999px radius, either a photo or a solid color block with initials, no decorative imagery attached. There is no lifestyle photography, no stock illustration, no 3D renders. Icons throughout the UI are simple, single-weight, monochrome in Slate or Midnight Ink; the brand mark is the only place color lives."

  layout:

    info: "Marketing pages follow a centered, max-width-1200px column with generous vertical rhythm. The hero is a single centered stack: notification pill → 58px headline → 17px subtitle → App Preview Frame screenshot, with Campfire Orange paint-splash motifs bleeding off the left and right edges of the viewport. Below the hero, sections alternate between two patterns: a centered section heading followed by an App Preview Frame, and a centered heading followed by a Testimonial Block. All sections use 64–80px vertical padding. The product app itself uses a three-column shell: a compact left sidebar (icons + labels, Fog Gray hover), a white main feed, and a right-side people/online panel on Fog Gray. Navigation is a minimal top bar with right-aligned text links — no dropdowns, no mega-menu, no sticky behavior on marketing pages."

  agent_prompt_guide:

    info: "QUICK COLOR REFERENCE"
    - "text: #171717 (Midnight Ink)"
    - "background (page): #fffdf9 (Parchment)"
    - "background (card): #ffffff (Paper White)"
    - "background (muted panel): #f5f5f5 (Fog Gray)"
    - "border / divider: #f0f0f0 (Linen)"
    - "accent: #ff6b1a (Campfire Orange) — use sparingly for logo, pills, brand moments"
    - "primary action: no distinct CTA color"

    info: "EXAMPLE COMPONENT PROMPTS"
    - "Hero headline block. Centered on Parchment (#fffdf9) page background. Eyebrow pill: Campfire Orange (#ff6b1a) fill, white 'NEW' text, 9999px radius, 8px 16px padding. Headline: 58px Inter weight 600 in Midnight Ink (#171717), letter-spacing -1.8px, line-height 1.00, two lines max. Subtitle: 18px Inter weight 400 in Slate (#737373), centered, max-width 640px."
    - "Feature section with App Preview Frame. Centered 29px Inter weight 600 heading in Midnight Ink with -0.52px letter-spacing. Below: a 1200px max-width white card, 12px radius, 16px padding, wrapping a product screenshot. Soft 5%-black shadow stack applied: 0 3px 6px -3px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05)."
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "Pill notification banner. Inline element, 9999px radius, 8px 16px padding, Campfire Orange (#ff6b1a) fill, 13px Inter weight 500 white text. Leading 'NEW' label as a smaller 2-tone orange dot or chip inside the pill. Optional trailing close icon at 12px."
    - "Feed post row. White card surface, 12px radius, 16px padding, 1px Linen border. Left: 24px avatar (9999px, solid color or photo). Center column: author name 14px Inter weight 600 Midnight Ink, body text 14px Inter weight 400 Midnight Ink. Right: Sunlit Cream (#fef3c7) tag pill — 9999px radius, 4px 10px padding, 12px Inter weight 500 Ember Brown (#451a03) text — plus timestamp in Ash Gray (#a3a3a3)."

  similar_brands:

    - "**Notion** — Same warm cream canvas with near-black Inter typography and rationed color use; both treat white cards as paper floating on a slightly warm page"
    - "**Basecamp** — Team-communication product with a similar warm, editorial tone; flat surfaces, compact list rows, and pill-shaped controls over a muted background"
    - "**Linear** — Inter-only typography system with tight letter-spacing on display sizes and a compact, list-driven UI rhythm"
    - "**Coda** — Collaborative workspace that pairs warm off-white surfaces with single-accent brand moments and pill-shaped chips"
    - "**Read.cv** — Editorial product voice with cream backgrounds, Inter typography, and orange as the singular brand color reserved for punctuation moments"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-campfire-orange: #ff6b1a;
          --color-ember-brown: #451a03;
          --color-sunlit-cream: #fef3c7;
          --color-forest-pulse: #22c55e;
          --color-ember-alert: #ef4444;
          --color-midnight-ink: #171717;
          --color-paper-white: #ffffff;
          --color-parchment: #fffdf9;
          --color-fog-gray: #f5f5f5;
          --color-linen: #f0f0f0;
          --color-ash-gray: #a3a3a3;
          --color-slate: #737373;
          --color-graphite: #525252;
          --color-stone: #8f7668;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.3px;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.37px;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* 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-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 16-24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8-12px;
          --radius-pills: 9999px;
          --radius-inputs: 8px;
          --radius-avatars: 9999px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #fffdf9;
          --surface-paper-white: #ffffff;
          --surface-fog-gray: #f5f5f5;
          --surface-sunlit-cream: #fef3c7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-campfire-orange: #ff6b1a;
          --color-ember-brown: #451a03;
          --color-sunlit-cream: #fef3c7;
          --color-forest-pulse: #22c55e;
          --color-ember-alert: #ef4444;
          --color-midnight-ink: #171717;
          --color-paper-white: #ffffff;
          --color-parchment: #fffdf9;
          --color-fog-gray: #f5f5f5;
          --color-linen: #f0f0f0;
          --color-ash-gray: #a3a3a3;
          --color-slate: #737373;
          --color-graphite: #525252;
          --color-stone: #8f7668;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.3px;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.37px;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* 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-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }