obscura___style_reference:
  info: "> 8-bit arcade floating on cloud paper"

  theme: "light"

  info: "Obscura runs on a playful 8-bit arcade vocabulary pressed onto a soft, sky-toned paper canvas. The display type (Jersey 10) is the visual signature: chunky pixel letterforms that read like Game Boy subtitles, paired with the calm, modern geometry of Manrope for everything that needs to be read. A single vivid orange (#ff5e24) does the loud work — CTA fills, link hovers, hero emphasis, card borders — while the rest of the system stays in cream, sky-blue, and graphite. Surfaces float on a pale #e3f1fe cloud with hairline borders and whisper-soft shadows; the page feels like a pixel-art console wallpaper you actually want to live inside. The mood is privacy-as-playfulness, not privacy-as-fortress."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Orange | `#ff5e24` | `--color-signal-orange` | Primary CTA fill, hero headline emphasis, active nav link, card accent border, hover state — the single chromatic voice that earns every pixel it touches |"
    info: "| Ember Crust | `#6c3200` | `--color-ember-crust` | Footer background, dark-mode brand block — used where the orange needs to recede into a deep, warm base |"
    info: "| Cloud Mist | `#e3f1fe` | `--color-cloud-mist` | Page canvas tint, card surface wash, secondary button border, decorative fill behind pixel art — the soft sky that everything floats on |"
    info: "| Graphite Ink | `#232629` | `--color-graphite-ink` | Primary text, nav links, icon strokes, body copy — the near-black with a cool cast that keeps the page from feeling sterile |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surface, button text on dark fills, nav background, app-window chrome — the brightest readable layer |"
    info: "| Slate Pencil | `#5c6066` | `--color-slate-pencil` | Secondary body text, subdued button labels, muted icon fills — the tone of helpful but unhurried copy |"
    info: "| Ash Mist | `#989ea4` | `--color-ash-mist` | Tertiary text, placeholder, disabled icon color, decorative pixel tints — the quietest readable neutral |"
    info: "| Blush Shadow | `#dbced0` | `--color-blush-shadow` | Warm-tinted shadow base for card elevation — keeps shadows from looking blue-cold against the cream surface |"
    info: "| Midnight Ink | `#101828` | `--color-midnight-ink` | Headline text and strong links where the orange isn't appropriate — a rare, almost-black alternative |"

  tokens___typography:

    jersey_10___display_and_headline_type_only___the_chunky_pixel_font_that_names_the_brand__used_for_hero__section_headings__and_any_title_that_needs_to_feel_like_a_game_boy_boot_screen__never_for_body_or_ui_labels_____font_jersey_10:
      - "**Substitute:** Press Start 2P, VT323, Pixelify Sans"
      - "**Weights:** 400, 500"
      - "**Sizes:** 36px, 48px, 60px, 72px, 96px"
      - "**Line height:** 0.70, 0.80, 0.85, 1.00, 1.11"
      - "**Letter spacing:** -0.0310em at 96px, -0.0250em at 36-72px"
      - "**Role:** Display and headline type only — the chunky pixel font that names the brand. Used for hero, section headings, and any title that needs to feel like a Game Boy boot screen. Never for body or UI labels."

    manrope_variable___body__nav__button_labels__links__small_ui_text__captions__carries_all_the_prose_and_functional_copy_so_the_pixel_font_can_stay_loud__weight_600_700_for_emphasis__400_for_paragraphs__500_for_buttons_and_nav_____font_manrope_variable:
      - "**Substitute:** Inter, Plus Jakarta Sans, DM Sans"
      - "**Weights:** 400, 500, 600, 700, 800"
      - "**Sizes:** 12px, 14px, 16px, 18px"
      - "**Line height:** 1.33, 1.43, 1.50, 1.56, 1.75"
      - "**Letter spacing:** normal"
      - "**Role:** Body, nav, button labels, links, small UI text, captions. Carries all the prose and functional copy so the pixel font can stay loud. Weight 600-700 for emphasis, 400 for paragraphs, 500 for buttons and nav."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.11 | -0.9px | `--text-heading-sm` |"
      info: "| heading | 48px | 0.85 | -1.2px | `--text-heading` |"
      info: "| heading-lg | 60px | 0.85 | -1.5px | `--text-heading-lg` |"
      info: "| display | 96px | 0.8 | -3px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 6px |"
      info: "| cards | 12px |"
      info: "| links | 6px |"
      info: "| images | 24px |"
      info: "| buttons | 6px |"
      info: "| cardsLarge | 16px |"
      info: "| featurePanels | 32px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03...` | `--shadow-xl` |"
      info: "| md | `rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52...` | `--shadow-md` |"
      info: "| subtle | `oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset,...` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button:
      role: "The single filled-orange action — the loudest element on any page"

      info: "Filled #ff5e24 background, white text in Manrope 500 at 16px, 6px radius, padding 8px 16px or 16px 32px. Carries an inset orange-tinted shadow + 1px orange outer ring to read as 'pressed in'. Right-arrow icon in white sits to the right of the label. Never outlined, never ghost for the primary."

    secondary_outlined_button:
      role: "Low-emphasis alternative to the orange CTA"

      info: "Transparent fill, 1px border in #e3f1fe (Cloud Mist), Graphite Ink text at Manrope 500 16px, 6px radius, same 8px/16px vertical padding as primary. Soft Cloud Mist outer shadow. Used for 'Manage Account' and similar utility actions."

    ghost_text_link:
      role: "Inline and nav-link clickable text"

      info: "No background, no border, Graphite Ink (#232629) at Manrope 500 14-16px. Underline appears on hover in Signal Orange. Active state in nav uses orange text + 1px orange ring shadow."

    hero_section:
      role: "First-fold brand statement"

      info: "Centered stack on Cloud Mist (#e3f1fe) canvas. Jersey 10 at 96px / 60px for the two-line headline — first line in Graphite Ink, second line in Signal Orange for contrast. Body sentence in Manrope 400 16px, Slate Pencil color, max-width ~560px. Primary CTA centered below. Pixel-art cloud sprites float around the edges as decoration, never cropped by the container."

    feature_card:
      role: "Mid-page content panels with illustration"

      info: "White (#ffffff) surface, 12px radius, 16px internal padding, Soft border in #e3f1fe. Multi-layer blue-tinted shadow stack (the 4-layer rgba(15,34,52,…) pattern). Jersey 10 heading at 36-48px in Graphite Ink, Manrope body below in Slate Pencil. Pixel illustration or icon sits above the heading."

    app_window_mockup:
      role: "Product UI screenshot embedded in marketing"

      info: "Rounded 12-16px outer radius. macOS-style traffic-light row (red, yellow, green dots) in top-left. Internal sidebar with nav items — active item gets a blue (#e3f1fe) pill background. Main panel is white with a status card showing 'Connected to [City]' in Signal Orange, a green check icon, and a ghost 'Disconnect' button in pale red/pink."

    status_pill_connected___disconnected:
      role: "Inline state indicator inside app mocks and trust badges"

      info: "Manrope 500 14px, white text, 6px radius, full padding 6px 12px. Connected = #ff5e24 fill. Disconnected = soft pink/coral fill with dark text. Always paired with a small check or cross icon to the left of the label."

    pixel_cloud_sprite:
      role: "Decorative 8-bit cloud graphic scattered across hero and section dividers"

      info: "Hand-drawn pixel cloud, ~3-4 shades of #e3f1fe and #ffffff to suggest depth, with a thin #5c6066 1px outline. Always 2-3 sprites per section, never centered — they drift into corners and edges. No shadow, no gradient — pure flat pixel blocks."

    footer_block:
      role: "Bottom-of-page dark warm surface"

      info: "Full-width #6c3200 (Ember Crust) background. White and warm-cream text in Manrope 400-500. Sits as a tonal contrast to the sky-blue page — the only dark surface on the entire site."

    navigation_bar:
      role: "Top sticky header with logo, links, and account controls"

      info: "Transparent or white background, no visible border. Logo 'obscura' left in Manrope 700 lowercase Graphite Ink. Centered nav links in Manrope 500 14px. Right cluster: 'Manage Account' as ghost text link + 'Get Started' as the orange CTA with 6px radius. Active nav item gets the orange ring inset shadow."

    inline_pixel_mascot:
      role: "Branded character (cat) appearing in product mocks and section accents"

      info: "Tiny pixel-art cat or robot in Manrope-orange and warm grays, ~40-80px tall. Appears in app mockup sidebar, as a section accent, and in the hero lower-left. No outlines other than the pixel grid itself — flat 1-2 color fill per block."

    section_divider_pixel_cloud_cluster:
      role: "Visual breath between content sections"

      info: "A 2-3 cloud sprite cluster sitting in the negative space between sections, always off-center. No text, no line — the clouds ARE the divider. Uses the same Cloud Mist palette as the page canvas."

  do_s_and_don_ts:

    do:
      - "Use Jersey 10 for every display heading (36px and above) — it's the brand's voice and the fastest way to make a page read as Obscura."
      - "Keep the CTA palette disciplined: one Signal Orange (#ff5e24) fill per screen, nothing else in that color slot."
      - "Let the Cloud Mist (#e3f1fe) canvas do atmospheric work — apply it as a full-bleed page background, not just card fills."
      - "Pair the two display line-heights intentionally: 0.80-0.85 for multi-line heroes so the pixel font stacks tightly, 1.11 for single-line section heads that need breathing room."
      - "Use 6px radius on all interactive elements (buttons, nav pills, tags) and reserve 12px+ for cards and app mocks — the contrast in corner softness is part of the system."
      - "Anchor every page with 1-2 pixel cloud sprites drifting in the corners; a page without them loses its arcade personality."
      - "Apply the orange-ring inset shadow to the active nav state and focused primary button only — it signals interaction without color-shifting."

    don_t:
      - "Don't use Jersey 10 for body text, button labels, nav links, or any UI copy below 36px — the pixel grid becomes unreadable."
      - "Don't introduce a second brand color. Blue-tinted surfaces (#e3f1fe) are atmospheric, not chromatic — they are not 'blue accents'."
      - "Don't apply the Signal Orange to large background fills; the orange is for small punctuation (buttons, emphasis words, active states, borders) only."
      - "Don't use pure black (#000000) for text — the Graphite Ink (#232629) cool cast is what keeps the cream surface from looking dead."
      - "Don't stack elevation: a card uses exactly one shadow pattern. Adding a second outer ring or glow breaks the soft, paper-like feel."
      - "Don't use sharp 0px corners on feature cards — 12-16px radius is the floor for any panel surface."
      - "Don't place pixel cloud sprites centered, behind text, or larger than ~120px — they should always feel like a sky decoration, not a feature illustration."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Sky Canvas | `#e3f1fe` | The page-wide pale-blue tint that gives the entire site its cloud-paper atmosphere |"
    info: "| 1 | Card Paper | `#ffffff` | Lifted card and content-panel surfaces — the default elevated reading surface |"
    info: "| 2 | App Window | `#f5f5f7` | macOS-style chrome behind product UI — slightly cooler than card paper to recede |"
    info: "| 3 | Ember Ground | `#6c3200` | Footer block — the dark warm surface that anchors the page |"

  elevation:

    - "**Standard Card:** `rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px`"
    - "**Elevated Card:** `rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px`"
    - "**Active Nav / Focused Button:** `rgba(255, 94, 36, 0.17) 0px 0.5px 0.5px 0.5px inset, rgba(153, 37, 18, 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px`"

  imagery:

    info: "Obscura runs on hand-built 8-bit pixel art rather than photography or 3D renders. The visual vocabulary is Game Boy / NES sprite work: flat-color pixel blocks, 1-2 shades per object, no anti-aliasing, no gradients inside the art. Three recurring subjects carry the system — pixel clouds (the most-used motif, drifting in cream and sky-blue tones), a small pixel cat/robot mascot (orange and warm gray, appears in app mocks and section corners), and the macOS-style app window containing the product UI. Product screenshots are styled with real window chrome (traffic-light dots, sidebar nav) so the product feels native to a desktop. There is no photography, no stock imagery, no abstract gradient blobs. Illustrations are always flat-outlined or flat-filled, always contained inside cards or floating in the page margin, never overlapping text blocks. The pixel art carries mood (playful, retro, privacy-as-adventure) while the product UI screenshot carries credibility (real, installed, usable)."

  layout:

    info: "Page layout is max-width contained (1200px) on a full-bleed Cloud Mist (#e3f1fe) canvas. The hero is centered-stack: a two-line pixel headline, a single short paragraph, a single orange CTA, and two ghost platform options below — with pixel cloud sprites floating in the negative space to the left and right. Sections stack vertically with 48px gaps and breathe generously; there are no hard horizontal dividers, the cloud sprites do the visual separation. Content alternates between centered single-column (hero, CTA bands) and 2-column text-plus-card (feature explanations, where the left text block pairs with a right-side card mockup or pixel illustration). Card grids appear as 2- and 3-column at desktop, collapsing to single column on mobile. The app-window mockup sits as a large, centered hero element below the fold, stretching to the edges of the content column. Navigation is a single top bar — logo left, centered links, account cluster right — transparent or white, no sticky shadow. Footer is a single full-bleed dark band in Ember Crust (#6c3200), breaking the otherwise all-cream rhythm."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #232629 (Graphite Ink)"
    - "background: #e3f1fe (Cloud Mist) over #ffffff (Paper White) cards"
    - "border: #e3f1fe (Cloud Mist, 1px)"
    - "accent: #ff5e24 (Signal Orange)"
    - "primary action: #ff5e24 (filled action)"
    - "dark surface: #6c3200 (Ember Crust, footer only)"

    example_component_prompts:

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

    - "*Feature card*: White (#ffffff) surface, 12px radius, 16px internal padding, 1px #e3f1fe border, 4-layer blue-tinted shadow stack. Heading in Jersey 10 36px Graphite Ink letter-spacing -0.9px. Body in Manrope 400 16px Slate Pencil. Small pixel illustration (40-60px) sits above the heading."

    - "*Status pill inside app mock*: Manrope 500 14px white text on Signal Orange (#ff5e24) fill, 6px radius, 6px 12px padding, small green check icon to the left of the label 'Connected to New York, NY'."

    - "*Ghost nav link*: No background, no border. Manrope 500 14px Graphite Ink. Underline appears on hover in Signal Orange. Active state adds 1px orange ring inset shadow."

    - "*Footer band*: Full-width Ember Crust (#6b3200) background. Logo and links in Manrope 400-500 14px in white and warm cream (#f5e6dc). 48px internal padding top and bottom."

  pixel_art_direction:

    info: "All decorative graphics are hand-authored 8-bit pixel art, NOT CSS pixels, NOT smooth vector illustrations. Each sprite uses a fixed grid (typically 16x16 or 32x32 base), flat fills of 1-3 colors per object, and a 1px darker-tone outline. Anti-aliasing is forbidden — if a curve looks smooth, it's wrong. The pixel cloud is the most-reused motif: ~3-4 shades of #e3f1fe and #ffffff with a #5c6066 1px outline, always floating, never anchored to a baseline. The pixel mascot cat appears in the app mockup sidebar and as a section accent — warm orange + warm gray, no more than 80px tall. When in doubt, fewer pixels at a larger size beats more pixels crammed into a small space — the pixel grid should always be readable."

  similar_brands:

    - "**1Password** — Same friendly-privacy tone with a single warm accent color and clean white-on-cream surfaces, though Obscura leans more playful with its pixel font."
    - "**Proton Mail** — Comparable trustworthy-privacy palette logic — near-black text on white, single brand color doing the action work, minimal decorative noise."
    - "**Linear** — Shares the 'one chromatic accent against a quiet neutral canvas' discipline and the restrained, modern Manrope-grade body type paired with a strong display voice."
    - "**Oh My Zsh / Pixel-art developer tools** — Same 8-bit retro typography and cloud-sprite decoration vocabulary, though Obscura uses it for marketing warmth rather than terminal nostalgia."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-orange: #ff5e24;
          --color-ember-crust: #6c3200;
          --color-cloud-mist: #e3f1fe;
          --color-graphite-ink: #232629;
          --color-paper-white: #ffffff;
          --color-slate-pencil: #5c6066;
          --color-ash-mist: #989ea4;
          --color-blush-shadow: #dbced0;
          --color-midnight-ink: #101828;
        
          /* Typography — Font Families */
          --font-jersey-10: 'Jersey 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manrope-variable: 'Manrope Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.11;
          --tracking-heading-sm: -0.9px;
          --text-heading: 48px;
          --leading-heading: 0.85;
          --tracking-heading: -1.2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -1.5px;
          --text-display: 96px;
          --leading-display: 0.8;
          --tracking-display: -3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-nav: 6px;
          --radius-cards: 12px;
          --radius-links: 6px;
          --radius-images: 24px;
          --radius-buttons: 6px;
          --radius-cardslarge: 16px;
          --radius-featurepanels: 32px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px;
          --shadow-md: rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px;
          --shadow-subtle: oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset, oklab(0.598475 0.14309 0.112215 / 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-sky-canvas: #e3f1fe;
          --surface-card-paper: #ffffff;
          --surface-app-window: #f5f5f7;
          --surface-ember-ground: #6c3200;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-orange: #ff5e24;
          --color-ember-crust: #6c3200;
          --color-cloud-mist: #e3f1fe;
          --color-graphite-ink: #232629;
          --color-paper-white: #ffffff;
          --color-slate-pencil: #5c6066;
          --color-ash-mist: #989ea4;
          --color-blush-shadow: #dbced0;
          --color-midnight-ink: #101828;
        
          /* Typography */
          --font-jersey-10: 'Jersey 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-manrope-variable: 'Manrope Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.11;
          --tracking-heading-sm: -0.9px;
          --text-heading: 48px;
          --leading-heading: 0.85;
          --tracking-heading: -1.2px;
          --text-heading-lg: 60px;
          --leading-heading-lg: 0.85;
          --tracking-heading-lg: -1.5px;
          --text-display: 96px;
          --leading-display: 0.8;
          --tracking-display: -3px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px;
          --shadow-md: rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px;
          --shadow-subtle: oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset, oklab(0.598475 0.14309 0.112215 / 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px;
        }