letterboxd___style_reference:
  info: "> Darkened cinema lobby with neon rating glow"

  theme: "dark"

  info: "Letterboxd reads as a darkened cinema lobby: a near-black canvas tinted blue, content stacked in quiet horizontal bands, and one unmistakable acid-green accent that fires only at moments of action or rating. The dual-typeface system pairs a utilitarian neo-grotesque (Graphik) for chrome with a literary serif (Tiempos) for editorial moments, creating a tension between product UI and magazine. Density is comfortable, never crowded — the grid breathes around film posters and review cards, with 3px micro-radii keeping the geometry sharp and the green CTA as the only curve that matters."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#14181c` | `--color-void-black` | Page canvas, app background |"
    info: "| Carbon | `#202830` | `--color-carbon` | Elevated surface — cards, modals, popovers |"
    info: "| Slate | `#2c3440` | `--color-slate` | Borders, dividers, subtle separators |"
    info: "| Graphite | `#445566` | `--color-graphite` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Steel | `#586370` | `--color-steel` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Fog | `#667788` | `--color-fog` | Secondary body text, inactive icon strokes |"
    info: "| Silver Mist | `#778899` | `--color-silver-mist` | Tertiary body text, meta information, timestamps |"
    info: "| Ash | `#8899aa` | `--color-ash` | Muted helper text, placeholder copy |"
    info: "| Pewter | `#99aabb` | `--color-pewter` | Primary body text, navigation links, dominant interface text |"
    info: "| Ice | `#aabbcc` | `--color-ice` | Headings, emphasis text, strong links |"
    info: "| Glacier | `#ddeeff` | `--color-glacier` | Bright accent text, active link states, highlight labels |"
    info: "| Bone | `#d8e0e8` | `--color-bone` | Navigation hover states, light iconography |"
    info: "| Chalk | `#c8d4e0` | `--color-chalk` | Button labels, inverted text on dark fills |"
    info: "| Absolute White | `#ffffff` | `--color-absolute-white` | Maximum contrast text, inverse fills, poster borders |"
    info: "| True Black | `#000000` | `--color-true-black` | Shadow base, icon glyphs, deepest contrast |"
    info: "| Acid Green | `#00e054` | `--color-acid-green` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Pro Green | `#00c030` | `--color-pro-green` | Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"

  tokens___typography:

    object_fit__cover____object_fit__cover____detected_in_extracted_data_but_not_described_by_ai____font_object_fit_cover:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1"
      - "**Role:** object-fit: cover; — detected in extracted data but not described by AI"

    graphik___primary_ui_sans_serif___navigation__buttons__labels__metadata__tags__form_controls__and_all_small_size_interface_text__the_wide_letter_spacing_at_0_075_0_083em_is_reserved_for_uppercase_eyebrows_and_nav_labels__giving_the_chrome_a_deliberate__almost_printed_feel__weight_400_carries_body_and_metadata__700_for_emphasis_and_buttons_____font_graphik:
      - "**Substitute:** Inter, DM Sans, or Source Sans 3"
      - "**Weights:** 300, 400, 700"
      - "**Sizes:** 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 24px, 26px"
      - "**Line height:** 1.00–2.00"
      - "**Letter spacing:** 0.0750em, 0.0770em, 0.0830em (applied to uppercase labels and small caps at 10–18px; 0.75–1.5px tracking)"
      - "**Role:** Primary UI sans-serif — navigation, buttons, labels, metadata, tags, form controls, and all small-size interface text. The wide letter-spacing at 0.075–0.083em is reserved for uppercase eyebrows and nav labels, giving the chrome a deliberate, almost printed feel. Weight 400 carries body and metadata, 700 for emphasis and buttons."

    tiempos_text___editorial_serif_for_body_copy_in_reviews__log_entries__and_long_form_text__the_15px_1_67_pairing_creates_generous_line_height_for_comfortable_reading__switches_the_interface_from_product_ui_into_magazine_mode_wherever_prose_appears_____font_tiempos_text:
      - "**Substitute:** Source Serif 4, Lora, or PT Serif"
      - "**Weights:** 400, 700"
      - "**Sizes:** 15px, 22px"
      - "**Line height:** 1.20, 1.25, 1.67"
      - "**Role:** Editorial serif for body copy in reviews, log entries, and long-form text. The 15px/1.67 pairing creates generous line height for comfortable reading. Switches the interface from product UI into magazine mode wherever prose appears."

    tiempos_headline___display_serif_for_hero_headlines_and_major_page_titles__a_single_use_at_36px___the_only_size_where_this_voice_speaks__making_it_feel_ceremonial_and_rare_____font_tiempos_headline:
      - "**Substitute:** Playfair Display, DM Serif Display, or Source Serif 4"
      - "**Weights:** 700"
      - "**Sizes:** 36px"
      - "**Line height:** 1.33"
      - "**Role:** Display serif for hero headlines and major page titles. A single use at 36px — the only size where this voice speaks, making it feel ceremonial and rare."

    masonry___masonry___detected_in_extracted_data_but_not_described_by_ai____font_masonry:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1"
      - "**Role:** masonry — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 0.83px | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| body-md | 16px | 1.5 | — | `--text-body-md` |"
      info: "| subheading | 18px | 1.38 | 1.49px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading | 26px | 1.23 | — | `--text-heading` |"
      info: "| display | 36px | 1.33 | — | `--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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 3px |"
      info: "| icons | 20px |"
      info: "| badges | 3px |"
      info: "| inputs | 3px |"
      info: "| buttons | 3px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) ...` | `--shadow-sm` |"
      info: "| subtle-2 | `rgba(20, 24, 28, 0.125) 0px 0px 1px 1px inset` | `--shadow-subtle-2` |"
      info: "| sm-2 | `rgb(0, 0, 0) 2px 0px 7px 0px` | `--shadow-sm-2` |"
      info: "| subtle-3 | `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 12px"
      - "**Element gap:** 10px"

  components:

    primary_action_button_acid_green:
      role: "Hero CTA, account creation, primary conversion"

      info: "Filled with #00e054, white text, Graphik 700 at 14px, 3px radius, 10px 16px padding. The only color-saturated button in the system. Drop shadow base: rgba(0,0,0,0.25) 0 1px 5px. Inner highlight: rgba(255,255,255,0.1) 0 1px 0 inset."

    secondary_button_graphite:
      role: "Less prominent actions, filter toggles"

      info: "Filled with #445566, #c8d4e0 text, Graphik 400 at 13px, 3px radius, 8px 14px padding. No shadow, flat surface that sits one step above canvas."

    ghost___text_button:
      role: "Nav items, inline links, dismissable actions"

      info: "No background, Pewter (#99aabb) or Fog (#667788) text, Graphik 400–700 at 13–14px. Hover transitions text to Glacier (#ddeeff). No border, no radius — just text with optional 1px underline."

    film_poster_card:
      role: "Grid content item — primary content unit"

      info: "Carbon (#202830) background, 3px radius, 1px inset border at rgba(20,24,28,0.125). Poster image fills card with object-fit: cover. No padding around image — poster edges meet card edges. Meta text below in Graphik 11–12px with 0.83px tracking."

    rating_star_icon:
      role: "Film rating display, interactive rating input"

      info: "Five stars in a row, 20px border-radius (fully rounded). Filled stars use #00e054 acid green. Unfilled stars use transparent fill with Fog (#667788) stroke at 1px. 20px size, 7px gap between stars."

    navigation_bar:
      role: "Top-level site navigation, persistent across all pages"

      info: "Void Black (#14181c) background, no visible border. Logo left (Graphik 700 18px white), nav links centered (Graphik 400 12px, 0.96px tracking, uppercase Pewter #99aabb). Search input right (Steel #586370 fill, 3px radius). Sticky, full-width."

    search_input:
      role: "Film/person/search query field"

      info: "Steel (#586370) background, Glacier (#ddeeff) placeholder text, Graphik 400 at 14px. 3px radius, 8px 12px padding. No visible border. Focus state adds rgba(221,238,255,0.25) 0 0 0 1px inset ring."

    badge___tag:
      role: "Film genre labels, status indicators, category pills"

      info: "Slate (#2c3440) background, Ice (#ddeeff) or Pewter (#99aabb) text, Graphik 400 at 11px with 0.83px tracking, uppercase. 3px radius, 4px 8px padding. Pro Green (#00c030) variant for positive states."

    review_block:
      role: "Long-form user review or editorial content"

      info: "Carbon (#202830) surface, 3px radius, 1px inset border. Body text in Tiempos Text 15px/1.67 Pewter (#99aabb). Username header in Graphik 700 14px Ice (#aabbcc). 16px internal padding."

    hero_banner:
      role: "Full-width featured film image with overlay text"

      info: "Full-bleed photographic background with dark gradient overlay. Headline in Tiempos Headline 36px or Graphik 700 26px white. Subtext in Tiempos Text 15px or Graphik 400 14px Pewter. Acid Green CTA button centered below text. Image attribution rotated 90° on right edge in Graphik 10px."

    masonry_grid:
      role: "Primary content layout for poster displays"

      info: "CSS masonry or column-based layout, 7px column gap, 12px row gap. Posters in 2:3 aspect ratio. No visible grid lines or section dividers — the dark canvas absorbs boundaries."

    footer:
      role: "Site links, legal, app download badges"

      info: "Void Black (#14181c) background, 1px top border in Slate (#2c3440). Link columns in Graphik 400 12px Fog (#667788), section headers in Graphik 700 12px uppercase Pewter. 64px vertical padding."

    modal_dialog:
      role: "Security checks, confirmations, auth flows"

      info: "Carbon (#202830) background, 3px radius, drop shadow rgba(0,0,0,0.25) 0 1px 5px + rgba(0,0,0,0.35) 0 1px 10px. Title in Graphik 700 16px white. Body text in Graphik 400 14px Pewter. Centered on dimmed overlay (rgba(0,0,0,0.6))."

  do_s_and_don_ts:

    do:
      - "Use #00e054 exclusively for the primary action button, star ratings, and brand-acknowledging moments — never as a background, surface, or decorative wash."
      - "Set all uppercase labels in Graphik with letter-spacing between 0.075em and 0.083em to preserve the printed, deliberate feel of the chrome."
      - "Reach for Tiempos Text at 15px/1.67 whenever the content shifts from product to editorial — reviews, log entries, descriptions."
      - "Use 3px border-radius on all cards, buttons, badges, and inputs; reserve 20px only for icon containers and rating stars."
      - "Create depth through color shifts across the neutral stack (#14181c → #202830 → #2c3440) rather than cast shadows."
      - "Pair Pewter (#99aabb) for primary body text, Fog (#667788) for secondary, and Ice (#aabbcc) for headings — the cool-blue grayscale creates a consistent temperature."
      - "Anchor the top of every page with the nav bar at full width over Void Black, and let the dark canvas extend edge-to-edge without max-width containers for the nav."

    don_t:
      - "Never introduce a second saturated color — the acid green is a soloist, and adding any other hue dilutes its signal."
      - "Don't use shadows for card or button elevation; the inset 1px border is the only depth treatment for in-flow elements."
      - "Avoid Tiempos Headline at sizes other than 36px — it loses its ceremonial weight when scaled down or stretched across components."
      - "Don't apply the wide letter-spacing to sentence-case body text; it belongs only to uppercase labels and eyebrows."
      - "Never use pure white (#ffffff) for large body text blocks — it creates too much contrast in a dark UI; use Pewter or Ice instead."
      - "Don't round corners beyond 3px on rectangular components; the sharp geometry is part of the cinema-lobby aesthetic."
      - "Avoid mixing the serif (Tiempos) into navigation, buttons, or tags — the typeface boundary between UI and editorial must stay clean."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void Black | `#14181c` | Base page canvas behind all content |"
    info: "| 2 | Carbon | `#202830` | Card surfaces, review blocks, elevated content panels |"
    info: "| 3 | Slate | `#2c3440` | Hover states, input fields, inset surfaces |"

  elevation:

    - "**Cards and content blocks:** `rgba(20, 24, 28, 0.125) 0px 0px 1px 1px inset`"
    - "**Dropdowns and overlays:** `rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) 0px 1px 10px 0px`"
    - "**Focus and active rings:** `rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset`"
    - "**Button inner highlight:** `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`"

  imagery:

    info: "Photography is the dominant visual language: large cinematic stills serve as hero backgrounds (full-bleed, edge-to-edge, with dark overlay for text legibility), while film poster artwork populates grid layouts in 2:3 portrait orientation. Posters have no frames, shadows, or rounded corners — they sit directly on the dark canvas, letting the artwork itself provide visual weight. No illustrations, no 3D renders, no abstract graphics. Image treatment is natural and unmanipulated: full color, ungraded, presented as-is. Iconography is minimal and outlined: thin 1px strokes in Fog or Pewter, with star icons as the only filled glyphs (in acid green). The visual hierarchy is: photographic hero → poster grid → editorial text blocks. Imagery occupies roughly 40% of the above-fold real estate and 60% in content sections."

  layout:

    info: "Full-bleed dark canvas with centered max-width content containers (1200px). The hero pattern is a full-viewport-width photographic banner with a dark gradient overlay, centered headline in serif, and a single acid-green CTA button — no split layouts, no side-by-side hero variants. Below the fold, content flows in alternating bands: a horizontal poster strip, then a text+grid section, then another poster grid. The masonry/grid layout is the primary content arrangement, with 6–8 columns of film posters separated by 7px gaps. Sections are separated by vertical space (64px) rather than visible dividers — the dark background absorbs boundaries. Navigation is a persistent top bar at full width, sticky on scroll. The overall rhythm is: wide hero → dense grid → editorial text block → dense grid → footer, with consistent 64px breathing room between sections."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #99aabb"
    - "text (heading): #aabbcc"
    - "text (muted): #667788"
    - "background (canvas): #14181c"
    - "background (card): #202830"
    - "border: #2c3440"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "*Film Poster Grid Item*: Carbon (#202830) background, 3px radius, no border. Poster image filling entire card at 2:3 aspect ratio with object-fit: cover. Title below in Graphik 700 13px Ice (#aabbcc). Year/metadata in Graphik 400 11px Fog (#667788) with 0.83px tracking."

    - "*Navigation Bar*: Void Black (#14181c) background, full-width, no border. Logo (Graphik 700 18px white) left. Nav links centered in Graphik 400 12px uppercase Pewter (#99aabb) with 0.96px letter-spacing, 10px horizontal gap. Search input right: Steel (#586370) fill, Glacier (#ddeeff) placeholder, Graphik 400 14px, 3px radius, 8px 12px padding."

    - "*Review Block*: Carbon (#202830) surface, 3px radius, 1px inset border rgba(20,24,28,0.125). Username in Graphik 700 14px Ice (#aabbcc). Body in Tiempos Text 15px/1.67 Pewter (#99aabb). 16px internal padding."

    - "*Rating Display*: Five stars in a row, 20px each, 7px gap. Filled stars: #00e054. Unfilled: transparent with Fog (#667788) 1px stroke. No background, no label — the stars speak alone."

  type_pairing_philosophy:

    info: "The two-typeface system is a functional boundary, not a stylistic choice. Graphik is the product: it handles everything from nav to buttons to metadata, and its wide-tracked uppercase treatment gives the chrome a printed, intentional feel. Tiempos is the editorial: it appears only where the content becomes reading — reviews, log entries, descriptions. This boundary must stay sharp. Never set Tiempos in navigation. Never set Graphik in body paragraphs. The moment the fonts bleed into each other's territory, the product loses its identity as half-tool, half-magazine."

  similar_brands:

    - "**Mubi** — Same dark cinema-lobby atmosphere with a single saturated accent color and serif/sans type pairing for editorial film content"
    - "**Trakt** — Identical dark-mode interface with poster-grid content, similar compact sans-serif chrome, and the same graphik-like geometric proportions"
    - "**Goodreads** — Same social-tracking-for-media pattern with poster/book grids, though warmer in tone — Letterboxd is the darker, cooler sibling"
    - "**Rotten Tomatoes** — Same editorial-meets-database tension, with serif body text and a clean sans-serif chrome, though RT uses red instead of green as its single accent"
    - "**The Criterion Channel** — Same cinematic reverence, dark canvas, serif display headlines, and the philosophy that one color (green for Letterboxd, red for Criterion) is enough"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #14181c;
          --color-carbon: #202830;
          --color-slate: #2c3440;
          --color-graphite: #445566;
          --color-steel: #586370;
          --color-fog: #667788;
          --color-silver-mist: #778899;
          --color-ash: #8899aa;
          --color-pewter: #99aabb;
          --color-ice: #aabbcc;
          --color-glacier: #ddeeff;
          --color-bone: #d8e0e8;
          --color-chalk: #c8d4e0;
          --color-absolute-white: #ffffff;
          --color-true-black: #000000;
          --color-acid-green: #00e054;
          --color-pro-green: #00c030;
        
          /* Typography — Font Families */
          --font-object-fit-cover: 'object-fit: cover;', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tiempos-text: 'Tiempos Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tiempos-headline: 'Tiempos Headline', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-masonry: 'masonry', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.83px;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-md: 16px;
          --leading-body-md: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --tracking-subheading: 1.49px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --text-display: 36px;
          --leading-display: 1.33;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --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-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 12px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-xl: 12px;
          --radius-xl-2: 15px;
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-cards: 3px;
          --radius-icons: 20px;
          --radius-badges: 3px;
          --radius-inputs: 3px;
          --radius-buttons: 3px;
        
          /* Shadows */
          --shadow-subtle: rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) 0px 1px 10px 0px;
          --shadow-subtle-2: rgba(20, 24, 28, 0.125) 0px 0px 1px 1px inset;
          --shadow-sm-2: rgb(0, 0, 0) 2px 0px 7px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
        
          /* Surfaces */
          --surface-void-black: #14181c;
          --surface-carbon: #202830;
          --surface-slate: #2c3440;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #14181c;
          --color-carbon: #202830;
          --color-slate: #2c3440;
          --color-graphite: #445566;
          --color-steel: #586370;
          --color-fog: #667788;
          --color-silver-mist: #778899;
          --color-ash: #8899aa;
          --color-pewter: #99aabb;
          --color-ice: #aabbcc;
          --color-glacier: #ddeeff;
          --color-bone: #d8e0e8;
          --color-chalk: #c8d4e0;
          --color-absolute-white: #ffffff;
          --color-true-black: #000000;
          --color-acid-green: #00e054;
          --color-pro-green: #00c030;
        
          /* Typography */
          --font-object-fit-cover: 'object-fit: cover;', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tiempos-text: 'Tiempos Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tiempos-headline: 'Tiempos Headline', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-masonry: 'masonry', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.83px;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-md: 16px;
          --leading-body-md: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --tracking-subheading: 1.49px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --text-heading: 26px;
          --leading-heading: 1.23;
          --text-display: 36px;
          --leading-display: 1.33;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-xl: 12px;
          --radius-xl-2: 15px;
          --radius-2xl: 20px;
        
          /* Shadows */
          --shadow-subtle: rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) 0px 1px 10px 0px;
          --shadow-subtle-2: rgba(20, 24, 28, 0.125) 0px 0px 1px 1px inset;
          --shadow-sm-2: rgb(0, 0, 0) 2px 0px 7px 0px;
          --shadow-subtle-3: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
        }