contra___style_reference:
  info: "> Editorial portfolio wall on white marble"

  theme: "light"

  info: "Contra operates as a curated creative-marketplace gallery: a bright white editorial canvas where almost every element is either deep ink or hairline gray, and chromatic color only erupts inside challenge/category cards and the hero gradient wash. The system reads like a print portfolio — flat, photo-forward, grid-disciplined — with one near-black action color (Charcoal #222834) carrying all primary interactivity. Typography is a custom GT Standard family whose large display sizes (up to 58px) with tight -0.01em tracking give the hero a magazine-cover gravity, while compact 14–16px body text keeps the dense directory rows legible. Components favor pill shapes (24px buttons, 16–40px tags) and razor-thin 4px card corners, with elevation achieved through a soft two-layer charcoal shadow rather than heavy borders."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#14171f` | `--color-ink` | Primary text, headings, icon strokes, hairline borders, deep surfaces — the near-black backbone that makes white space read as gallery rather than form |"
    info: "| Paper | `#ffffff` | `--color-paper` | Primary canvas and card surface — the default ground for the entire directory |"
    info: "| Mist | `#f5f6f9` | `--color-mist` | Secondary surface for subtle bands, input fills, and tag/chip backgrounds that need to sit just behind Paper |"
    info: "| Hairline | `#e5e7eb` | `--color-hairline` | Borders, dividers, and outlined-button strokes — the thinnest visible structural line |"
    info: "| Slate | `#677084` | `--color-slate` | Secondary body text and muted nav labels — never used as a primary heading color |"
    info: "| Fog | `#9ba2b0` | `--color-fog` | Tertiary text, placeholder text, disabled labels |"
    info: "| Graphite | `#373f51` | `--color-graphite` | Dark borders and separators for elevated surfaces and inverted UI. |"
    info: "| Charcoal | `#222834` | `--color-charcoal` | Primary filled button background, elevated card surface, and tag pill fill — the single non-neutral action color |"
    info: "| Deep Ink | `#050505` | `--color-deep-ink` | Heaviest text weight and maximum-contrast border accents on dark cards |"
    info: "| Pearl | `#d0d4dc` | `--color-pearl` | Icon strokes on white surfaces and faint structural outlines |"
    info: "| Iris | `#6a57e3` | `--color-iris` | Category/challenge card background — vivid violet used as one of the rotating card-fill colors |"
    info: "| Lilac | `#ddd8ff` | `--color-lilac` | Soft violet wash for decorative surfaces and pale category cards |"
    info: "| Orchid | `#cd74dd` | `--color-orchid` | Vivid pink-purple card fill in the category carousel |"
    info: "| Wine | `#45192f` | `--color-wine` | Deep muted plum card fill in the category carousel |"
    info: "| Coral | `#ff5a5e` | `--color-coral` | Warm red card fill in the category carousel and highlight badges |"
    info: "| Lime | `#f0fb96` | `--color-lime` | Vivid green-yellow card fill and decorative wash — the brightest accent in the palette |"
    info: "| Hero Wash | `linear-gradient(90deg, rgb(205, 243, 253), rgb(157, 222, 249) 42.88%, rgb(151, 157, 241) 94.62%)` | `--color-hero-wash` | Hero background gradient running from icy cyan through sky blue into soft violet — the only multi-color wash on the page |"

  tokens___typography:

    gt_standard_m___workhorse_for_body_text__navigation__buttons__labels__input_fields__and_most_headings_up_to_24px__the_15_16px_body_with_tight__0_01em_tracking_and_generous_1_50_line_height_is_what_gives_contra_its_editorial_density_feel_without_sacrificing_legibility_____font_gt_standard_m:
      - "**Substitute:** Inter, Söhne, or Untitled Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12, 14, 15, 16, 24"
      - "**Line height:** 1.15–1.60"
      - "**Letter spacing:** -0.0100em, 0.1000em"
      - "**Role:** Workhorse for body text, navigation, buttons, labels, input fields, and most headings up to 24px. The 15–16px body with tight -0.01em tracking and generous 1.50 line-height is what gives Contra its editorial-density feel without sacrificing legibility."

    gt_standard_l___reserved_for_the_largest_display_moments_the_58px_hero_headline_and_small_uppercase_eyebrows_8px_at_0_15em_tracking__the_0_88_1_05_line_heights_at_display_sizes_let_the_headline__get_more_creative__sit_on_a_single_tight_block___a_magazine_cover_move__not_a_ui_move_____font_gt_standard_l:
      - "**Substitute:** GT Sectra, Tiempos Headline, or Canela"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 8, 12, 19, 23, 58"
      - "**Line height:** 0.88–1.47"
      - "**Letter spacing:** -0.0100em, 0.0200em, 0.0500em, 0.1500em"
      - "**Role:** Reserved for the largest display moments (the 58px hero headline) and small uppercase eyebrows (8px at 0.15em tracking). The 0.88–1.05 line-heights at display sizes let the headline 'Get more creative' sit on a single tight block — a magazine-cover move, not a UI move."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.14px | `--text-body-sm` |"
      info: "| body-lg | 16px | 1.6 | -0.16px | `--text-body-lg` |"
      info: "| subheading | 19px | 1.33 | -0.19px | `--text-subheading` |"
      info: "| heading-sm | 23px | 1.39 | -0.23px | `--text-heading-sm` |"
      info: "| display | 58px | 1.05 | -0.58px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 72 | 72px | `--spacing-72` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 16px |"
      info: "| tags | 32px |"
      info: "| cards | 4px |"
      info: "| inputs | 10px |"
      info: "| buttons | 24px |"
      info: "| largePills | 40px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52,...` | `--shadow-md` |"
      info: "| subtle | `rgb(19, 24, 25) 0px 1px 3px 0px inset` | `--shadow-subtle` |"
      info: "| lg | `rgba(0, 0, 0, 0.05) 0px 10px 20px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Site header with brand, primary links, and auth"

      info: "White (#ffffff) background with a 1px Hairline (#e5e7eb) bottom border. Logo on the left (Contra wordmark + diamond glyph), three text links (Payments, Partnerships, Contra Labs) in Ink 16px medium, and a Charcoal (#222834) pill 'Sign up' button (24px radius, white text, 8px/16px padding) plus a text 'Log in' link on the right. Height sits around 64px with 16px horizontal padding."

    segmented_tab_switcher:
      role: "Binary mode toggle (Hire / Get Hired)"

      info: "Pill container with Mist (#f5f6f9) background, two equal segments. Active segment is Paper (#ffffff) with a soft shadow and Ink (#14171f) bold text; inactive is Slate (#677084). Container radius is 16px, segment text is 14px medium. Sits centered above the hero headline."

    hero_search_bar:
      role: "Primary discovery input"

      info: "Wide rounded container (~16px radius) with Mist background and Hairline border. Magnifier icon on the left, placeholder 'Discover 1.5M+ creatives' in Fog (#9ba2b0), and a Charcoal pill 'Search' button (24px radius, white text) anchored on the right. Total height around 56px, max-width around 720px, centered in the hero."

    primary_filled_button:
      role: "Main call-to-action"

      info: "Charcoal (#222834) background, white text, 24px border-radius, 7px/16px padding, GT Standard M 14–15px medium. Carries the signature two-layer soft shadow: rgba(34,40,52,0.05) 0 4px 10px and rgba(34,40,52,0.04) -2px 18px 18px. The shadow is what lifts the button off the page without using a hard border."

    ghost___outlined_button:
      role: "Secondary action"

      info: "Transparent or Paper background with a 1px Hairline (#e5e7eb) border, Ink (#14171f) text, 24px radius, same 7px/16px padding as the filled variant. Used for lower-emphasis actions where a filled Charcoal would be too loud."

    trending_topic_card:
      role: "Featured challenge or community card in the 4-column hero strip"

      info: "4px radius card with a deep background (one of Iris, Wine, Orchid, Ink, or a photographic dark image). White headline at 19–23px, muted white description, and a footer row with participant count, post count, and a stacked-avatar cluster. Dark overlay scrims at ~40% opacity when a photo is the background. 12px internal padding, height around 180px."

    category_tab_bar:
      role: "Filter chips for project directory"

      info: "Horizontal row of text tabs. The first three (Projects, People, Featured) sit in a Mist (#f5f6f9) pill container; the active one is Paper (#ffffff) with a soft shadow. The remaining categories (Web developers, Content creators, etc.) are plain text links in Slate, becoming Ink on hover. Font is GT Standard M 15px medium."

    section_header:
      role: "Title for each content band"

      info: "Left-aligned GT Standard L 23px medium Ink headline with a one-line 14px Slate description directly below. A 'View more' or 'View community' text link in Graphite (#373f51) sits flush right. Below the header: 24px gap, then the content grid."

    project_showcase_card:
      role: "Individual creator/portfolio thumbnail"

      info: "4px radius card with Paper background and 1px Hairline border. Thumbnail image fills the top portion (no radius — full-bleed to card edge). Below: 12px padding containing a 14–15px Ink title and Slate meta line. Some variants invert to a Charcoal (#222834) card with white text for 'featured' selection."

    featured_brand_card_e_g__webflow_foundations:
      role: "Sponsored/partner module"

      info: "4px radius dark card (Ink #14171f or Charcoal #222834) with a brand logo top-left and a 'Learn more →' link top-right. Center contains a large white display headline at 23–58px. Acts as a visual contrast block against the white sections — the only place colored brand logos and inverted type appear at scale."

    image_mosaic_grid:
      role: "4-column gallery of large project thumbnails"

      info: "4 equal-width columns, 8px gaps between tiles, each tile is a 4px-radius image with no caption. Used at the top of themed sections (e.g. 'Projects we love') to set visual rhythm before narrower content follows."

    input_field:
      role: "Text input for search, email, filters"

      info: "Mist (#f5f6f9) background, 10px radius, 1px Hairline border on focus transition to Ink. Placeholder text in Fog (#9ba2b0) 14px. Internal padding 12px vertical / 16px horizontal. No floating labels — label sits above as a 12px Slate caption."

    pill_tag___filter_chip:
      role: "Removable filter or category marker"

      info: "16–40px radius, Mist background, Ink 14px text, 4–8px vertical / 12px horizontal padding. Optional close × in Slate. Used for selected filters, role tags, and the segmented switcher."

  do_s_and_don_ts:

    do:
      - "Use the 24px pill radius for every filled or outlined button; pair it with the 7px/16px padding and the two-layer charcoal shadow"
      - "Set the hero headline at 58px / 1.05 line-height / -0.58px tracking in GT Standard L — it is the only place a display size is permitted"
      - "Default to Charcoal (#222834) for any filled action; only switch to outlined or ghost when the action is secondary"
      - "Keep the canvas Paper (#ffffff) and use Mist (#f5f6f9) for the rare secondary band; do not invent gray surfaces between them"
      - "Apply the hero gradient only to the top hero region — never reuse it as a card or section background"
      - "Rotate the accent palette (Iris, Orchid, Wine, Coral, Lime) for category/challenge cards, but never place two vivid accent cards adjacent to each other without a neutral spacer"
      - "Anchor every section with the Section Header pattern: 23px headline left, Slate description below, Graphite 'View more' link right"

    don_t:
      - "Do not introduce a new button color — Charcoal is the only filled action in the system"
      - "Do not use any border-radius other than the six defined (4, 10, 16, 24, 32, 40); intermediate values break the pill/sharp rhythm"
      - "Do not place vivid accent colors (Orchid, Coral, Lime) on text, icons, or borders — they are exclusively card-fill roles"
      - "Do not use GT Standard L below 19px — it is a display family and loses its identity at body sizes"
      - "Do not add colored shadows, glows, or gradients to buttons or cards; the two-layer charcoal shadow is the entire shadow vocabulary"
      - "Do not center body text in the directory sections — left-align all project, category, and section content; centering is reserved for the hero and the segmented switcher"
      - "Do not stack more than one Charcoal card visually adjacent — alternate dark cards with a white row to keep contrast readable"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Full-page background and primary card surface |"
    info: "| 1 | Mist Band | `#f5f6f9` | Subtle background bands and input/chip fills |"
    info: "| 2 | Charcoal Card | `#222834` | Elevated featured cards and dark mode sections |"
    info: "| 3 | Ink Card | `#14171f` | Darkest card level used for trending topic and feature cards |"

  elevation:

    - "**Primary Filled Button:** `rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52, 0.04) -2px 18px 18px 0px`"
    - "**Active Segmented Tab:** `rgb(19, 24, 25) 0px 1px 3px 0px inset`"
    - "**Sticky Navigation:** `rgba(0, 0, 0, 0.05) 0px 10px 20px 0px`"

  imagery:

    info: "The visual language is portfolio-first photography: tight, high-quality project crops served at 4-column mosaic scale with no lifestyle context — the work itself is the hero. Dark/inverted 'challenge' cards use a 40% black scrim to keep white type legible over photography. There are no illustrations, no 3D renders, and no decorative graphics. Icons are minimal line-style (the Contra diamond mark, the search magnifier, simple chevrons) rendered in Ink at 1–1.5px stroke weight. The hero gradient is the only atmospheric visual on an otherwise editorial-white page."

  layout:

    info: "The page runs as a single max-width (~1200px) centered column on a Paper canvas. The hero is a centered stack: segmented switcher → 58px display headline → subhead → search bar → 4-column trending card strip, separated from the directory by a Trending Topics eyebrow. Below the hero, the page alternates white section bands: each band opens with the Section Header (title left, View more right), then a 4-column image mosaic, sometimes followed by 2-column featured dark-card modules. The category tab bar acts as a horizontal divider between the hero and the first content section. Vertical rhythm is driven by 64px section gaps and 8–12px internal element gaps, with grids consistently at 4 columns for project thumbnails and 2 columns for sponsored/featured modules."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #14171f (Ink)"
    - "background: #ffffff (Paper)"
    - "secondary surface: #f5f6f9 (Mist)"
    - "border: #e5e7eb (Hairline)"
    - "accent card fills: #6a57e3 (Iris), #cd74dd (Orchid), #45192f (Wine), #ff5a5e (Coral), #f0fb96 (Lime)"
    - "primary action: #222834 (filled action)"

    example_component_prompts:
    - "*Build the hero*: Paper (#ffffff) canvas. Top nav: white with 1px Hairline (#e5e7eb) bottom border, Contra wordmark + 3 text links (Payments, Partnerships, Contra Labs) in Ink 16px medium, and a Charcoal (#222834) pill 'Sign up' button (24px radius, white text, 7px/16px padding, two-layer charcoal shadow). Below nav: centered Segmented Tab Switcher (HIRE active / GET HIRED inactive) with Mist (#f5f6f9) pill background, 16px radius, Paper active segment with inset shadow. Then GT Standard L 58px / 1.05 line-height / -0.58px tracking Ink headline 'Get more creative', then a 15px Slate subhead, then the Hero Search Bar (Mist fill, 16px radius, Hairline border, 'Discover 1.5M+ creatives' placeholder in Fog, Charcoal 'Search' button anchored right)."

    - "*Build a Trending Topic Card row*: 4-column grid, 8px gap, each card 4px radius, ~180px tall. Rotate backgrounds across Iris (#6a57e3), Ink (#14171f) with photo, Wine (#45192f), and a dark photo with 40% black scrim. White 19–23px headline top-left, Slate-on-dark description below, footer row with participant count + post count in white 12px and a stacked-avatar cluster on the right."

    - "*Build a Section Header + project grid*: Section Header — GT Standard L 23px medium Ink title left, 14px Slate description below, Graphite (#373f51) 'View more' link right. 24px gap, then 4-column project showcase grid: each card 4px radius, Paper background, 1px Hairline border, full-bleed thumbnail on top, 12px padding below with 14–15px Ink title and Slate meta line."

    - "*Build a Featured Brand Card (dark)*: 4px radius Charcoal (#222834) card, brand logo top-left in white, 'Learn more →' link top-right in white, centered GT Standard L 23–58px white display headline. Sits as a single visual contrast block in an otherwise white section."

    - "*Build the Input Field*: Mist (#f5f6f9) fill, 10px radius, 1px Hairline border (transition to Ink on focus), 12px/16px padding, Fog (#9ba2b0) 14px placeholder, with a 12px Slate caption label sitting 6px above the field."

  accent_card_system:

    info: "The five vivid colors (Iris, Orchid, Wine, Coral, Lime) plus deep Ink operate as a rotating deck for category, challenge, and community cards. They are not a free-form accent system — they are a fixed set that gets permuted across card slots to create variety in a repeating grid. When a slot needs to feature photography instead of a flat fill, Ink (#14171f) with a 40% black scrim substitutes for the chromatic fill, preserving the visual weight without introducing a new color. Lilac (#ddd8ff) is reserved for pale decorative washes and should never appear in the rotating card deck."

  similar_brands:

    - "**Behance** — Same portfolio-gallery structure with a near-black/white palette and rotating colored category cards across 4-column grids"
    - "**Dribbble** — Light editorial canvas, hairline-gray cards, and the same anti-decorative philosophy where the work carries all the color"
    - "**Webflow** — Similar pill-shaped Charcoal CTA buttons with the signature two-layer soft shadow, and the same max-width centered hero with a single large display headline"
    - "**Read.cv** — Identical anti-illustration stance — the homepage is wall-to-wall creator photography with white surfaces and hairline borders doing all the structural work"
    - "**Cargo** — Same editorial-portfolio density: compact type, tight tracking, and 4-column image grids separated by section headers with right-aligned 'View more' links"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #14171f;
          --color-paper: #ffffff;
          --color-mist: #f5f6f9;
          --color-hairline: #e5e7eb;
          --color-slate: #677084;
          --color-fog: #9ba2b0;
          --color-graphite: #373f51;
          --color-charcoal: #222834;
          --color-deep-ink: #050505;
          --color-pearl: #d0d4dc;
          --color-iris: #6a57e3;
          --color-lilac: #ddd8ff;
          --color-orchid: #cd74dd;
          --color-wine: #45192f;
          --color-coral: #ff5a5e;
          --color-lime: #f0fb96;
          --color-hero-wash: #9ddef9;
          --gradient-hero-wash: linear-gradient(90deg, rgb(205, 243, 253), rgb(157, 222, 249) 42.88%, rgb(151, 157, 241) 94.62%);
        
          /* Typography — Font Families */
          --font-gt-standard-m: 'GT Standard M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-standard-l: 'GT Standard L', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: -0.16px;
          --text-subheading: 19px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.19px;
          --text-heading-sm: 23px;
          --leading-heading-sm: 1.39;
          --tracking-heading-sm: -0.23px;
          --text-display: 58px;
          --leading-display: 1.05;
          --tracking-display: -0.58px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-72: 72px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 12px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 63px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-nav: 16px;
          --radius-tags: 32px;
          --radius-cards: 4px;
          --radius-inputs: 10px;
          --radius-buttons: 24px;
          --radius-largepills: 40px;
        
          /* Shadows */
          --shadow-md: rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52, 0.04) -2px 18px 18px 0px;
          --shadow-subtle: rgb(19, 24, 25) 0px 1px 3px 0px inset;
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 10px 20px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-mist-band: #f5f6f9;
          --surface-charcoal-card: #222834;
          --surface-ink-card: #14171f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #14171f;
          --color-paper: #ffffff;
          --color-mist: #f5f6f9;
          --color-hairline: #e5e7eb;
          --color-slate: #677084;
          --color-fog: #9ba2b0;
          --color-graphite: #373f51;
          --color-charcoal: #222834;
          --color-deep-ink: #050505;
          --color-pearl: #d0d4dc;
          --color-iris: #6a57e3;
          --color-lilac: #ddd8ff;
          --color-orchid: #cd74dd;
          --color-wine: #45192f;
          --color-coral: #ff5a5e;
          --color-lime: #f0fb96;
          --color-hero-wash: #9ddef9;
        
          /* Typography */
          --font-gt-standard-m: 'GT Standard M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-standard-l: 'GT Standard L', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --tracking-body-lg: -0.16px;
          --text-subheading: 19px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.19px;
          --text-heading-sm: 23px;
          --leading-heading-sm: 1.39;
          --tracking-heading-sm: -0.23px;
          --text-display: 58px;
          --leading-display: 1.05;
          --tracking-display: -0.58px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-72: 72px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 63px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-md: rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52, 0.04) -2px 18px 18px 0px;
          --shadow-subtle: rgb(19, 24, 25) 0px 1px 3px 0px inset;
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 10px 20px 0px;
        }