bento___style_reference:
  info: "> bento lunchbox on sunlit linoleum. A grid of rounded, sticker-like cards in lime, lavender, cobalt, and maroon, each ringed with thick black ink, sitting on warm off-white linen beneath a confident geometric headline."

  theme: "mixed"

  info: "Bento speaks in a sunlit, pop-art bento-box language: full-bleed banded sections in lime, royal blue, and maroon stack vertically like a Japanese lunch tray, separated by generous white space on a warm linen canvas (#f3f3f1). The system is high-contrast and confident — thick black outlines wrap nearly every shape (1284+ black border occurrences), giving cards, buttons, and illustrations a hand-drawn, sticker-like quality that rejects soft shadows. Typography is tight and assertive: a custom geometric sans at up to 800 weight, with negative tracking that pulls display headlines into a single dense mass at 80px. The color palette is deliberately loud but disciplined — lime green is the single loud action accent, while maroon, royal blue, lavender, forest, cobalt, and gold serve as decorative section/card fills. Components lean pill-shaped (99px) and heavily rounded (64px, 32px), with small-radius (8px) exceptions for nav and inputs. The overall mood is playful, maximalist, and unapologetically graphic — a creator-tool brand that celebrates personality over neutrality."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Lime Spark | `#d2e823` | `--color-lime-spark` | Primary action buttons, active nav fills, highlight card surfaces — the single loud CTA accent that punches through every colored band |"
    info: "| Lavender Mist | `#e9c0e9` | `--color-lavender-mist` | Decorative borders, icon outlines, soft card edges, and subtle highlight washes — a pastel companion that desaturates without disappearing |"
    info: "| Cobalt Band | `#2665d6` | `--color-cobalt-band` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Maroon Plate | `#780016` | `--color-maroon-plate` | Deep section backgrounds, card fills — anchors the lower page with a wine-colored tray that makes white type glow |"
    info: "| Cobalt Deep | `#061492` | `--color-cobalt-deep` | Card surface fills for product mockups and feature blocks — a denser, more intense blue than Cobalt Band |"
    info: "| Forest Ink | `#254f1a` | `--color-forest-ink` | Card surface fills, body accent text — the dark green that grounds warm-toned card compositions |"
    info: "| Mustard Pop | `#d6a337` | `--color-mustard-pop` | Card surface fills, decorative tile colors — a warm gold that adds variety to bento grid compositions |"
    info: "| Linen Canvas | `#f3f3f1` | `--color-linen-canvas` | Page background, neutral button fills, soft section breaks — the warm off-white base that lets colored bands float |"
    info: "| White Plate | `#ffffff` | `--color-white-plate` | Card surfaces, form inputs, icon fills, and inverted text on dark/colored backgrounds |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, dominant borders (all cards/buttons/icons carry a black stroke), and illustration outlines — the structural ink that defines every shape |"
    info: "| Midnight Ink | `#1e2330` | `--color-midnight-ink` | Secondary dark text and borders, heading strokes on light surfaces, icon outlines — a near-black with a cool cast that softens the harshness of pure black |"
    info: "| Sage Mute | `#676b5f` | `--color-sage-mute` | Muted helper text, secondary link borders, low-emphasis captions — a desaturated olive-gray that recedes without disappearing |"
    info: "| Silver Border | `#c7c8cb` | `--color-silver-border` | Subtle button borders, disabled states, low-emphasis dividers |"
    info: "| Charcoal Pill | `#222222` | `--color-charcoal-pill` | Dark mode button borders, hover state outlines on inverted components |"
    info: "| Concrete Tile | `#adadad` | `--color-concrete-tile` | Placeholder card backgrounds, skeleton states, and muted tile fills |"
    info: "| Leaf Wash | `#ebffc5` | `--color-leaf-wash` | Soft section backgrounds and highlight washes — a very pale lime that echoes Lime Spark without competing |"
    info: "| Moss Tint | `#e8efd6` | `--color-moss-tint` | Alternate pale surface for section banding — a desaturated green-gray that adds another neutral layer |"

  tokens___typography:

    arial___system_fallback_only___present_in_small_quantities__likely_from_a_legacy_or_utility_context__do_not_use_as_a_primary_face_____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Role:** System fallback only — present in small quantities, likely from a legacy or utility context. Do not use as a primary face."

    linksans___primary_type_system_for_all_ui__body__headings__and_display__used_at_400_for_body__500_for_emphasis__700_for_subheadings_buttons__800_for_the_densest_display_headlines__the_800_weight_display_at_80px_with__0_043em_tracking_is_the_signature__type_that_reads_as_a_single_shape__not_a_sentence__substitute_with_inter_or_general_sans_for_close_geometric_proportions_____font_linksans:
      - "**Substitute:** Inter (variable) or General Sans"
      - "**Weights:** 400, 500, 700, 800"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 25px, 28px, 51px, 56px, 80px"
      - "**Line height:** 1.00, 1.06, 1.07, 1.20, 1.30, 1.50, 2.32"
      - "**Letter spacing:** -0.0430em at 51px, -0.0240em at 28px, -0.0200em at 14-18px, -0.0130em at 20-25px, -0.0100em at 16px, +0.0100em at small body"
      - "**Role:** Primary type system for all UI, body, headings, and display. Used at 400 for body, 500 for emphasis, 700 for subheadings/buttons, 800 for the densest display headlines. The 800-weight display at 80px with -0.043em tracking is the signature: type that reads as a single shape, not a sentence. Substitute with Inter or General Sans for close geometric proportions."

    linksans_linksansvf___linksans_linksansvf___detected_in_extracted_data_but_not_described_by_ai____font_linksans_linksansvf:
      - "**Weights:** 400, 500, 700, 800"
      - "**Sizes:** 14px, 16px, 18px, 24px, 28px, 56px, 80px"
      - "**Line height:** 1, 1.06, 1.07, 1.2, 1.3, 1.5"
      - "**Letter spacing:** -0.02, -0.01, 0.01"
      - "**Role:** Linksans Linksansvf — detected in extracted data but not described by AI"

    yerk___yerk___detected_in_extracted_data_but_not_described_by_ai____font_yerk:
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.5"
      - "**Role:** yerk — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| body-lg | 18px | 1.3 | -0.36px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.2 | -0.48px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.07 | -0.67px | `--text-heading-sm` |"
      info: "| heading | 51px | 1.06 | -2.19px | `--text-heading` |"
      info: "| display | 80px | 1 | -3.44px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 65 | 65px | `--spacing-65` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| tags | 99px |"
      info: "| cards | 32px |"
      info: "| inputs | 8px |"
      info: "| buttons | 99px |"
      info: "| largeCards | 64px |"
      info: "| organicShapes | 1000px |"
      info: "| smallElements | 16px |"

    layout:

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

  components:

    lime_spark_primary_button:
      role: "Single dominant CTA — sign up, get started, submit"

      info: "Fill #d2e823, text #000000 at Linksans 700 16px, 99px pill radius, padding 18px 28px or 20px horizontal. Carries a 2-3px solid #000000 border that makes the lime read as a sticker rather than a flat button. Hover deepens the lime slightly; active adds a small downward translate. No drop shadow — the black outline IS the elevation."

    ghost_pill_button:
      role: "Secondary action — Log in, Cancel, Learn more"

      info: "Transparent fill, text #000000 at Linksans 500 16px, 99px pill radius, padding 18px 22px. 2px #000000 border. Sits beside primary without competing."

    white_inverted_button:
      role: "CTA on colored band sections (maroon, blue, lime)"

      info: "Fill #ffffff, text #000000, 99px radius, Linksans 700 16px, 18px 28px padding. Always wrapped in a thin #000000 border to maintain the sticker aesthetic on any background."

    social_link_pill:
      role: "Creator profile link button (the bento.me link-in-bio use case)"

      info: "Fill #ffffff or #f3f3f1, text #000000 Linksans 500 14-16px, 99px pill, 2px #000000 border, 14-18px vertical padding, 20-24px horizontal padding. Icon left at 20px, always monoline black."

    bento_card_surface:
      role: "Feature card, product block, or decorative tile in a bento grid"

      info: "One of the brand fills (Lime Spark, Lavender Mist, Cobalt Deep, Forest Ink, Mustard Pop, Maroon Plate, or Linen Canvas). Radius 32-64px, 2-3px #000000 border, padding 20-24px. No shadow. Text color inverts to #ffffff or #000000 based on the card's fill luminance."

    organic_blob_card:
      role: "Hero illustration card, decorative shape, phone mockup frame"

      info: "Uses the 1000px radius (effectively a squircle/blob). Fill is a brand color or white, always ringed by 2-3px #000000 border. The signature shape: looks like a sticker peeled from a sheet."

    phone_mockup_frame:
      role: "Product preview — showcases the creator's link page on a phone"

      info: "Black-bordered rounded rectangle, 32-64px radius, displaying a screenshot of a bento.me page inside. Often tilted 2-4° for dynamism. The frame itself is #000000 or a brand color fill."

    section_band_background:
      role: "Full-bleed colored section — hero, feature, CTA zones"

      info: "Full viewport width, min-height 80vh. Fills rotate through Lime Spark, Cobalt Band, Maroon Plate, and Linen Canvas to create the bento-tray effect. Section padding 64-80px vertical. Headlines on dark bands use #ffffff or #d2e823; on light bands use #000000."

    pill_navigation_bar:
      role: "Top-level site navigation"

      info: "Float centered, white (#ffffff) fill, 8px radius, 2px #000000 border, padding 8px 8px 8px 24px. Logo left, nav links center as ghost text, CTA right as Lime Spark pill or dark button."

    form_input:
      role: "Text input for email, name, search"

      info: "Fill #ffffff, 2px #000000 border, 8px radius, padding 12px 16px. Placeholder text in #757575 at Linksans 400 16px. Focus state thickens border to 3px and adds a Lime Spark outer ring at 2px offset."

    cookie_consent_modal:
      role: "Privacy/cookie notice overlay"

      info: "Fixed bottom-left card, fill #ffffff, 16-32px radius, 2-3px #000000 border, padding 24px, max-width 360px. Title Linksans 700 16px #000000, body Linksans 400 14px #676b5f. Three stacked buttons: Accept All (Lime Spark filled), Reject All (ghost), Customize (ghost text link)."

    monoline_icon:
      role: "UI icons — nav, social, features"

      info: "1.5-2px stroke, #000000 fill or stroke, no color fills. Square or circular bounding box, 20-24px display size. Style is flat geometric, no shadows or gradients."

    top_banner_strip:
      role: "Promotional announcement bar (e.g. 'THE CREATOR INDEX')"

      info: "Full-bleed, 40-48px height, Leaf Wash (#ebffc5) or Lime Spark fill, text Linksans 500 14px #000000, centered. Underline accent on key phrase."

  do_s_and_don_ts:

    do:
      - "Use Lime Spark (#d2e823) as the single primary action fill — never introduce a second CTA color, the loudness of lime only works in isolation"
      - "Wrap every card, button, and illustration in a 2-3px solid #000000 border — the black outline is the elevation system, drop shadows are forbidden"
      - "Use 99px pill radius for every interactive element (buttons, tags, social links) and 32-64px for card surfaces"
      - "Stack sections as full-bleed color bands rotating through Lime Spark, Cobalt Band (#2665d6), Maroon Plate (#780016), and Linen Canvas (#f3f3f1)"
      - "Set display headlines at 80px Linksans 800 with -0.043em tracking so they read as a single shape, not a sentence"
      - "Invert card text to #ffffff or #000000 based on the fill luminance — never use a mid-gray for card text"
      - "Use the 1000px radius (squircle/blob) for hero illustrations, phone mockups, and organic decorative shapes"

    don_t:
      - "Don't add drop shadows, inner shadows, or blur effects — the black border IS the elevation; stacking shadows breaks the sticker aesthetic"
      - "Don't use Lavender Mist (#e9c0e9), Forest Ink (#254f1a), or Mustard Pop (#d6a337) as CTA fills — they are decorative card colors, not action colors"
      - "Don't introduce a neutral gray button that competes with Lime Spark — secondary actions must be ghost/outlined with a black border"
      - "Don't use Cobalt Band (#2665d6) or Maroon Plate (#780016) for body text — they are section background fills, not legible text colors"
      - "Don't soften the type with positive letter-spacing or light weights in headlines — the design only works when display type is 700-800 and tightly tracked"
      - "Don't use sharp corners (< 8px) on any card or button — the system requires organic rounding at every level"
      - "Don't use #000000 text on the Maroon Plate or Cobalt Band backgrounds without first testing contrast — use #ffffff or #d2e823 instead"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Linen Canvas | `#f3f3f1` | Page base, default section background between color bands |"
    info: "| 1 | White Plate | `#ffffff` | Card surfaces, form inputs, modals, navigation float |"
    info: "| 2 | Leaf Wash | `#ebffc5` | Soft highlight sections, banner strips, subtle elevated wash |"
    info: "| 3 | Moss Tint | `#e8efd6` | Alternate neutral surface, section banding variation |"
    info: "| 4 | Concrete Tile | `#adadad` | Skeleton/placeholder card fills, muted tile backgrounds |"
    info: "| 5 | Cobalt Band | `#2665d6` | Full-bleed section background — hero/feature band |"
    info: "| 6 | Maroon Plate | `#780016` | Full-bleed section background — bottom CTA/social band |"

  elevation:

    info: "Bento has no drop shadows. The entire elevation system is replaced by a consistent 2-3px solid #000000 border on every elevated element — cards, buttons, modals, illustrations, and phone mockups. This creates a flat, sticker-like, comic-book aesthetic where shape is defined by outline rather than by light. A hover state may add a 2px translate, but never a shadow."

  imagery:

    info: "The site is image-led, using three distinct visual modes: (1) 3D-rendered phone mockups tilted 2-4° displaying the bento product UI, always framed by thick black borders to match the sticker aesthetic; (2) colorful bento-grid card compositions — small rounded squares in brand colors (maroon, cobalt, lime, mustard, lavender) arranged in a masonry-like cluster, each ringed in black; (3) lifestyle photography in the hero band — staged portraits of creators in saturated color environments (a man in a brown suit against maroon wood paneling, a person in a red beanie against a blue background). Illustrations are flat with heavy black outlines, no gradients, no soft shadows. The overall density is balanced — roughly 40% imagery, 60% text/colored surface, with the color bands doing as much visual work as the photos."

  layout:

    info: "Full-bleed vertically stacked color bands with no central max-width on the sections themselves — each band stretches edge-to-edge. Content within bands is centered with a max-width of ~1200px, using a 12-column grid. The hero is a left-aligned headline + right-aligned phone mockup split (50/50). Subsequent sections alternate: text-left/image-right, then text-right/image-left, creating a Z-pattern rhythm. The bento grid sections use a 2x3 or 3x3 asymmetric masonry of rounded color tiles. The bottom band is a maroon full-bleed with a left-aligned headline and a right-side bento card cluster. Vertical rhythm is generous — 64-80px between sections, with the color band transitions themselves acting as the dividers. Navigation is a floating white pill bar centered at the top, not a full-width header."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background (canvas): #f3f3f1"
    - "card surface: #ffffff"
    - "border (all shapes): #000000 (2-3px)"
    - "accent (decorative): #e9c0e9 (Lavender Mist)"
    - "primary action: #d2e823 (filled action)"

    3_5_example_component_prompts:

    - "**Hero Section**: Full-bleed Lime Spark (#d2e823) background, 80px height per side padding. Left column: headline 'bio you' at 80px Linksans 800, color #000000, letter-spacing -3.44px. Below at 18px Linksans 400, color #000000, supporting copy. CTA: Lime Spark filled button with 2px #000000 border, 99px radius, text 'Get started for free' at 16px 700 #000000, padding 18px 28px. Right column: phone mockup at 2° tilt, white card surface with 2px #000000 border, 32px radius, displaying a bento profile inside."

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

    - "**Bento Card Grid**: Three columns on Linen Canvas (#f3f3f1) background. Cards: mix of 32px and 64px radius, fills rotating through #d2e823, #061492, #254f1a, #d6a337, #780016, #e9c0e9. Every card has 2-3px #000000 border, 20-24px padding, text inverting to #ffffff or #000000 based on luminance."

    - "**Cookie Consent Modal**: Fixed bottom-left, 360px max-width, #ffffff fill, 16px radius, 2px #000000 border, 24px padding. Title 'We Value Your Privacy' at 16px Linksans 700 #000000. Body at 14px Linksans 400 #676b5f. Three stacked buttons: 'Accept All' (Lime Spark #d2e823 filled, 99px radius, black border), 'Reject All' (ghost, 99px radius, black border, black text), 'Customize my choices' (text link in #000000)."

    - "**Social Link Profile Page**: White (#ffffff) background, centered 480px column. Avatar at top in 1000px radius blob, 3px #000000 border. Stacked social link pills below: each #ffffff fill, 2px #000000 border, 99px radius, 18px vertical padding, 20-24px horizontal padding, monoline black icon left at 20px, label at 16px Linksans 500 #000000."

  similar_brands:

    - "**Notion** — Same bento-grid layout language — rounded card tiles in varied colors stacked asymmetrically on a warm off-white canvas"
    - "**Gumroad** — Same maximalist creator-tool aesthetic with saturated color blocks, pill buttons, and personality-forward typography"
    - "**Brilliant** — Same playful educational-app vibe with bold colors, thick black outlines on illustrations, and a flat sticker-like design language"
    - "**Poppi** — Same loud, pop-art color palette and rounded organic shapes used as a brand differentiator"
    - "**Linktree** — Same product category (link-in-bio) with pill-shaped social link buttons and bright, attention-grabbing section colors"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lime-spark: #d2e823;
          --color-lavender-mist: #e9c0e9;
          --color-cobalt-band: #2665d6;
          --color-maroon-plate: #780016;
          --color-cobalt-deep: #061492;
          --color-forest-ink: #254f1a;
          --color-mustard-pop: #d6a337;
          --color-linen-canvas: #f3f3f1;
          --color-white-plate: #ffffff;
          --color-ink-black: #000000;
          --color-midnight-ink: #1e2330;
          --color-sage-mute: #676b5f;
          --color-silver-border: #c7c8cb;
          --color-charcoal-pill: #222222;
          --color-concrete-tile: #adadad;
          --color-leaf-wash: #ebffc5;
          --color-moss-tint: #e8efd6;
        
          /* Typography — Font Families */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-linksans: 'Linksans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-linksans-linksansvf: 'Linksans Linksansvf', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-yerk: 'yerk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.07;
          --tracking-heading-sm: -0.67px;
          --text-heading: 51px;
          --leading-heading: 1.06;
          --tracking-heading: -2.19px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.44px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-65: 65px;
          --spacing-128: 128px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 20-24px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 29.09px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 41.6px;
          --radius-full: 64px;
          --radius-full-2: 99px;
          --radius-full-3: 1000px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-tags: 99px;
          --radius-cards: 32px;
          --radius-inputs: 8px;
          --radius-buttons: 99px;
          --radius-largecards: 64px;
          --radius-organicshapes: 1000px;
          --radius-smallelements: 16px;
        
          /* Surfaces */
          --surface-linen-canvas: #f3f3f1;
          --surface-white-plate: #ffffff;
          --surface-leaf-wash: #ebffc5;
          --surface-moss-tint: #e8efd6;
          --surface-concrete-tile: #adadad;
          --surface-cobalt-band: #2665d6;
          --surface-maroon-plate: #780016;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lime-spark: #d2e823;
          --color-lavender-mist: #e9c0e9;
          --color-cobalt-band: #2665d6;
          --color-maroon-plate: #780016;
          --color-cobalt-deep: #061492;
          --color-forest-ink: #254f1a;
          --color-mustard-pop: #d6a337;
          --color-linen-canvas: #f3f3f1;
          --color-white-plate: #ffffff;
          --color-ink-black: #000000;
          --color-midnight-ink: #1e2330;
          --color-sage-mute: #676b5f;
          --color-silver-border: #c7c8cb;
          --color-charcoal-pill: #222222;
          --color-concrete-tile: #adadad;
          --color-leaf-wash: #ebffc5;
          --color-moss-tint: #e8efd6;
        
          /* Typography */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-linksans: 'Linksans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-linksans-linksansvf: 'Linksans Linksansvf', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-yerk: 'yerk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.07;
          --tracking-heading-sm: -0.67px;
          --text-heading: 51px;
          --leading-heading: 1.06;
          --tracking-heading: -2.19px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.44px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-65: 65px;
          --spacing-128: 128px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 29.09px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 41.6px;
          --radius-full: 64px;
          --radius-full-2: 99px;
          --radius-full-3: 1000px;
        }