{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Generated from webdesignhot — webdesignhot.com/design.md",
  "colors": {
    "bg": {
      "$type": "color",
      "$value": "#0a0a0a"
    },
    "bg-elev": {
      "$type": "color",
      "$value": "#0f0f0f"
    },
    "bg-card": {
      "$type": "color",
      "$value": "#141416"
    },
    "bg-card-hover": {
      "$type": "color",
      "$value": "#1a1a1c"
    },
    "bg-card-active": {
      "$type": "color",
      "$value": "#202024"
    },
    "surface-overlay": {
      "$type": "color",
      "$value": "rgba(10, 10, 10, 0.72)"
    },
    "text": {
      "$type": "color",
      "$value": "#ededed"
    },
    "text-strong": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text-dim": {
      "$type": "color",
      "$value": "#8a8a8a"
    },
    "text-faint": {
      "$type": "color",
      "$value": "#525252"
    },
    "text-disabled": {
      "$type": "color",
      "$value": "#3a3a3a"
    },
    "text-on-brand": {
      "$type": "color",
      "$value": "#0a0a0a"
    },
    "brand": {
      "$type": "color",
      "$value": "#c6f432"
    },
    "brand-hover": {
      "$type": "color",
      "$value": "#d2f854"
    },
    "brand-pressed": {
      "$type": "color",
      "$value": "#b6e426"
    },
    "brand-tint": {
      "$type": "color",
      "$value": "rgba(198, 244, 50, 0.10)"
    },
    "brand-tint-strong": {
      "$type": "color",
      "$value": "rgba(198, 244, 50, 0.25)"
    },
    "brand-deep": {
      "$type": "color",
      "$value": "#9bcc1f"
    },
    "border": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.08)"
    },
    "border-strong": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.15)"
    },
    "border-subtle": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.04)"
    },
    "border-brand": {
      "$type": "color",
      "$value": "rgba(198, 244, 50, 0.25)"
    },
    "border-brand-strong": {
      "$type": "color",
      "$value": "rgba(198, 244, 50, 0.45)"
    },
    "selection-bg": {
      "$type": "color",
      "$value": "rgba(198, 244, 50, 0.30)"
    },
    "selection-text": {
      "$type": "color",
      "$value": "#ededed"
    },
    "focus-ring": {
      "$type": "color",
      "$value": "#c6f432"
    },
    "link": {
      "$type": "color",
      "$value": "#c6f432"
    },
    "link-hover": {
      "$type": "color",
      "$value": "#d2f854"
    },
    "link-visited": {
      "$type": "color",
      "$value": "#9bcc1f"
    },
    "success": {
      "$type": "color",
      "$value": "#22c55e"
    },
    "success-tint": {
      "$type": "color",
      "$value": "rgba(34, 197, 94, 0.12)"
    },
    "warning": {
      "$type": "color",
      "$value": "#f59e0b"
    },
    "warning-tint": {
      "$type": "color",
      "$value": "rgba(245, 158, 11, 0.12)"
    },
    "danger": {
      "$type": "color",
      "$value": "#ef4444"
    },
    "danger-tint": {
      "$type": "color",
      "$value": "rgba(239, 68, 68, 0.12)"
    },
    "info": {
      "$type": "color",
      "$value": "#60a5fa"
    },
    "info-tint": {
      "$type": "color",
      "$value": "rgba(96, 165, 250, 0.12)"
    },
    "grain-radial": {
      "$type": "color",
      "$value": "radial-gradient(60% 40% at 50% 0%, rgba(198,244,50,0.04), transparent 70%)"
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "88px",
        "fontWeight": 500
      }
    },
    "h1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "40px",
        "fontWeight": 500
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "15px",
        "lineHeight": 1.6
      }
    }
  },
  "radius": {
    "button": {
      "$type": "dimension",
      "$value": "8px"
    },
    "card": {
      "$type": "dimension",
      "$value": "16px"
    },
    "pill": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "spacing": {
    "xs": {
      "$type": "dimension",
      "$value": "0px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "4px"
    },
    "md": {
      "$type": "dimension",
      "$value": "12px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "24px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "40px"
    }
  }
}