Edit Liveblocks tokens

{
  "color": {
    "background": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Primary background color - pure black"
    },
    "surface": {
      "$value": "#0a0a0a",
      "$type": "color",
      "$description": "Elevated surface color"
    },
    "surface-elevated": {
      "$value": "#1a1a1a",
      "$type": "color",
      "$description": "Card and elevated component backgrounds"
    },
    "surface-card": {
      "$value": "#0f0f0f",
      "$type": "color",
      "$description": "Pricing and feature card backgrounds"
    },
    "border-subtle": {
      "$value": "#2a2a2a",
      "$type": "color",
      "$description": "Subtle border color for cards and dividers"
    },
    "border-hover": {
      "$value": "#3a3a3a",
      "$type": "color",
      "$description": "Border color on hover states"
    },
    "text-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Primary text and headings"
    },
    "text-secondary": {
      "$value": "#a3a3a3",
      "$type": "color",
      "$description": "Secondary text, descriptions, and labels"
    },
    "text-tertiary": {
      "$value": "#737373",
      "$type": "color",
      "$description": "Tertiary text and metadata"
    },
    "accent-purple": {
      "$value": "#8b5cf6",
      "$type": "color",
      "$description": "Primary accent color for CTAs and interactive elements"
    },
    "accent-purple-hover": {
      "$value": "#7c3aed",
      "$type": "color",
      "$description": "Purple hover state"
    },
    "accent-pink": {
      "$value": "#ec4899",
      "$type": "color",
      "$description": "Secondary accent for gradients and highlights"
    },
    "accent-green": {
      "$value": "#22c55e",
      "$type": "color",
      "$description": "Success color for savings badges"
    },
    "accent-blue": {
      "$value": "#3b82f6",
      "$type": "color",
      "$description": "Info color for links and information"
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
        "$type": "fontFamily",
        "$description": "Primary sans-serif font stack"
      },
      "mono": {
        "$value": "\"Fira Code\", \"Courier New\", monospace",
        "$type": "fontFamily",
        "$description": "Monospace font for code"
      }
    },
    "size": {
      "display": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Hero display text"
      },
      "h1": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "Page titles"
      },
      "h2": {
        "$value": "36px",
        "$type": "dimension",
        "$description": "Section headings"
      },
      "h3": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Card and component titles"
      },
      "h4": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Subsection headings"
      },
      "body-lg": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "body": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small body text"
      },
      "caption": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Captions and labels"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Regular weight for body text"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight for emphasis"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semibold for buttons and labels"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for headings"
      }
    },
    "lineHeight": {
      "display": {
        "$value": "1.1",
        "$type": "number",
        "$description": "Tight line height for display text"
      },
      "heading": {
        "$value": "1.2",
        "$type": "number",
        "$description": "Line height for headings"
      },
      "body": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Comfortable reading line height"
      },
      "tight": {
        "$value": "1.4",
        "$type": "number",
        "$description": "Tighter line height for compact text"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Base spacing unit"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Extra small spacing"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Small spacing"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Medium spacing"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large spacing"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Extra large spacing"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "2X large spacing"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "3X large spacing"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "4X large spacing for sections"
    },
    "32": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "Maximum spacing for hero sections"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small radius for badges"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium radius for buttons"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large radius for cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large radius"
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "2X large radius for hero elements"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Full radius for pills and avatars"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.3)",
      "$type": "shadow",
      "$description": "Small shadow for subtle elevation"
    },
    "md": {
      "$value": "0 4px 6px rgba(0, 0, 0, 0.4)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 10px 15px rgba(0, 0, 0, 0.5)",
      "$type": "shadow",
      "$description": "Large shadow for modals"
    },
    "xl": {
      "$value": "0 20px 25px rgba(0, 0, 0, 0.6)",
      "$type": "shadow",
      "$description": "Extra large shadow for popovers"
    },
    "glow": {
      "$value": "0 0 20px rgba(139, 92, 246, 0.3)",
      "$type": "shadow",
      "$description": "Purple glow effect"
    }
  }
}