visitors___style_reference:
  info: "> frosted glass observatory at dawn — a periwinkle beacon rises over a white marble dashboard."

  theme: "light"

  info: "Visitors is a light, violet-accented analytics product that reads like a glass-walled observatory: bright white canvas, hairline borders, pill-shaped navigation, and one confident periwinkle action color that makes every interactive surface feel switched on. Typography stays in a single humanist sans (OpenRunde) with aggressively tightened tracking at every size, so headlines feel architectural rather than airy. Components are flat and compact — borders do the work that shadows usually would, corners are soft (8–24px), and gradient washes (blue-to-violet) appear only as atmospheric backgrounds behind floating product previews. Color is used sparingly and semantically: violet for primary action, green/yellow/pink/blue for data and icon variety, and near-black (#181925) for all meaningful text."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Periwinkle Beam | `linear-gradient(to right in oklab, rgb(44, 120, 252) 0%, rgb(145, 141, 246) 100%)` | `--color-periwinkle-beam` | Primary action background, active nav fills, brand icon strokes, decorative icon accents — the single chromatic action color across the system; Atmospheric section background transitioning from cobalt blue to periwinkle |"
    info: "| Iris Dusk | `#9580ff` | `--color-iris-dusk` | Secondary violet variant for hover states and secondary action surfaces |"
    info: "| Lavender Mist | `#dad9fc` | `--color-lavender-mist` | Soft tint for gentle background washes, subtle borders, and muted violet surfaces |"
    info: "| Midnight Ink | `#181925` | `--color-midnight-ink` | Primary text, heading color, dark surface fill, high-contrast borders — the near-black that carries the entire information hierarchy |"
    info: "| Graphite Veil | `#666666` | `--color-graphite-veil` | Hairline borders, icon strokes, muted dividers, secondary text — the dominant neutral border color |"
    info: "| Ash | `#999999` | `--color-ash` | Tertiary text, inactive icon strokes, subtle UI lines |"
    info: "| Fog | `#bbbcc3` | `--color-fog` | Light borders, inactive nav elements, low-emphasis dividers |"
    info: "| Bone | `#e8e8e8` | `--color-bone` | Table dividers, table fills, very subtle separators |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, button text on dark fills, surface backgrounds |"
    info: "| Mint Whisper | `#def6e4` | `--color-mint-whisper` | Soft section background, alternate surface, and quiet card fill |"
    info: "| Signal Green | `#33c758` | `--color-signal-green` | Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |"
    info: "| Amber Spark | `#ffa600` | `--color-amber-spark` | Yellow decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Cobalt Pulse | `#2c78fc` | `--color-cobalt-pulse` | Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color |"
    info: "| Magenta Pop | `#d6409f` | `--color-magenta-pop` | Red decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Ember | `#ff3e00` | `--color-ember` | Sparse accent for SVG illustrations and highlight decorations |"
    info: "| Chart Blue | `linear-gradient(to right in oklab, rgb(190, 213, 254) 0%, rgb(235, 242, 255) 50%, rgb(145, 141, 246) 100%)` | `--color-chart-blue` | Data sparkline gradient endpoint — light blue to cyan to periwinkle in dashboard previews |"

  tokens___typography:

    openrunde___single_family_type_system_for_all_ui__body__headings__and_navigation__heavily_tightened_tracking_at_all_sizes____0_05em_at_12px___0_025em_at_24px___0_05em_at_60px___gives_the_type_a_condensed__architectural_density_unusual_for_a_product_analytics_brand_____font_openrunde:
      - "**Substitute:** Inter, Geist, or Satoshi"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 36px, 48px, 60px"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** -0.05em at 12px, -0.027em at 13–14px, -0.025em at 16px, -0.023em at 18px, -0.02em at 20px, -0.018em at 24px, -0.016em at 36px, -0.013em at 48px, -0.05em at 60px"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Single-family type system for all UI, body, headings, and navigation. Heavily tightened tracking at all sizes — -0.05em at 12px, -0.025em at 24px, -0.05em at 60px — gives the type a condensed, architectural density unusual for a product analytics brand."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.6px | `--text-caption` |"
      info: "| body | 14px | 1.5 | -0.38px | `--text-body` |"
      info: "| body-lg | 16px | 1.56 | -0.4px | `--text-body-lg` |"
      info: "| subheading | 18px | 1.33 | -0.41px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | -0.4px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.4 | -0.43px | `--text-heading` |"
      info: "| heading-lg | 36px | 1.17 | -0.58px | `--text-heading-lg` |"
      info: "| heading-xl | 48px | 1.13 | -0.62px | `--text-heading-xl` |"
      info: "| display | 60px | 1 | -0.55px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| badges | 9999px |"
      info: "| images | 8px |"
      info: "| tables | 24px |"
      info: "| buttons | 8px |"
      info: "| navPill | 9999px |"

    shadows:

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

    layout:

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

  components:

    floating_pill_navigation:
      role: "Sticky top navigation"

      info: "Pill-shaped container, 9999px radius, dark fill (#181925), white text, 12px vertical / 16px horizontal padding, logo + 5 nav links + Login text + periwinkle (#918df6) Register button. Sits centered on canvas, not full-width. Box shadow: rgba(0,0,0,0.08) 0 1px 1px 1px, rgba(0,0,0,0.06) 0 0 0 0.5px."

    primary_cta_button:
      role: "Filled action button"

      info: "Background #918df6, white text, 8px radius, 12px 24px padding, OpenRunde 14px/500, letter-spacing -0.025em. Subtle dual-layer shadow: rgba(0,0,0,0.08) 0 1px 1px 0, rgba(0,0,0,0.05) 0 0 0 1px."

    ghost_text_link:
      role: "Secondary action"

      info: "No background, text #181925, OpenRunde 14px/500, 8px padding vertical, often paired with primary CTA inline."

    new_badge:
      role: "Feature flag indicator"

      info: "Pill shape (9999px), light periwinkle background (#dad9fc), periwinkle text (#918df6), 10px 14px padding, 12px/600 weight, uppercase tracking."

    hero_headline:
      role: "Landing hero title"

      info: "60px/700 OpenRunde, #181925, letter-spacing -0.05em, line-height 1.0. Tight and architectural rather than airy — the negative tracking pulls letters together into near-condensed feel."

    dashboard_preview_card:
      role: "Floating product screenshot"

      info: "White card, 16px radius, sitting on a blue-to-violet gradient (#bed5fe → #918df6) atmospheric band. Contains tab bar (pill), metric tiles, sparkline chart, and revenue counter. Shadow: rgba(0,0,0,0.06) 0 1px 3px, rgba(0,0,0,0.06) 0 8px 16px, rgba(0,0,0,0.02) 0 0 0 1px."

    tab_navigation_pill:
      role: "In-product view switcher"

      info: "Horizontal pill container, 9999px radius, white background, hairline #e8e8e8 border. Active tab: periwinkle (#918df6) text on white. Inactive: #999999 text. OpenRunde 13px/500, 8px 16px padding per tab."

    metric_stat_card:
      role: "KPI display"

      info: "No background fill, 20px label (#999999) over 36px value (#181925), small +/- delta in Signal Green (#33c758) or Amber Spark (#ffa600). OpenRunde, tight letter-spacing."

    feature_card_3_column_grid:
      role: "Value proposition block"

      info: "Centered text block, 20px bold label (#181925) over 16px description (#666666). Periwinkle line icon (#918df6, ~24px) sits above. No card background — type and icon only, separated by generous 24px gaps. 3-column grid on desktop."

    partner_logo_cloud:
      role: "Social proof strip"

      info: "Horizontal row of 6 monochrome partner logos in #999999, evenly spaced, centered. No headings, no dividers — just a quiet band of marks."

    experience_score_ring:
      role: "In-dashboard data visualization"

      info: "Circular progress indicator, 100 score, Signal Green (#33c758) stroke ring. Paired with 36px/600 score number and 12px helper text."

    data_sparkline:
      role: "Trend chart"

      info: "Line chart with Periwinkle (#918df6) or Cobalt Pulse (#2c78fc) stroke, green (#33c758) data dots, hairline grid. White card background, 8px radius."

    revenue_counter:
      role: "Highlight metric"

      info: "36px/700 OpenRunde, Midnight Ink (#181925), prefixed currency symbol. Paired with small green up-arrow and percentage delta in Signal Green."

  do_s_and_don_ts:

    do:
      - "Use #918df6 as the single filled chromatic action background — never introduce a second filled button color."
      - "Apply OpenRunde with its native negative letter-spacing at every size; do not override to normal tracking."
      - "Set border-radius to 8px for buttons and images, 16px for cards, 24px for larger surfaces and tables — respect the radius hierarchy."
      - "Use hairline #666666 borders at 1px instead of shadows to create separation between surfaces."
      - "Pair the Floating Pill Navigation style (dark pill, periwinkle Register) as the consistent site header pattern."
      - "Use the blue-to-violet gradient (#2c78fc → #918df6) only as atmospheric backgrounds behind floating product mockups, never as UI fills."
      - "Keep type contrast high: #181925 on #ffffff at all sizes, and use #999999 only for truly de-emphasized text."

    don_t:
      - "Do not add heavy drop shadows — the system uses 1px hairline borders and near-imperceptible shadow layers (0.04–0.08 opacity)."
      - "Do not use multiple accent colors as fills — Signal Green, Amber Spark, Cobalt Pulse, and Magenta Pop are chart/illustration accents, not UI fills."
      - "Do not round all corners uniformly — the 8/16/24px radius hierarchy is a signature; mixing in 4px or fully rounded cards breaks the system."
      - "Do not use #000000 for body text — #181925 carries a subtle cool cast that differentiates it from pure black."
      - "Do not set headlines in light weights — the system uses 600–700 for all headings, leaning on negative tracking rather than weight to control density."
      - "Do not fill large areas with #dad9fc — it is a soft tint, not a surface color; reserve it for badges and micro-backgrounds."
      - "Do not use gradient text or gradient borders — gradients are strictly atmospheric, confined to background washes."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, dominant surface |"
    info: "| 1 | Card | `#ffffff` | Product preview, dashboard mockup, feature cards |"
    info: "| 2 | Atmospheric Wash | `#918df6` | Blue-to-violet gradient bands behind product mockups |"
    info: "| 3 | Highlight Tint | `#def6e4` | Soft green panels for status or highlight content |"

  elevation:

    - "**Primary Button:** `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`"
    - "**Dashboard Preview Card:** `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px`"
    - "**Floating Navigation:** `rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px`"

  imagery:

    info: "Minimal, product-centric visual language. No lifestyle photography or full-bleed editorial images. The dominant visual is the floating Dashboard Preview Card — a UI mockup with real-looking chart data, metric tiles, and a revenue counter, set against an atmospheric blue-to-violet gradient wash. Iconography is line-style in a single periwinkle stroke (#918df6), ~24px, used as feature markers above text blocks. Partner logos appear as monochrome marks in #999999 in a quiet horizontal cloud. The only other graphic element is the small colored dot/avatar indicators inside the dashboard preview (green, orange, blue, pink) that match the chart data palette. Overall: the product UI IS the hero — the page sells the product by showing it working, not by showing people using it."

  layout:

    info: "Centered, max-width contained layout (~1200px). The top is a floating pill-shaped navigation bar centered on the canvas, not full-bleed. Hero is a centered text stack: small NEW badge → 60px display headline → 16px subtitle → inline primary CTA + ghost link. Below the hero, a quiet partner logo cloud (no heading, no borders). A full-width atmospheric gradient band (blue-to-violet) then holds a floating Dashboard Preview Card that extends beyond its parent with a large 16px radius. Feature blocks alternate in 3-column grids with centered icon + label + description patterns. Sections are separated by 80px vertical gaps with no visible dividers — whitespace carries the rhythm. Navigation pattern: floating pill nav, not sticky sidebar or top bar."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #181925"
    - "background: #ffffff"
    - "border: #666666"
    - "accent: #918df6 (Periwinkle Beam)"
    - "chart data: #33c758 (Signal Green), #ffa600 (Amber Spark), #2c78fc (Cobalt Pulse), #d6409f (Magenta Pop)"
    - "primary action: #918df6 (filled action)"

    example_component_prompts:

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

    - "Create a floating navigation bar: pill shape (9999px radius), #181925 background, 12px 16px padding, white text links (14px/500 OpenRunde), periwinkle (#918df6) filled Register button on the right with white text and 8px radius. Shadow: rgba(0,0,0,0.08) 0 1px 1px 1px, rgba(0,0,0,0.06) 0 0 0 0.5px. Centered, max-width 720px."

    - "Create a metric stat card: white background, no border. Label at 12px/500 OpenRunde in #999999, letter-spacing -0.025em. Value at 36px/700 OpenRunde in #181925, letter-spacing -0.016em. Delta indicator: small green (#33c758) up-arrow with 13px/500 text."

    - "Create a dashboard preview card: white background, 16px radius, 24px padding. Contains a pill-shaped tab bar (5 tabs, 9999px radius, white background, #e8e8e8 border, active tab in #918df6 text). Below: a sparkline chart with #918df6 stroke line, #33c758 data dots, hairline #e8e8e8 grid. Shadow: rgba(0,0,0,0.06) 0 1px 3px, rgba(0,0,0,0.06) 0 8px 16px, rgba(0,0,0,0.02) 0 0 0 1px."

    - "Create a 3-column feature grid: 3 equal columns with 24px gaps. Each cell: centered periwinkle line icon (#918df6, 24px, 1.5px stroke) at top, 20px/600 OpenRunde label in #181925, 16px/400 description in #666666. No card backgrounds, no borders."

  atmospheric_gradient_system:

    info: "Gradients are reserved exclusively for atmospheric background washes that sit behind floating product mockups. Two approved gradients: (1) the Dawn Gradient — linear oklab from #2c78fc to #918df6, used as a full-bleed band behind the main Dashboard Preview Card; (2) chart-area gradients on the sparkline and progress visualizations within the dashboard — light blue (#bed5fe) through near-white (#ebf2ff) to periwinkle (#918df6). Gradients never appear on buttons, cards, text, icons, or borders. They are stage lighting, not decoration."

  similar_brands:

    - "**Plausible Analytics** — Same light-canvas analytics product language with a single bold accent color and compact dashboard mockups as hero imagery"
    - "**Fathom Analytics** — Similar minimal landing page structure with centered headline, floating nav, and product preview floating over a soft gradient band"
    - "**Cal.com** — Same pill-shaped floating navigation and tight-tracking custom sans typography, with a single vivid accent against white"
    - "**Dub.co** — Matching dark-pill nav, periwinkle/violet accent, and the pattern of a dashboard mockup centered on an atmospheric gradient background"
    - "**Vercel** — Similar restrained palette with one chromatic action color, gradient hero washes, and condensed geometric type with negative tracking"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-periwinkle-beam: #918df6;
          --gradient-periwinkle-beam: linear-gradient(to right in oklab, rgb(44, 120, 252) 0%, rgb(145, 141, 246) 100%);
          --color-iris-dusk: #9580ff;
          --color-lavender-mist: #dad9fc;
          --color-midnight-ink: #181925;
          --color-graphite-veil: #666666;
          --color-ash: #999999;
          --color-fog: #bbbcc3;
          --color-bone: #e8e8e8;
          --color-paper: #ffffff;
          --color-mint-whisper: #def6e4;
          --color-signal-green: #33c758;
          --color-amber-spark: #ffa600;
          --color-cobalt-pulse: #2c78fc;
          --color-magenta-pop: #d6409f;
          --color-ember: #ff3e00;
          --color-chart-blue: #bed5fe;
          --gradient-chart-blue: linear-gradient(to right in oklab, rgb(190, 213, 254) 0%, rgb(235, 242, 255) 50%, rgb(145, 141, 246) 100%);
        
          /* Typography — Font Families */
          --font-openrunde: 'OpenRunde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.6px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.38px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.41px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 1.4;
          --tracking-heading: -0.43px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.58px;
          --text-heading-xl: 48px;
          --leading-heading-xl: 1.13;
          --tracking-heading-xl: -0.62px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -0.55px;
        
          /* 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-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 9999px;
          --radius-images: 8px;
          --radius-tables: 24px;
          --radius-buttons: 8px;
          --radius-navpill: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
          --surface-atmospheric-wash: #918df6;
          --surface-highlight-tint: #def6e4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-periwinkle-beam: #918df6;
          --color-iris-dusk: #9580ff;
          --color-lavender-mist: #dad9fc;
          --color-midnight-ink: #181925;
          --color-graphite-veil: #666666;
          --color-ash: #999999;
          --color-fog: #bbbcc3;
          --color-bone: #e8e8e8;
          --color-paper: #ffffff;
          --color-mint-whisper: #def6e4;
          --color-signal-green: #33c758;
          --color-amber-spark: #ffa600;
          --color-cobalt-pulse: #2c78fc;
          --color-magenta-pop: #d6409f;
          --color-ember: #ff3e00;
          --color-chart-blue: #bed5fe;
        
          /* Typography */
          --font-openrunde: 'OpenRunde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.6px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.38px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.41px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 1.4;
          --tracking-heading: -0.43px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.58px;
          --text-heading-xl: 48px;
          --leading-heading-xl: 1.13;
          --tracking-heading-xl: -0.62px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -0.55px;
        
          /* 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;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
        }