{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$metadata": {
    "name": "WonderCast Design Tokens",
    "version": "1.0.0",
    "description": "Comprehensive design tokens for the WonderCast brand kit. Compatible with Style Dictionary, Figma Tokens, and Token Studio.",
    "prefix": "wc",
    "lastUpdated": "2026-02-23"
  },
  "color": {
    "brand": {
      "$description": "Primary brand purple scale. Use 500 as the default.",
      "50":  { "$value": "#F5F3FF", "$type": "color" },
      "100": { "$value": "#EDE9FE", "$type": "color" },
      "200": { "$value": "#DDD6FE", "$type": "color" },
      "300": { "$value": "#C4B5FD", "$type": "color" },
      "400": { "$value": "#A78BFA", "$type": "color" },
      "500": { "$value": "#7C3AED", "$type": "color" },
      "600": { "$value": "#6D28D9", "$type": "color" },
      "700": { "$value": "#5B21B6", "$type": "color" },
      "800": { "$value": "#4C1D95", "$type": "color" },
      "900": { "$value": "#2E1065", "$type": "color" }
    },
    "coral": {
      "$description": "Warm coral accent for CTAs, badges, and attention elements.",
      "50":  { "$value": "#FFF1F0", "$type": "color" },
      "100": { "$value": "#FFE4E1", "$type": "color" },
      "200": { "$value": "#FFCAC5", "$type": "color" },
      "300": { "$value": "#FFA39E", "$type": "color" },
      "400": { "$value": "#FF6B6B", "$type": "color" },
      "500": { "$value": "#EF4444", "$type": "color" }
    },
    "gold": {
      "$description": "Gold accent for highlights, stars, ratings, and premium elements.",
      "50":  { "$value": "#FFFBEB", "$type": "color" },
      "100": { "$value": "#FEF3C7", "$type": "color" },
      "200": { "$value": "#FDE68A", "$type": "color" },
      "300": { "$value": "#FFD93D", "$type": "color" },
      "400": { "$value": "#F9C74F", "$type": "color" },
      "500": { "$value": "#F59E0B", "$type": "color" }
    },
    "slate": {
      "$description": "Neutral slate scale for text, borders, and subtle backgrounds.",
      "50":  { "$value": "#F8FAFC", "$type": "color" },
      "100": { "$value": "#F1F5F9", "$type": "color" },
      "200": { "$value": "#E2E8F0", "$type": "color" },
      "300": { "$value": "#CBD5E1", "$type": "color" },
      "400": { "$value": "#94A3B8", "$type": "color" },
      "500": { "$value": "#64748B", "$type": "color" },
      "600": { "$value": "#475569", "$type": "color" },
      "700": { "$value": "#334155", "$type": "color" },
      "800": { "$value": "#1E293B", "$type": "color" },
      "900": { "$value": "#0F172A", "$type": "color" }
    },
    "semantic": {
      "$description": "Theme-aware semantic colors. Values change between light and dark mode.",
      "background": {
        "warm":    { "$value": "#FDFBF7", "$type": "color", "$description": "Warm off-white page background" },
        "white":   { "$value": "#FFFFFF", "$type": "color", "$description": "Card / surface background" },
        "subtle":  { "$value": "#F8FAFC", "$type": "color", "$description": "Alternate background for tables, code" },
        "overlay": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color", "$description": "Modal backdrop" }
      },
      "text": {
        "primary":   { "$value": "{color.slate.800}", "$type": "color", "$description": "Headings, body text" },
        "secondary": { "$value": "{color.slate.500}", "$type": "color", "$description": "Descriptions, labels" },
        "muted":     { "$value": "{color.slate.400}", "$type": "color", "$description": "Placeholders, disabled" },
        "inverse":   { "$value": "#FFFFFF", "$type": "color", "$description": "Text on dark backgrounds" },
        "link":      { "$value": "{color.brand.500}", "$type": "color", "$description": "Link color" }
      },
      "border": {
        "default": { "$value": "{color.slate.200}", "$type": "color" },
        "focus":   { "$value": "{color.brand.500}", "$type": "color" }
      },
      "status": {
        "success":    { "$value": "#22C55E", "$type": "color" },
        "successBg":  { "$value": "#F0FDF4", "$type": "color" },
        "warning":    { "$value": "#F59E0B", "$type": "color" },
        "warningBg":  { "$value": "#FFFBEB", "$type": "color" },
        "error":      { "$value": "#EF4444", "$type": "color" },
        "errorBg":    { "$value": "#FEF2F2", "$type": "color" },
        "info":       { "$value": "#3B82F6", "$type": "color" },
        "infoBg":     { "$value": "#EFF6FF", "$type": "color" }
      },
      "$extensions": {
        "dark": {
          "background": {
            "warm":    { "$value": "#0F0A1A" },
            "white":   { "$value": "#1A1525" },
            "subtle":  { "$value": "#221D2E" },
            "overlay": { "$value": "rgba(0, 0, 0, 0.7)" }
          },
          "text": {
            "primary":   { "$value": "#F1F5F9" },
            "secondary": { "$value": "#94A3B8" },
            "muted":     { "$value": "#64748B" },
            "inverse":   { "$value": "#1E293B" },
            "link":      { "$value": "{color.brand.400}" }
          },
          "border": {
            "default": { "$value": "{color.slate.700}" },
            "focus":   { "$value": "{color.brand.400}" }
          },
          "status": {
            "successBg": { "$value": "#052E16" },
            "warningBg": { "$value": "#451A03" },
            "errorBg":   { "$value": "#450A0A" },
            "infoBg":    { "$value": "#172554" }
          }
        }
      }
    }
  },
  "typography": {
    "fontFamily": {
      "$description": "Font stacks for body, display, accessibility, and monospace.",
      "body":    { "$value": "'Plus Jakarta Sans', system-ui, -apple-system, sans-serif", "$type": "fontFamily" },
      "display": { "$value": "'Outfit', system-ui, -apple-system, sans-serif", "$type": "fontFamily" },
      "a11y":    { "$value": "'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif", "$type": "fontFamily" },
      "mono":    { "$value": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace", "$type": "fontFamily" }
    },
    "fontSize": {
      "$description": "Type scale from extra-small (12px) to 6xl (60px).",
      "xs":   { "$value": "0.75rem",  "$type": "dimension", "$description": "12px" },
      "sm":   { "$value": "0.875rem", "$type": "dimension", "$description": "14px" },
      "base": { "$value": "1rem",     "$type": "dimension", "$description": "16px" },
      "lg":   { "$value": "1.125rem", "$type": "dimension", "$description": "18px" },
      "xl":   { "$value": "1.25rem",  "$type": "dimension", "$description": "20px" },
      "2xl":  { "$value": "1.5rem",   "$type": "dimension", "$description": "24px" },
      "3xl":  { "$value": "1.875rem", "$type": "dimension", "$description": "30px" },
      "4xl":  { "$value": "2.25rem",  "$type": "dimension", "$description": "36px" },
      "5xl":  { "$value": "3rem",     "$type": "dimension", "$description": "48px" },
      "6xl":  { "$value": "3.75rem",  "$type": "dimension", "$description": "60px" }
    },
    "lineHeight": {
      "$description": "Line heights that pair with font sizes for consistent vertical rhythm.",
      "none":    { "$value": "1",     "$type": "number" },
      "tight":   { "$value": "1.25",  "$type": "number" },
      "snug":    { "$value": "1.375", "$type": "number" },
      "normal":  { "$value": "1.5",   "$type": "number" },
      "relaxed": { "$value": "1.625", "$type": "number" },
      "loose":   { "$value": "2",     "$type": "number" },
      "xs":   { "$value": "1rem",    "$type": "dimension" },
      "sm":   { "$value": "1.25rem", "$type": "dimension" },
      "base": { "$value": "1.5rem",  "$type": "dimension" },
      "lg":   { "$value": "1.75rem", "$type": "dimension" },
      "xl":   { "$value": "1.75rem", "$type": "dimension" },
      "2xl":  { "$value": "2rem",    "$type": "dimension" },
      "3xl":  { "$value": "2.25rem", "$type": "dimension" },
      "4xl":  { "$value": "2.5rem",  "$type": "dimension" },
      "5xl":  { "$value": "3.5rem",  "$type": "dimension" },
      "6xl":  { "$value": "4.25rem", "$type": "dimension" }
    },
    "fontWeight": {
      "normal":    { "$value": 400, "$type": "number" },
      "medium":    { "$value": 500, "$type": "number" },
      "semibold":  { "$value": 600, "$type": "number" },
      "bold":      { "$value": 700, "$type": "number" },
      "extrabold": { "$value": 800, "$type": "number" }
    },
    "letterSpacing": {
      "tighter": { "$value": "-0.05em", "$type": "dimension" },
      "tight":   { "$value": "-0.025em", "$type": "dimension" },
      "normal":  { "$value": "0em", "$type": "dimension" },
      "wide":    { "$value": "0.025em", "$type": "dimension" },
      "wider":   { "$value": "0.05em", "$type": "dimension" },
      "widest":  { "$value": "0.1em", "$type": "dimension" }
    },
    "composite": {
      "$description": "Pre-composed typography styles for common use cases.",
      "heading1": {
        "$value": {
          "fontFamily": "{typography.fontFamily.display}",
          "fontSize": "{typography.fontSize.5xl}",
          "fontWeight": "{typography.fontWeight.extrabold}",
          "lineHeight": "{typography.lineHeight.5xl}",
          "letterSpacing": "{typography.letterSpacing.tight}"
        },
        "$type": "typography"
      },
      "heading2": {
        "$value": {
          "fontFamily": "{typography.fontFamily.display}",
          "fontSize": "{typography.fontSize.4xl}",
          "fontWeight": "{typography.fontWeight.bold}",
          "lineHeight": "{typography.lineHeight.4xl}",
          "letterSpacing": "{typography.letterSpacing.tight}"
        },
        "$type": "typography"
      },
      "heading3": {
        "$value": {
          "fontFamily": "{typography.fontFamily.display}",
          "fontSize": "{typography.fontSize.3xl}",
          "fontWeight": "{typography.fontWeight.bold}",
          "lineHeight": "{typography.lineHeight.3xl}",
          "letterSpacing": "{typography.letterSpacing.normal}"
        },
        "$type": "typography"
      },
      "heading4": {
        "$value": {
          "fontFamily": "{typography.fontFamily.display}",
          "fontSize": "{typography.fontSize.2xl}",
          "fontWeight": "{typography.fontWeight.semibold}",
          "lineHeight": "{typography.lineHeight.2xl}",
          "letterSpacing": "{typography.letterSpacing.normal}"
        },
        "$type": "typography"
      },
      "body": {
        "$value": {
          "fontFamily": "{typography.fontFamily.body}",
          "fontSize": "{typography.fontSize.base}",
          "fontWeight": "{typography.fontWeight.normal}",
          "lineHeight": "{typography.lineHeight.normal}",
          "letterSpacing": "{typography.letterSpacing.normal}"
        },
        "$type": "typography"
      },
      "bodySm": {
        "$value": {
          "fontFamily": "{typography.fontFamily.body}",
          "fontSize": "{typography.fontSize.sm}",
          "fontWeight": "{typography.fontWeight.normal}",
          "lineHeight": "{typography.lineHeight.normal}",
          "letterSpacing": "{typography.letterSpacing.normal}"
        },
        "$type": "typography"
      },
      "caption": {
        "$value": {
          "fontFamily": "{typography.fontFamily.body}",
          "fontSize": "{typography.fontSize.xs}",
          "fontWeight": "{typography.fontWeight.medium}",
          "lineHeight": "{typography.lineHeight.tight}",
          "letterSpacing": "{typography.letterSpacing.wider}"
        },
        "$type": "typography"
      }
    }
  },
  "spacing": {
    "$description": "Spacing scale based on a 4px (0.25rem) grid. Use for margin, padding, and gap.",
    "0":    { "$value": "0",        "$type": "dimension" },
    "px":   { "$value": "1px",      "$type": "dimension" },
    "0.5":  { "$value": "0.125rem", "$type": "dimension", "$description": "2px" },
    "1":    { "$value": "0.25rem",  "$type": "dimension", "$description": "4px" },
    "1.5":  { "$value": "0.375rem", "$type": "dimension", "$description": "6px" },
    "2":    { "$value": "0.5rem",   "$type": "dimension", "$description": "8px" },
    "2.5":  { "$value": "0.625rem", "$type": "dimension", "$description": "10px" },
    "3":    { "$value": "0.75rem",  "$type": "dimension", "$description": "12px" },
    "3.5":  { "$value": "0.875rem", "$type": "dimension", "$description": "14px" },
    "4":    { "$value": "1rem",     "$type": "dimension", "$description": "16px" },
    "5":    { "$value": "1.25rem",  "$type": "dimension", "$description": "20px" },
    "6":    { "$value": "1.5rem",   "$type": "dimension", "$description": "24px" },
    "7":    { "$value": "1.75rem",  "$type": "dimension", "$description": "28px" },
    "8":    { "$value": "2rem",     "$type": "dimension", "$description": "32px" },
    "9":    { "$value": "2.25rem",  "$type": "dimension", "$description": "36px" },
    "10":   { "$value": "2.5rem",   "$type": "dimension", "$description": "40px" },
    "11":   { "$value": "2.75rem",  "$type": "dimension", "$description": "44px" },
    "12":   { "$value": "3rem",     "$type": "dimension", "$description": "48px" },
    "14":   { "$value": "3.5rem",   "$type": "dimension", "$description": "56px" },
    "16":   { "$value": "4rem",     "$type": "dimension", "$description": "64px" },
    "20":   { "$value": "5rem",     "$type": "dimension", "$description": "80px" },
    "24":   { "$value": "6rem",     "$type": "dimension", "$description": "96px" },
    "28":   { "$value": "7rem",     "$type": "dimension", "$description": "112px" },
    "32":   { "$value": "8rem",     "$type": "dimension", "$description": "128px" }
  },
  "radius": {
    "$description": "Border radius tokens from subtle rounding to fully circular.",
    "none": { "$value": "0",       "$type": "dimension" },
    "sm":   { "$value": "0.375rem", "$type": "dimension", "$description": "6px - inputs, subtle" },
    "md":   { "$value": "0.5rem",   "$type": "dimension", "$description": "8px - cards, buttons" },
    "lg":   { "$value": "0.75rem",  "$type": "dimension", "$description": "12px - larger cards" },
    "xl":   { "$value": "1rem",     "$type": "dimension", "$description": "16px - prominent cards" },
    "2xl":  { "$value": "1.5rem",   "$type": "dimension", "$description": "24px - hero elements" },
    "3xl":  { "$value": "2rem",     "$type": "dimension", "$description": "32px - extra prominent" },
    "full": { "$value": "9999px",   "$type": "dimension", "$description": "Pill shapes, avatars" }
  },
  "shadow": {
    "$description": "Box shadow elevation system from subtle to mega.",
    "xs":    { "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", "$type": "shadow" },
    "sm":    { "$value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)", "$type": "shadow" },
    "soft":  { "$value": "0 4px 20px -2px rgba(0, 0, 0, 0.05)", "$type": "shadow" },
    "md":    { "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)", "$type": "shadow" },
    "lg":    { "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)", "$type": "shadow" },
    "xl":    { "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)", "$type": "shadow" },
    "mega":  { "$value": "0 25px 50px -12px rgba(0, 0, 0, 0.15)", "$type": "shadow" },
    "card":  { "$value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)", "$type": "shadow" },
    "glow":  { "$value": "0 0 40px -10px rgba(124, 58, 237, 0.4)", "$type": "shadow", "$description": "Brand-purple glow" },
    "glass": { "$value": "0 8px 32px 0 rgba(31, 38, 135, 0.07)", "$type": "shadow", "$description": "Glassmorphism" },
    "inner": { "$value": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)", "$type": "shadow" },
    "glowCoral":   { "$value": "0 0 40px -10px rgba(239, 68, 68, 0.4)", "$type": "shadow" },
    "glowGold":    { "$value": "0 0 40px -10px rgba(245, 158, 11, 0.4)", "$type": "shadow" },
    "glowSuccess": { "$value": "0 0 40px -10px rgba(34, 197, 94, 0.4)", "$type": "shadow" }
  },
  "gradient": {
    "$description": "Pre-defined gradient values for backgrounds and decorative elements.",
    "brand":         { "$value": "linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%)", "$type": "gradient" },
    "brandVivid":    { "$value": "linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #A78BFA 100%)", "$type": "gradient" },
    "hero":          { "$value": "linear-gradient(135deg, #6B21A8 0%, #312E81 100%)", "$type": "gradient" },
    "warm":          { "$value": "linear-gradient(135deg, #FDFBF7 0%, #F5F3FF 100%)", "$type": "gradient" },
    "coral":         { "$value": "linear-gradient(135deg, #FF6B6B 0%, #EF4444 100%)", "$type": "gradient" },
    "gold":          { "$value": "linear-gradient(135deg, #FFD93D 0%, #F59E0B 100%)", "$type": "gradient" },
    "night":         { "$value": "linear-gradient(180deg, #2E1065 0%, #1E1B4B 50%, #0F172A 100%)", "$type": "gradient" },
    "constellation": { "$value": "linear-gradient(135deg, #6B21A8 0%, #4C1D95 50%, #312E81 100%)", "$type": "gradient" },
    "sunset":        { "$value": "linear-gradient(135deg, #7C3AED 0%, #FF6B6B 50%, #FFD93D 100%)", "$type": "gradient" },
    "ocean":         { "$value": "linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%)", "$type": "gradient" }
  },
  "transition": {
    "$description": "Motion tokens for consistent animation timing.",
    "duration": {
      "fast":   { "$value": "150ms", "$type": "duration" },
      "normal": { "$value": "300ms", "$type": "duration" },
      "slow":   { "$value": "500ms", "$type": "duration" }
    },
    "easing": {
      "default": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier" },
      "in":      { "$value": "cubic-bezier(0.4, 0, 1, 1)", "$type": "cubicBezier" },
      "out":     { "$value": "cubic-bezier(0, 0, 0.2, 1)", "$type": "cubicBezier" },
      "inOut":   { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier" },
      "spring":  { "$value": "cubic-bezier(0.16, 1, 0.3, 1)", "$type": "cubicBezier" },
      "bounce":  { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$type": "cubicBezier" }
    },
    "composite": {
      "fast":   { "$value": "150ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" },
      "normal": { "$value": "300ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" },
      "slow":   { "$value": "500ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" },
      "spring": { "$value": "800ms cubic-bezier(0.16, 1, 0.3, 1)", "$type": "transition" }
    }
  },
  "zIndex": {
    "$description": "Z-index layering scale to avoid z-index conflicts.",
    "base":          { "$value": 0,    "$type": "number" },
    "raised":        { "$value": 1,    "$type": "number" },
    "dropdown":      { "$value": 10,   "$type": "number" },
    "sticky":        { "$value": 20,   "$type": "number" },
    "header":        { "$value": 30,   "$type": "number" },
    "modalBackdrop": { "$value": 40,   "$type": "number" },
    "modal":         { "$value": 50,   "$type": "number" },
    "toast":         { "$value": 60,   "$type": "number" },
    "tooltip":       { "$value": 70,   "$type": "number" },
    "max":           { "$value": 9999, "$type": "number" }
  },
  "breakpoint": {
    "$description": "Responsive breakpoints (min-width). For reference in tooling -- CSS custom properties cannot be used in media queries.",
    "sm":  { "$value": "640px",  "$type": "dimension" },
    "md":  { "$value": "768px",  "$type": "dimension" },
    "lg":  { "$value": "1024px", "$type": "dimension" },
    "xl":  { "$value": "1280px", "$type": "dimension" },
    "2xl": { "$value": "1536px", "$type": "dimension" }
  },
  "sizing": {
    "$description": "Common component size tokens.",
    "icon": {
      "xs": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
      "sm": { "$value": "1rem",    "$type": "dimension", "$description": "16px" },
      "md": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
      "lg": { "$value": "1.5rem",  "$type": "dimension", "$description": "24px" },
      "xl": { "$value": "2rem",    "$type": "dimension", "$description": "32px" }
    },
    "avatar": {
      "xs":  { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
      "sm":  { "$value": "2rem",   "$type": "dimension", "$description": "32px" },
      "md":  { "$value": "2.5rem", "$type": "dimension", "$description": "40px" },
      "lg":  { "$value": "3rem",   "$type": "dimension", "$description": "48px" },
      "xl":  { "$value": "4rem",   "$type": "dimension", "$description": "64px" },
      "2xl": { "$value": "6rem",   "$type": "dimension", "$description": "96px" }
    },
    "input": {
      "sm": { "$value": "2rem",   "$type": "dimension", "$description": "32px" },
      "md": { "$value": "2.5rem", "$type": "dimension", "$description": "40px" },
      "lg": { "$value": "3rem",   "$type": "dimension", "$description": "48px" }
    },
    "container": {
      "sm":    { "$value": "640px",  "$type": "dimension" },
      "md":    { "$value": "768px",  "$type": "dimension" },
      "lg":    { "$value": "1024px", "$type": "dimension" },
      "xl":    { "$value": "1280px", "$type": "dimension" },
      "2xl":   { "$value": "1536px", "$type": "dimension" },
      "prose": { "$value": "65ch",   "$type": "dimension", "$description": "Optimal reading width" }
    }
  },
  "focus": {
    "$description": "Focus indicator tokens for keyboard navigation accessibility.",
    "ringWidth":  { "$value": "2px", "$type": "dimension" },
    "ringOffset": { "$value": "2px", "$type": "dimension" },
    "ringColor":  { "$value": "{color.brand.500}", "$type": "color" }
  }
}