paper___style_reference:
  info: "> warm paper notebook under studio lights"

  theme: "light"

  paper_uses_a_warm_paper_studio_language: "a cream ivory canvas instead of white, calm monochrome typography in a custom display face, and a single cool blue accent that does almost no UI work. The two-tone headline (dark first line, mid-gray continuation) is the signature move — it treats the hero copy as a composition of weights rather than a single block. Surfaces sit flat on the page with one barely-there card shadow, borders are hairline, and the product feels like a printed notebook page under cool studio light. Most of the chromatic energy lives inside the product screenshot; the marketing surface around it stays restrained, near-achromatic, and grid-quiet."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bone Canvas | `#efefe4` | `--color-bone-canvas` | Page background — warm cream instead of white, the signature surface that makes the whole site feel like a notebook page |"
    info: "| Paper White | `#fcfcf9` | `--color-paper-white` | Primary page canvas and white card surfaces. Do not promote it to the primary CTA color |"
    info: "| Bright Card | `#ffffff` | `--color-bright-card` | Pure white card surface for highest elevation, code panels, product chrome |"
    info: "| Mist | `#f3f3f4` | `--color-mist` | Subtle alternate band background, soft dividers in long pages |"
    info: "| Ash Gray | `#e3e3e3` | `--color-ash-gray` | Card backgrounds in denser sections, soft grouping surface |"
    info: "| Stone | `#d7d7d6` | `--color-stone` | Hairline borders, card outlines, surface separators |"
    info: "| Smoke | `#c1c1c0` | `--color-smoke` | Secondary borders, diagram strokes, muted dividers |"
    info: "| Pewter | `#a8a8a8` | `--color-pewter` | Icon strokes, low-priority borders, decorative vector fills |"
    info: "| Graphite | `#909090` | `--color-graphite` | Secondary body text, the lighter half of the two-tone headline, heading accents |"
    info: "| Slate | `#83837e` | `--color-slate` | Subdued heading and link text, warm-gray captions |"
    info: "| Iron | `#666666` | `--color-iron` | Helper text, metadata, tertiary copy |"
    info: "| Lava | `#434341` | `--color-lava` | Near-black emphasis text, slightly softer than full ink for long reads |"
    info: "| Carbon | `#222222` | `--color-carbon` | Near-black used in nav chrome and high-contrast text |"
    info: "| Ink | `#181818` | `--color-ink` | Primary text, nav active state, filled button background — neutral dark, not chromatic |"
    info: "| Studio Blue | `#5d8cd7` | `--color-studio-blue` | Brand icon mark, decorative vector accent — cool blue against warm cream is the only chromatic tension in the marketing surface |"
    info: "| Wash Blue | `#81adec` | `--color-wash-blue` | Lighter blue used for soft body accents and nav underlines |"

  tokens___typography:

    matter___display_and_headline_face___custom__wide_stance__unusual_light_to_medium_weights_360_is_whisper_thin__carries_the_hero__the_two_tone_headline_split__and_large_pull_quotes__tight_tracking_on_display__0_0200em_at_64px_gives_the_type_a_composed__editorial_feel____font_matter:
      - "**Substitute:** Söhne, Inter Tight, or a humanist geometric like Manrope"
      - "**Weights:** 360, 400, 480, 500, 550"
      - "**Sizes:** 14px, 18px, 48px, 64px"
      - "**Line height:** 1.00, 1.56, 2.00"
      - "**Letter spacing:** -1.28px at 64px, -0.96px at 48px, -0.28px at 14px"
      - "**OpenType features:** `\"calt\" on, \"ss01\" on`"
      - "**Role:** Display and headline face — custom, wide stance, unusual light-to-medium weights (360 is whisper-thin). Carries the hero, the two-tone headline split, and large pull quotes. Tight tracking on display (-0.0200em at 64px) gives the type a composed, editorial feel"

    inter___ui_and_body_face___captions__button_labels__nav__metadata__product_chrome__tight_negative_tracking_on_small_sizes__0_0100em_at_12_14px_keeps_dense_ui_legible____font_inter:
      - "**Substitute:** Inter (native), or system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 36px"
      - "**Line height:** 1.20, 1.40, 1.50, 1.56, 1.75, 2.00"
      - "**Letter spacing:** -0.30px at 12px, -0.14px at 14px, -0.16px at 16px, -0.18px at 18px, 0.10px at 24px"
      - "**OpenType features:** `\"calt\" on`"
      - "**Role:** UI and body face — captions, button labels, nav, metadata, product chrome. Tight negative tracking on small sizes (-0.0100em at 12–14px) keeps dense UI legible"

    paper_mono___code__file_paths__version_labels__tiny_metadata__loose_positive_tracking__0_0150em_to__0_0160em_at_small_sizes_gives_the_mono_a_calm__terminal_like_cadence____font_paper_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 12px"
      - "**Line height:** 1.33, 2.55"
      - "**Letter spacing:** 0.17px at 11px, 0.19px at 12px"
      - "**OpenType features:** `\"calt\" on`"
      - "**Role:** Code, file paths, version labels, tiny metadata. Loose positive tracking (+0.0150em to +0.0160em) at small sizes gives the mono a calm, terminal-like cadence"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.33 | 0.17px | `--text-caption` |"
      info: "| body | 14px | 1.56 | -0.14px | `--text-body` |"
      info: "| body-lg | 18px | 1.75 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.3 | 0.1px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.2 | -0.36px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.14 | -0.96px | `--text-heading` |"
      info: "| display | 64px | 1 | -1.28px | `--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: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 172 | 172px | `--spacing-172` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| buttons | 4px |"
      info: "| heroPanels | 20px |"
      info: "| largeCards | 12px |"
      info: "| imageFrames | 24px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12)...` | `--shadow-md` |"
      info: "| sm | `rgba(0, 0, 0, 0.08) 0px 8px 8px -4px, rgba(0, 0, 0, 0.08)...` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8px"

  components:

    filled_dark_button:
      role: "Primary action — the only filled button in the system"

181818_background__fcfcf9_text__4px_radius__6px_14px_padding__inter_14px_weight_500__no_border__used_for__download_paper__and_equivalent_primary_ctas__lowercase_label__no_trailing_arrow:

    ghost_link_button:
      role: "Secondary action — paired with the filled button"

      info: "Transparent background, #181818 text, no border, Inter 14px weight 500, trailing arrow glyph (→) at 6px gap. Used for 'open Paper in the browser →' and other soft CTAs."

    nav_link:
      role: "Top-bar navigation item"

      info: "Inter 14px weight 400, #181818 text, 8px horizontal padding, no underline. 'downloads' is set in weight 500 as the active endpoint. Right-aligned cluster: 'sign up' in weight 400, 'downloads →' in weight 500."

    brand_wordmark:
      role: "Site logo"

      info: "Word 'Paper' in Inter 16px weight 600, #181818, preceded by a 14×14 #5d8cd7 rounded-square mark. The blue mark is the only saturated color in the header."

    two_tone_headline:
      role: "Hero and section heading"

      info: "Matter weight 400 at 64px / 48px, split across two visual weights: first line in #181818, continuation lines in #83837 at the same size. Tracking -1.28px at 64px, -0.96px at 48px. Line height 1.00–1.14 — the lines stack tight, almost overlapping, for a composed editorial feel."

    eyebrow_label:
      role: "Section pre-title, status marker"

      info: "Inter 12px weight 500, #909090, often lowercase ('used in production by designers at', 'open alpha'). Optional 8px gap to the heading below."

    lead_paragraph:
      role: "Body copy under hero and section headlines"

      info: "Matter 18px weight 400, #666666, line-height 1.75, max-width ~56ch. No drop-cap, no bold inline emphasis — the tone is calm and expository."

    product_screenshot_card:
      role: "Hero visual and feature showcase"

      info: "White (#fcfcf9) surface, 8px radius, 32px padding around the app chrome, elevated with the three-layer card shadow. Contains traffic-light dots top-left, a sidebar of file names, and a right-side properties panel — all rendered as flat product UI inside the card."

    logo_cloud:
      role: "Social proof band"

      info: "Single row or two-row grid of customer logos, Pewter (#83837e) monochrome, 40–48px tall, 32–40px gap, centered. No dividers, no card wrapping. Eyebrow 'used in production by designers at' centered above."

    code_block_claude_code_panel:
      role: "Developer-facing feature illustration"

      info: "Rounded panel with 8px radius, 12–24px padding, #fcfcf9 background, hairline #d7d7d6 border. Body in Paper Mono 11–12px weight 400. File paths and code keywords colored with brand blue (#5d8cd7), comment lines in #909090. No syntax-highlight rainbow — palette stays near-monochrome."

    ghost_card:
      role: "Marketing card without shadow"

fcfcf9_background__1px_d7d7d6_border__8px_radius__24_32px_padding__used_when_the_product_card_would_feel_too_heavy___text_only_groupings__plan_summaries__simple_feature_blocks:

    geometric_pattern_overlay:
      role: "Decorative page-edge treatment"

      info: "Subtle thin-line isometric grid in #d7d7d6, drawn at ~20% opacity, anchored to the upper-right corner of the hero and select sections. Never full-bleed, always clipped to a triangular wedge. Provides spatial depth without adding color."

  do_s_and_don_ts:

    do:
      - "Use #181818 as the only filled-button background — never introduce a chromatic CTA color"
      - "Split headlines into two visual weights: first line in Ink (#181818), continuation in Slate (#83837e), both at the same Matter display size"
      - "Set the page background to Bone Canvas (#efefe4); reserve #ffffff for elevated cards and product chrome only"
      - "Use 4px radius for buttons and tags, 8px for cards, 12–24px for product frames — never mix these scales on the same surface"
      - "Keep the body in Matter 18px weight 400 at #666666 with 1.75 line-height for editorial calm"
      - "Use the three-layer card shadow only on product screenshots and floating tool panels — marketing cards stay flat with hairline borders"
      - "Limit blue (#5d8cd7) to the brand mark, decorative vectors, and code accents — never as a button fill or large text color"

    don_t:
      - "Don't add a chromatic accent for CTAs, links, or active states — the action language is neutral dark, period"
      - "Don't use white (#ffffff) as the page background; the cream canvas is the signature and replacing it kills the look"
      - "Don't bold inline keywords inside body copy — the tone is uniform, not emphatic"
      - "Don't apply the card shadow to headings, logos, or icon rows — it belongs only to the product screenshot and floating panels"
      - "Don't set the two-tone headline in two different sizes or two different fonts; the effect comes from identical Matter metrics with different fill colors"
      - "Don't use saturated semantic colors (red/green/yellow) for status — if needed, use Pewter or Iron instead"
      - "Don't add gradients — the system is flat, warm, and achromatic, with the product screenshot providing the only visual richness"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Bone Canvas | `#efefe4` | Page background — warm cream, the signature base |"
    info: "| 1 | Paper White | `#fcfcf9` | Card and panel surfaces floating on the canvas |"
    info: "| 2 | Bright Card | `#ffffff` | Pure white elevation for product chrome and code panels |"
    info: "| 3 | Mist | `#f3f3f4` | Alternate band and inset surface |"

  elevation:

    - "**Product card, elevated panel:** `rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 0px 4px -1px`"
    - "**Popover, floating tool palette:** `rgba(0, 0, 0, 0.08) 0px 8px 8px -4px, rgba(0, 0, 0, 0.08) 0px 2px 4px -2px, rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`"

  imagery:

    info: "Almost no marketing photography. The single hero visual is a product screenshot of the Paper app itself, presented inside a white card with the three-layer shadow. Customer logos appear as flat monochrome wordmarks in a centered cloud. A faint isometric line grid in #d7d7d6 sits in the upper-right corner of the hero and repeats on select sections, providing spatial depth without color. Iconography (in the product UI) is line-based at ~1.5px stroke, monochrome, using Pewter and Iron."

  layout:

    info: "Centered max-width container at 1200px with comfortable side gutters on a full-bleed Bone Canvas. The hero is a left-aligned text block (eyebrow → two-tone headline → lead → button pair) with the product screenshot card centered below, slightly wider than the text column. Subsequent sections are centered single-column with eyebrow + two-tone heading + lead + content block, separated by 96px vertical gaps. Logo cloud sits as a centered band between hero and the first product section. The page uses a consistent rhythm: eyebrow → headline → lead → visual or content, never asymmetric or magazine-style. Navigation is a flat top bar with left-aligned logo and right-aligned CTA cluster; no sticky shadow, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "page background: #efefe4 (Bone Canvas)"
    - "card surface: #fcfcf9 (Paper White) or #ffffff (Bright Card)"
    - "text primary: #181818 (Ink)"
    - "text secondary: #83837e (Slate) or #666666 (Iron)"
    - "border / hairline: #d7d7d6 (Stone)"
    - "brand accent: #5d8cd7 (Studio Blue) — icons and code only, never buttons"
    - "primary action: #181818 (filled action)"

    3_example_component_prompts:

    - "*Hero section on Bone Canvas (#efefe4).* Two-tone headline: first line 'design incredible' in Matter weight 400 at 64px, color #181818, letter-spacing -1.28px; second line 'the connected canvas for teams shipping with agents' in same Matter 64px weight 400, color #83837e, line-height 1.0. Lead paragraph: Matter 18px weight 400, #666666, line-height 1.75, max-width 56ch. Button row: filled 'download Paper' — #181818 background, #fcfcf9 text, Inter 14px weight 500, 4px radius, 6px 14px padding. Ghost 'open Paper in the browser →' — transparent, #181818 text, Inter 14px weight 500, trailing arrow."

    - "*Product screenshot card.* White #fcfcf9 surface, 8px radius, 32px padding around the app chrome, elevated with the three-layer card shadow (rgba(0,0,0,0.12) 0 4px 10px, 0 2px 4px -1px, 0 0px 4px -1px). Traffic-light dots top-left in #c1c1c0, sidebar in #909090, main canvas white. Right panel uses #f3f3f4 inputs with 4px radius."

    - "*Logo cloud band.* Centered eyebrow 'used in production by designers at' in Inter 12px weight 500, #909090. Below, a centered grid of customer wordmarks in #83837e, 40px tall, 40px gap, single row or 2-row wrap. No card wrapper, no dividers, no per-logo backgrounds."

  two_tone_headline_system:

    info: "The headline is a two-line composition at the same Matter size: line 1 in #181818 weight 400, line 2 in #83837e weight 400, both at 64px (display) or 48px (heading). Tracking tightens with size (-1.28px at 64px, -0.96px at 48px). Line-height 1.0–1.14 makes the lines almost touch. Never bold, never italic, never a different font. This is the single most recognizable type move in the system."

  surface_and_border_language:

    three_layers_stack: "Bone Canvas (#efefe4) for the page, Paper White (#fcfcf9) for cards, Bright Card (#ffffff) for the highest-elevation product chrome. Hairline #d7d7d6 borders replace shadows on every marketing surface; the three-layer shadow is reserved for the product screenshot and one or two floating panels. Stone (#d7d7d6) and Smoke (#c1c1c0) are the only two border colors; never use a chromatic stroke."

  similar_brands:

    - "**Linear** — Same cream-tinted neutral palette, hairline borders, and a single dark filled button as the only CTA weight"
    - "**Vercel** — Compact density, tight display tracking, and a marketing surface that stays achromatic while the product UI carries the color"
    - "**Figma** — Design-tool hero with a large product screenshot card centered below a left-aligned text block on a soft neutral canvas"
    - "**Pitch** — Editorial two-tone headlines mixing dark and mid-gray at the same size, calm sans-serif body, product-first composition"
    - "**Notion** — Warm near-white page background instead of pure white, hairline-bordered ghost cards, monochrome iconography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-canvas: #efefe4;
          --color-paper-white: #fcfcf9;
          --color-bright-card: #ffffff;
          --color-mist: #f3f3f4;
          --color-ash-gray: #e3e3e3;
          --color-stone: #d7d7d6;
          --color-smoke: #c1c1c0;
          --color-pewter: #a8a8a8;
          --color-graphite: #909090;
          --color-slate: #83837e;
          --color-iron: #666666;
          --color-lava: #434341;
          --color-carbon: #222222;
          --color-ink: #181818;
          --color-studio-blue: #5d8cd7;
          --color-wash-blue: #81adec;
        
          /* Typography — Font Families */
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-paper-mono: 'Paper Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --tracking-caption: 0.17px;
          --text-body: 14px;
          --leading-body: 1.56;
          --tracking-body: -0.14px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.75;
          --tracking-body-lg: -0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.1px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.36px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -0.96px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -1.28px;
        
          /* Typography — Weights */
          --font-weight-w360: 360;
          --font-weight-regular: 400;
          --font-weight-w480: 480;
          --font-weight-medium: 500;
          --font-weight-w550: 550;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-172: 172px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 32px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-buttons: 4px;
          --radius-heropanels: 20px;
          --radius-largecards: 12px;
          --radius-imageframes: 24px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 0px 4px -1px;
          --shadow-sm: rgba(0, 0, 0, 0.08) 0px 8px 8px -4px, rgba(0, 0, 0, 0.08) 0px 2px 4px -2px, rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-bone-canvas: #efefe4;
          --surface-paper-white: #fcfcf9;
          --surface-bright-card: #ffffff;
          --surface-mist: #f3f3f4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-canvas: #efefe4;
          --color-paper-white: #fcfcf9;
          --color-bright-card: #ffffff;
          --color-mist: #f3f3f4;
          --color-ash-gray: #e3e3e3;
          --color-stone: #d7d7d6;
          --color-smoke: #c1c1c0;
          --color-pewter: #a8a8a8;
          --color-graphite: #909090;
          --color-slate: #83837e;
          --color-iron: #666666;
          --color-lava: #434341;
          --color-carbon: #222222;
          --color-ink: #181818;
          --color-studio-blue: #5d8cd7;
          --color-wash-blue: #81adec;
        
          /* Typography */
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-paper-mono: 'Paper Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.33;
          --tracking-caption: 0.17px;
          --text-body: 14px;
          --leading-body: 1.56;
          --tracking-body: -0.14px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.75;
          --tracking-body-lg: -0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.1px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.36px;
          --text-heading: 48px;
          --leading-heading: 1.14;
          --tracking-heading: -0.96px;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -1.28px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-172: 172px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 0px 4px -1px;
          --shadow-sm: rgba(0, 0, 0, 0.08) 0px 8px 8px -4px, rgba(0, 0, 0, 0.08) 0px 2px 4px -2px, rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        }