{
  "$name": "SignalWire Design System v2.0",
  "$description": "One Control Plane to Rule Voice AI \u2014 Unified light + dark tokens",
  "shared": {
    "$description": "Tokens identical in both themes \u2014 brand, typography, spacing, radius, transitions, animations, z-index, breakpoints, syntax highlighting",
    "prefix-map": {
      "$description": "Maps DTCG group names to CSS custom property prefixes. Used by all CSS generators. Single source of truth for naming.",
      "brand": { "$value": "sw" },
      "neutral": { "$value": "sw" },
      "background": { "$value": "bg" },
      "foreground": { "$value": "fg" },
      "border": { "$value": "border" },
      "fill": { "$value": "fill" },
      "code": { "$value": "code" },
      "code-block": { "$value": "cb" },
      "badge": { "$value": "badge" },
      "callout": { "$value": "callout" },
      "syntax": { "$value": "tok" },
      "typography": { "$value": "type" },
      "shadow": { "$value": "shadow" },
      "spacing": { "$value": "sp" },
      "radius": { "$value": "radius" },
      "transition": { "$value": "transition" }
    },
    "brand": {
      "blue": {
        "$value": "#044EF4",
        "$type": "color",
        "$description": "Locked. Fills only \u2014 buttons, borders, focus rings. Never as text on dark bg."
      },
      "fuchsia": {
        "$value": "#F72A72",
        "$type": "color",
        "$description": "Locked. Fills only in dark; emphasis text + fills in light."
      },
      "turquoise": {
        "$value": "#40E0D0",
        "$type": "color",
        "$description": "Dark: 'read this first' text. Light: code text, fills. Raw value \u2014 see theme-specific darkened variant for light text."
      },
      "gold": {
        "$value": "#FFD700",
        "$type": "color",
        "$description": "Code operators and warning callouts. See theme-specific darkened variant for light mode text."
      },
      "purple": {
        "$value": "#601BE6",
        "$type": "color",
        "$description": "Accent gradient midpoint between blue and fuchsia. For backgrounds, gradients, buttons, glows. Not for text on surfaces."
      },
      "light-bg": {
        "$value": "#FAFBFC",
        "$type": "color",
        "$description": "Fixed light background. Same as light page color. For preview boxes that must stay light in both themes."
      }
    },
    "typography": {
      "family-heading": {
        "$value": "'Instrument Sans', sans-serif",
        "$type": "fontFamily"
      },
      "family-body": {
        "$value": "'Lexend', sans-serif",
        "$type": "fontFamily",
        "$description": "Primary body font. Scientifically designed for readability with expanded character spacing that reduces visual crowding."
      },
      "family-code": {
        "$value": "'JetBrains Mono', monospace",
        "$type": "fontFamily"
      },
      "size-h1": {
        "$value": "clamp(2rem, 4.5vw, 3.25rem)",
        "$type": "dimension"
      },
      "size-h2": {
        "$value": "clamp(1.375rem, 3vw, 2rem)",
        "$type": "dimension"
      },
      "size-h3": {
        "$value": "clamp(1.125rem, 2vw, 1.375rem)",
        "$type": "dimension"
      },
      "size-body": {
        "$value": "16px",
        "$type": "dimension"
      },
      "size-small": {
        "$value": "14px",
        "$type": "dimension"
      },
      "size-caption": {
        "$value": "13px",
        "$type": "dimension"
      },
      "size-code": {
        "$value": "14px",
        "$type": "dimension"
      },
      "weight-heading": {
        "$value": "700",
        "$type": "fontWeight"
      },
      "weight-body": {
        "$value": "400",
        "$type": "fontWeight"
      },
      "weight-medium": {
        "$value": "500",
        "$type": "fontWeight"
      },
      "weight-semibold": {
        "$value": "600",
        "$type": "fontWeight"
      },
      "line-height-body": {
        "$value": "1.7",
        "$type": "number"
      },
      "line-height-heading": {
        "$value": "1.2",
        "$type": "number"
      },
      "line-height-code": {
        "$value": "1.75",
        "$type": "number"
      },
      "letter-spacing-heading": {
        "$value": "-0.02em",
        "$type": "dimension"
      },
      "letter-spacing-eyebrow": {
        "$value": "0.14em",
        "$type": "dimension"
      },
      "prose-body": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Text-heavy prose: blogs, articles, rendered docs. 20px desktop for sustained reading."
      },
      "prose-body-small": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Secondary prose: descriptions, supporting text in articles. Also mobile prose body."
      },
      "prose-h1": {
        "$value": "clamp(1.75rem, 3.5vw, 2.5rem)",
        "$type": "dimension",
        "$description": "Prose H1: tighter ratio to body than UI H1. ~28px to 40px."
      },
      "prose-h2": {
        "$value": "clamp(1.375rem, 2.5vw, 1.75rem)",
        "$type": "dimension",
        "$description": "Prose H2: ~22px to 28px."
      },
      "prose-h3": {
        "$value": "clamp(1.125rem, 2vw, 1.375rem)",
        "$type": "dimension",
        "$description": "Prose H3: ~18px to 22px."
      },
      "prose-code": {
        "$value": "17px",
        "$type": "dimension",
        "$description": "Code in prose context. 85% of prose-body."
      },
      "prose-line-height": {
        "$value": "1.8",
        "$type": "number",
        "$description": "More generous line height for long-form reading."
      },
      "prose-measure": {
        "$value": "75%",
        "$type": "dimension",
        "$description": "Max-width for prose containers. Percentage-based for responsive. At 1080px viewport this is ~810px."
      },
      "prose-measure-mobile": {
        "$value": "92%",
        "$type": "dimension",
        "$description": "Mobile prose max-width."
      }
    },
    "spacing": {
      "0": {
        "$value": "0",
        "$type": "dimension"
      },
      "1": {
        "$value": "0.25rem",
        "$type": "dimension",
        "$description": "4px"
      },
      "2": {
        "$value": "0.5rem",
        "$type": "dimension",
        "$description": "8px"
      },
      "3": {
        "$value": "0.75rem",
        "$type": "dimension",
        "$description": "12px"
      },
      "4": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "16px"
      },
      "5": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "20px"
      },
      "6": {
        "$value": "1.5rem",
        "$type": "dimension",
        "$description": "24px"
      },
      "8": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "32px"
      },
      "10": {
        "$value": "2.5rem",
        "$type": "dimension",
        "$description": "40px"
      },
      "12": {
        "$value": "3rem",
        "$type": "dimension",
        "$description": "48px"
      },
      "16": {
        "$value": "4rem",
        "$type": "dimension",
        "$description": "64px"
      },
      "18": {
        "$value": "4.5rem",
        "$type": "dimension",
        "$description": "72px \u2014 section padding"
      },
      "20": {
        "$value": "5rem",
        "$type": "dimension",
        "$description": "80px \u2014 hero top padding"
      }
    },
    "radius": {
      "none": {
        "$value": "0",
        "$type": "dimension"
      },
      "sm": {
        "$value": "4px",
        "$type": "dimension"
      },
      "md": {
        "$value": "8px",
        "$type": "dimension"
      },
      "lg": {
        "$value": "10px",
        "$type": "dimension",
        "$description": "Code blocks, callouts"
      },
      "xl": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Cards, specimens, panels"
      },
      "full": {
        "$value": "100px",
        "$type": "dimension",
        "$description": "Badges, pills"
      }
    },
    "transition": {
      "fast": {
        "$value": "0.15s ease",
        "$type": "other",
        "$description": "Color, link hover"
      },
      "normal": {
        "$value": "0.2s ease",
        "$type": "other",
        "$description": "Border, focus rings"
      },
      "slow": {
        "$value": "0.25s ease",
        "$type": "other",
        "$description": "Transform, box-shadow"
      }
    },
    "animation": {
      "reveal-duration": {
        "$value": "0.5s",
        "$type": "duration"
      },
      "reveal-easing": {
        "$value": "cubic-bezier(0.22, 1, 0.36, 1)",
        "$type": "other"
      },
      "gradient-duration": {
        "$value": "6s",
        "$type": "duration",
        "$description": "Accent bar gradient shift"
      }
    },
    "backgrounds": {
      "dots": {
        "$value": "radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)",
        "$type": "other",
        "$description": "Dot grid at 24px intervals. Clean, minimal.",
        "size": "24px 24px"
      },
      "grid": {
        "$value": "linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)",
        "$type": "other",
        "$description": "Fine line grid at 48px intervals. Blueprint feel.",
        "size": "48px 48px"
      },
      "noise": {
        "$value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E\")",
        "$type": "other",
        "$description": "SVG fractal noise at 2.5% opacity. Film grain texture.",
        "size": "256px 256px",
        "opacity": "0.025"
      },
      "hex": {
        "$value": "url(\"data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E\")",
        "$type": "other",
        "$description": "Hexagon outlines. Infrastructure/network feel.",
        "size": "60px 52px"
      },
      "diagonal": {
        "$value": "repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.02) 28px, rgba(255,255,255,0.02) 29px)",
        "$type": "other",
        "$description": "Diagonal lines at 2% opacity. Subtle energy/motion."
      },
      "orbs": {
        "$value": "radial-gradient(ellipse 600px 400px at 15% 20%, rgba(4,78,244,0.08) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(247,42,114,0.06) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96,27,230,0.05) 0%, transparent 70%)",
        "$type": "other",
        "$description": "Three gradient orbs in brand blue, fuchsia, purple. Atmospheric depth."
      },
      "rings": {
        "$value": "radial-gradient(circle 300px at 25% 35%, transparent 60%, rgba(4,78,244,0.04) 60%, rgba(4,78,244,0.04) 61%, transparent 61%), radial-gradient(circle 200px at 75% 60%, transparent 60%, rgba(247,42,114,0.03) 60%, rgba(247,42,114,0.03) 61%, transparent 61%), radial-gradient(circle 250px at 50% 80%, transparent 60%, rgba(96,27,230,0.03) 60%, rgba(96,27,230,0.03) 61%, transparent 61%)",
        "$type": "other",
        "$description": "Concentric ring outlines in brand colors. Radar/signal feel."
      }
    },
    "z-index": {
      "base": {
        "$value": "1",
        "$type": "number"
      },
      "navbar": {
        "$value": "100",
        "$type": "number"
      },
      "overlay": {
        "$value": "200",
        "$type": "number"
      },
      "modal": {
        "$value": "300",
        "$type": "number"
      }
    },
    "breakpoint": {
      "sm": {
        "$value": "400px",
        "$type": "dimension",
        "$description": "Small phones"
      },
      "md": {
        "$value": "768px",
        "$type": "dimension",
        "$description": "Mobile / tablet"
      },
      "lg": {
        "$value": "1024px",
        "$type": "dimension",
        "$description": "Desktop narrow"
      },
      "xl": {
        "$value": "1080px",
        "$type": "dimension",
        "$description": "Container max-width"
      }
    },
    "container": {
      "max-width": {
        "$value": "1080px",
        "$type": "dimension"
      },
      "padding": {
        "$value": "2rem",
        "$type": "dimension"
      },
      "padding-mobile": {
        "$value": "1.25rem",
        "$type": "dimension"
      }
    },
    "syntax": {
      "$description": "Code blocks use a dark background in both themes \u2014 these colors are always on #2a2a2e",
      "string": {
        "$value": "#40E0D0",
        "$type": "color"
      },
      "keyword": {
        "$value": "#6e9eff",
        "$type": "color"
      },
      "property": {
        "$value": "#ffffff",
        "$type": "color"
      },
      "operator": {
        "$value": "#FFD700",
        "$type": "color"
      },
      "comment": {
        "$value": "#898995",
        "$type": "color"
      },
      "number": {
        "$value": "#ff6da0",
        "$type": "color"
      },
      "function": {
        "$value": "#40E0D0",
        "$type": "color"
      },
      "value": {
        "$value": "#d4d4d8",
        "$type": "color"
      },
      "decorator": {
        "$value": "#6e9eff",
        "$type": "color"
      },
      "type": {
        "$value": "#ff6da0",
        "$type": "color"
      }
    },
    "fill": {
      "$description": "Button/icon fills \u2014 identical in both themes, always paired with white text",
      "blue": {
        "$value": "#044EF4",
        "$type": "color"
      },
      "fuchsia": {
        "$value": "#F72A72",
        "$type": "color"
      },
      "turquoise": {
        "$value": "#40E0D0",
        "$type": "color"
      },
      "gold": {
        "$value": "#FFD700",
        "$type": "color"
      }
    },
    "code-block": {
      "$description": "Code block surface \u2014 always dark, both themes. Separate from inline code which adapts to theme.",
      "bg": {
        "$value": "#1e1e1f",
        "$type": "color"
      },
      "fg": {
        "$value": "#d4d4d8",
        "$type": "color"
      },
      "border": {
        "$value": "rgba(255, 255, 255, 0.07)",
        "$type": "color"
      },
      "label": {
        "$value": "#73737e",
        "$type": "color",
        "$description": "Language label in top-right corner"
      },
      "tab-default": {
        "$value": "#73737e",
        "$type": "color"
      },
      "tab-hover": {
        "$value": "#e8e8ec",
        "$type": "color"
      },
      "tab-active": {
        "$value": "#40E0D0",
        "$type": "color"
      }
    },
    "roles": {
      "$description": "Component role map. Defines which token each UI element should use. The CSS generator reads this to produce correct color assignments. AI reading this file: these are the rules for what color goes where.",

      "heading-h1": { "$value": "{foreground.headings}", "$description": "H1 headings. Cool white dark, deep navy light." },
      "heading-h2": { "$value": "{foreground.headings}", "$description": "H2 headings. Same as H1." },
      "heading-h3": { "$value": "{foreground.headings}", "$description": "H3 headings. Same as H1." },
      "heading-keyword": { "$value": "{foreground.emphasis}", "$description": "Hero keywords inside headings. Turquoise dark, fuchsia light. The contrast color to headings." },

      "body-text": { "$value": "{foreground.secondary}", "$description": "Body paragraphs, descriptions, list items." },
      "body-bold": { "$value": "{foreground.default}", "$description": "Bold text in body copy. White/black, emphasis through weight not color." },

      "eyebrow-label": { "$value": "{brand.fuchsia}", "$description": "Uppercase eyebrow labels. Fuchsia accent in both themes." },
      "card-title": { "$value": "{foreground.default}", "$description": "Titles inside cards. White/black, emphasis through typography." },
      "card-body": { "$value": "{foreground.secondary}", "$description": "Body text inside cards." },

      "stat-value": { "$value": "{brand.fuchsia}", "$description": "Big numbers in stat displays. Fuchsia accent draws eye to metrics." },
      "stat-label": { "$value": "{foreground.secondary}", "$description": "Labels under stat values. Must be readable, not muted." },

      "link-default": { "$value": "{brand.fuchsia}", "$description": "Default link color. The accent draws eye to interactive elements." },
      "link-hover": { "$value": "{foreground.default}", "$description": "Link hover color. Brightens to white/black." },

      "nav-link": { "$value": "{foreground.secondary}", "$description": "Navigation bar links." },
      "nav-link-hover": { "$value": "{foreground.default}", "$description": "Nav link hover." },

      "button-primary-bg": { "$value": "{brand.fuchsia}", "$description": "Primary CTA button background." },
      "button-primary-text": { "$value": "#ffffff", "$description": "Primary CTA button text. Always white." },
      "button-secondary-text": { "$value": "{brand.fuchsia}", "$description": "Secondary/outline button text. Fuchsia, matching the accent." },
      "button-secondary-border": { "$value": "{brand.fuchsia}", "$description": "Secondary button border. Fuchsia outline." },

      "table-header": { "$value": "{foreground.muted}", "$description": "Table column headers. Uppercase, small, code font." },
      "table-header-line": { "$value": "{brand.fuchsia}", "$description": "Line under table header. Accent line." },
      "table-cell": { "$value": "{foreground.secondary}", "$description": "Table cell text." },
      "table-cell-bold": { "$value": "{foreground.default}", "$description": "Bold text in table cells. White/black, weight does the work." },

      "code-inline-bg": { "$value": "{code.bg}", "$description": "Inline code background." },
      "code-inline-text": { "$value": "{code.fg}", "$description": "Inline code text." },
      "code-block-bg": { "$value": "{code-block.bg}", "$description": "Code block background. Always dark." },
      "code-block-text": { "$value": "{code-block.fg}", "$description": "Code block text." },

      "tab-default": { "$value": "{foreground.muted}", "$description": "Inactive tab text." },
      "tab-active": { "$value": "{brand.fuchsia}", "$description": "Active tab text and indicator. Accent marks selected state." },

      "testimonial-border": { "$value": "{brand.fuchsia}", "$description": "Testimonial left border accent." },
      "testimonial-text": { "$value": "{foreground.default}", "$description": "Quote text." },
      "testimonial-attr": { "$value": "{foreground.muted}", "$description": "Attribution name. Secondary info, not accent." },

      "footer-text": { "$value": "{foreground.muted}", "$description": "Footer text and links." },
      "footer-link-hover": { "$value": "{brand.fuchsia}", "$description": "Footer link hover. Accent on interaction." },

      "section-divider": { "$value": "{border.default}", "$description": "Lines between sections." },
      "accent-bar-colors": { "$value": "{brand.blue}, {brand.purple}, {brand.fuchsia}, {brand.purple}, {brand.blue}", "$description": "Top accent bar gradient stops. Blue-purple-fuchsia-purple-blue." },

      "faq-marker": { "$value": "{brand.fuchsia}", "$description": "FAQ +/- toggle icon. Accent marks interactive element." },
      "compare-positive": { "$value": "{brand.turquoise}", "$description": "Checkmark in positive comparison items." },
      "compare-negative": { "$value": "{brand.fuchsia}", "$description": "X mark in negative comparison items." },

      "step-colors": { "$value": "{brand.fuchsia}, {brand.blue}", "$description": "Step number circle colors, alternating fuchsia and blue." },

      "pricing-featured-accent": { "$value": "{brand.fuchsia}", "$description": "Featured pricing card top border." },
      "pricing-check": { "$value": "{brand.turquoise}", "$description": "Checkmark in pricing feature lists." },
      "pricing-price": { "$value": "{brand.fuchsia}", "$description": "Price text. Fuchsia accent on pricing numbers." }
    }
  },
  "dark": {
    "$description": "Dark theme \u2014 cream/gray surfaces, white text, turquoise emphasis",
    "neutral": {
      "white": {
        "$value": "#ffffff",
        "$type": "color"
      },
      "gray-50": {
        "$value": "#f5f5f7",
        "$type": "color"
      },
      "gray-100": {
        "$value": "#e8e8ec",
        "$type": "color"
      },
      "gray-200": {
        "$value": "#c8c8cf",
        "$type": "color"
      },
      "gray-300": {
        "$value": "#a0a0aa",
        "$type": "color"
      },
      "gray-400": {
        "$value": "#73737e",
        "$type": "color"
      },
      "gray-500": {
        "$value": "#333333",
        "$type": "color"
      },
      "gray-600": {
        "$value": "#262630",
        "$type": "color"
      },
      "gray-700": {
        "$value": "#1a1a2e",
        "$type": "color"
      },
      "gray-800": {
        "$value": "#15152a",
        "$type": "color"
      },
      "gray-900": {
        "$value": "#111118",
        "$type": "color"
      },
      "black": {
        "$value": "#0a0a12",
        "$type": "color"
      }
    },
    "background": {
      "page": {
        "$value": "#0e0e18",
        "$type": "color"
      },
      "surface": {
        "$value": "#181a28",
        "$type": "color"
      },
      "surface-raised": {
        "$value": "#222436",
        "$type": "color"
      },
      "overlay": {
        "$value": "rgba(14, 14, 24, 0.94)",
        "$type": "color"
      },
      "subtle": {
        "$value": "rgba(255, 255, 255, 0.03)",
        "$type": "color"
      },
      "gradient": {
        "$value": "linear-gradient(135deg, #0a0a12 0%, #0e1028 35%, #0c2060 100%)",
        "$type": "other",
        "$description": "Atmospheric blue gradient for hero sections, marketing pages, and documentation backgrounds."
      },
      "gradient-slide": {
        "$value": "linear-gradient(90deg, #010915 0%, #102A4A 45%, #274A83 100%)",
        "$type": "other",
        "$description": "Horizontal blue gradient for slide decks, presentation backgrounds, and wide-format layouts."
      }
    },
    "foreground": {
      "default": {
        "$value": "#f0f0f4",
        "$type": "color"
      },
      "secondary": {
        "$value": "#e8e8ec",
        "$type": "color"
      },
      "muted": {
        "$value": "#a0a0aa",
        "$type": "color"
      },
      "subtle": {
        "$value": "#73737e",
        "$type": "color"
      },
      "on-color": {
        "$value": "#ffffff",
        "$type": "color"
      },
      "on-gold": {
        "$value": "#0a0a12",
        "$type": "color"
      },
      "headings": {
        "$value": "#f0f0f4",
        "$type": "color",
        "$description": "H1-H3 heading color. Cool white for dark mode. High contrast on dark bg."
      },
      "emphasis": {
        "$value": "{brand.turquoise}",
        "$type": "color",
        "$description": "Inline emphasis for hero keywords and large decorative text. References brand.turquoise."
      },
      "emphasis-small": {
        "$value": "{brand.turquoise}",
        "$type": "color",
        "$description": "Legacy token. References brand.turquoise. Use role tokens instead for UI elements."
      }
    },
    "border": {
      "default": {
        "$value": "rgba(255, 255, 255, 0.12)",
        "$type": "color"
      },
      "strong": {
        "$value": "rgba(255, 255, 255, 0.15)",
        "$type": "color"
      }
    },
    "code": {
      "bg": {
        "$value": "rgba(255, 255, 255, 0.06)",
        "$type": "color"
      },
      "fg": {
        "$value": "#40E0D0",
        "$type": "color"
      }
    },
    "badge": {
      "bg": {
        "$value": "rgb(23, 14, 23)",
        "$type": "color"
      },
      "border": {
        "$value": "rgba(255, 255, 255, 0.2)",
        "$type": "color"
      },
      "text-fuchsia": {
        "$value": "#ff5a9e",
        "$type": "color"
      },
      "text-blue": {
        "$value": "#7aabff",
        "$type": "color"
      },
      "text-turquoise": {
        "$value": "#6aeee0",
        "$type": "color"
      },
      "text-gold": {
        "$value": "#ffe44d",
        "$type": "color"
      }
    },
    "callout": {
      "info-bg": { "$value": "rgba(4, 78, 244, 0.06)", "$type": "color" },
      "info-border": { "$value": "rgba(4, 78, 244, 0.18)", "$type": "color" },
      "warn-bg": { "$value": "rgba(255, 215, 0, 0.04)", "$type": "color" },
      "warn-border": { "$value": "rgba(255, 215, 0, 0.16)", "$type": "color" },
      "danger-bg": { "$value": "rgba(247, 42, 114, 0.06)", "$type": "color" },
      "danger-border": { "$value": "rgba(247, 42, 114, 0.18)", "$type": "color" },
      "success-bg": { "$value": "rgba(64, 224, 208, 0.06)", "$type": "color" },
      "success-border": { "$value": "rgba(64, 224, 208, 0.18)", "$type": "color" }
    },
    "litbar": {
      "fuchsia-glow": { "$value": "0 0 8px 1px rgba(247, 42, 114, 0.4), 0 0 30px 4px rgba(247, 42, 114, 0.12)", "$type": "shadow" },
      "fuchsia-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, 0.06) 0%, transparent 100%)", "$type": "other" },
      "blue-glow": { "$value": "0 0 8px 1px rgba(4, 78, 244, 0.5), 0 0 30px 4px rgba(4, 78, 244, 0.12)", "$type": "shadow" },
      "blue-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, 0.07) 0%, transparent 100%)", "$type": "other" },
      "turquoise-glow": { "$value": "0 0 8px 1px rgba(64, 224, 208, 0.35), 0 0 30px 4px rgba(64, 224, 208, 0.08)", "$type": "shadow" },
      "turquoise-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, 0.05) 0%, transparent 100%)", "$type": "other" },
      "gold-glow": { "$value": "0 0 8px 1px rgba(255, 215, 0, 0.35), 0 0 30px 4px rgba(255, 215, 0, 0.08)", "$type": "shadow" },
      "gold-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 100%)", "$type": "other" }
    },
    "shadow": {
      "glow-fuchsia": {
        "$value": "0 0 20px rgba(247, 42, 114, 0.25)",
        "$type": "shadow"
      },
      "glow-fuchsia-soft": {
        "$value": "0 4px 40px rgba(247, 42, 114, 0.08)",
        "$type": "shadow"
      },
      "glow-blue": {
        "$value": "0 0 20px rgba(4, 78, 244, 0.25)",
        "$type": "shadow"
      },
      "glow-blue-soft": {
        "$value": "0 4px 40px rgba(4, 78, 244, 0.08)",
        "$type": "shadow"
      },
      "glow-turquoise-soft": {
        "$value": "0 4px 40px rgba(64, 224, 208, 0.06)",
        "$type": "shadow"
      },
      "md": {
        "$value": "0 4px 16px rgba(0, 0, 0, 0.5)",
        "$type": "shadow"
      }
    },
    "interactive": {
      "$description": "Component tokens for interactive UI (buttons, inputs, alerts, links)",
      "button": {
        "primary-bg": { "$value": "#044EF4", "$type": "color" },
        "primary-text": { "$value": "#ffffff", "$type": "color" },
        "primary-hover": { "$value": "#0342cf", "$type": "color" },
        "primary-active": { "$value": "#022da8", "$type": "color" },
        "secondary-bg": { "$value": "transparent", "$type": "color" },
        "secondary-text": { "$value": "#ffffff", "$type": "color" },
        "secondary-border": { "$value": "rgba(255, 255, 255, 0.15)", "$type": "color" },
        "secondary-hover": { "$value": "rgba(255, 255, 255, 0.06)", "$type": "color" },
        "ghost-text": { "$value": "#e8e8ec", "$type": "color" },
        "ghost-hover": { "$value": "rgba(255, 255, 255, 0.06)", "$type": "color" },
        "destructive-bg": { "$value": "#dc2626", "$type": "color" },
        "destructive-text": { "$value": "#ffffff", "$type": "color" },
        "destructive-hover": { "$value": "#b91c1c", "$type": "color" },
        "disabled-bg": { "$value": "#333338", "$type": "color" },
        "disabled-text": { "$value": "#73737e", "$type": "color" }
      },
      "input": {
        "bg": { "$value": "#2a2a2e", "$type": "color" },
        "text": { "$value": "#ffffff", "$type": "color" },
        "placeholder": { "$value": "#73737e", "$type": "color" },
        "border": { "$value": "rgba(255, 255, 255, 0.15)", "$type": "color" },
        "border-focus": { "$value": "#044EF4", "$type": "color" },
        "focus-ring": { "$value": "0 0 0 3px rgba(4, 78, 244, 0.3)", "$type": "shadow" },
        "error-border": { "$value": "#ef4444", "$type": "color" },
        "disabled-bg": { "$value": "#1e1e1f", "$type": "color" },
        "disabled-text": { "$value": "#73737e", "$type": "color" }
      },
      "status": {
        "success": { "$value": "#22c55e", "$type": "color", "$description": "Positive outcomes, confirmations" },
        "success-soft": { "$value": "rgba(34, 197, 94, 0.12)", "$type": "color" },
        "warning": { "$value": "#FFD700", "$type": "color", "$description": "Caution, attention needed" },
        "warning-soft": { "$value": "rgba(255, 215, 0, 0.12)", "$type": "color" },
        "error": { "$value": "#ef4444", "$type": "color", "$description": "Errors, destructive actions" },
        "error-soft": { "$value": "rgba(239, 68, 68, 0.12)", "$type": "color" },
        "info": { "$value": "#044EF4", "$type": "color", "$description": "Informational, neutral alerts" },
        "info-soft": { "$value": "rgba(4, 78, 244, 0.12)", "$type": "color" }
      },
      "link": {
        "default": { "$value": "#40E0D0", "$type": "color" },
        "hover": { "$value": "#F72A72", "$type": "color" },
        "visited": { "$value": "#a0a0aa", "$type": "color" }
      },
      "toggle": {
        "track-off": { "$value": "#333338", "$type": "color" },
        "track-on": { "$value": "#044EF4", "$type": "color" },
        "thumb": { "$value": "#ffffff", "$type": "color" }
      },
      "skeleton": {
        "base": { "$value": "#2a2a2e", "$type": "color" },
        "shimmer": { "$value": "#333338", "$type": "color" }
      },
      "tooltip": {
        "bg": { "$value": "#ffffff", "$type": "color" },
        "text": { "$value": "#1e1e1f", "$type": "color" }
      },
      "dropdown": {
        "bg": { "$value": "#2a2a2e", "$type": "color" },
        "hover": { "$value": "#333338", "$type": "color" },
        "border": { "$value": "rgba(255, 255, 255, 0.15)", "$type": "color" },
        "separator": { "$value": "rgba(255, 255, 255, 0.07)", "$type": "color" }
      },
      "table": {
        "header-bg": { "$value": "transparent", "$type": "color" },
        "header-text": { "$value": "#F72A72", "$type": "color" },
        "row-hover": { "$value": "rgba(255, 255, 255, 0.03)", "$type": "color" },
        "border": { "$value": "rgba(255, 255, 255, 0.07)", "$type": "color" }
      },
      "tab": {
        "default": { "$value": "#a0a0aa", "$type": "color" },
        "active": { "$value": "#40E0D0", "$type": "color" },
        "hover": { "$value": "#ffffff", "$type": "color" },
        "indicator": { "$value": "#044EF4", "$type": "color" }
      }
    }
  },
  "light": {
    "$description": "Light theme: warm-neutral near-white surfaces, dark text, fuchsia emphasis",
    "neutral": {
      "white": {
        "$value": "#ffffff",
        "$type": "color"
      },
      "gray-50": {
        "$value": "#F6F6F4",
        "$type": "color"
      },
      "gray-100": {
        "$value": "#ECECEA",
        "$type": "color"
      },
      "gray-200": {
        "$value": "#D4D4D2",
        "$type": "color"
      },
      "gray-300": {
        "$value": "#A8A8A6",
        "$type": "color"
      },
      "gray-400": {
        "$value": "#737371",
        "$type": "color"
      },
      "gray-500": {
        "$value": "#52524F",
        "$type": "color"
      },
      "gray-600": {
        "$value": "#3A3A38",
        "$type": "color"
      },
      "gray-700": {
        "$value": "#272725",
        "$type": "color"
      },
      "gray-800": {
        "$value": "#1A1A18",
        "$type": "color"
      },
      "black": {
        "$value": "#0D0D0C",
        "$type": "color"
      }
    },
    "background": {
      "page": {
        "$value": "#FAFBFC",
        "$type": "color"
      },
      "surface": {
        "$value": "#F3F4F6",
        "$type": "color"
      },
      "surface-raised": {
        "$value": "#E8EAF0",
        "$type": "color"
      },
      "overlay": {
        "$value": "rgba(250, 251, 252, 0.94)",
        "$type": "color"
      },
      "subtle": {
        "$value": "rgba(0, 0, 0, 0.02)",
        "$type": "color"
      }
    },
    "foreground": {
      "default": {
        "$value": "#1A1A18",
        "$type": "color"
      },
      "secondary": {
        "$value": "#3A3A38",
        "$type": "color"
      },
      "muted": {
        "$value": "#737371",
        "$type": "color"
      },
      "subtle": {
        "$value": "#A8A8A6",
        "$type": "color"
      },
      "on-color": {
        "$value": "{brand.light-bg}",
        "$type": "color"
      },
      "on-gold": {
        "$value": "#1A1A18",
        "$type": "color"
      },
      "headings": {
        "$value": "#070c2d",
        "$type": "color",
        "$description": "H1-H3 heading color. Deep navy for light mode. High contrast on cream bg."
      },
      "emphasis": {
        "$value": "{brand.fuchsia}",
        "$type": "color",
        "$description": "Inline emphasis for hero keywords and large decorative text. References brand.fuchsia."
      },
      "emphasis-small": {
        "$value": "#AB0A42",
        "$type": "color",
        "$description": "Legacy token. Deep fuchsia in light. Use role tokens instead for UI elements."
      }
    },
    "border": {
      "default": {
        "$value": "rgba(0, 0, 0, 0.1)",
        "$type": "color"
      },
      "strong": {
        "$value": "rgba(0, 0, 0, 0.18)",
        "$type": "color"
      }
    },
    "code": {
      "bg": {
        "$value": "rgba(0, 0, 0, 0.06)",
        "$type": "color"
      },
      "fg": {
        "$value": "#044EF4",
        "$type": "color",
        "$description": "Brand blue for inline code on light bg \u2014 5.15:1, recognizably brand"
      }
    },
    "badge": {
      "bg": {
        "$value": "#ECECEA",
        "$type": "color"
      },
      "border": {
        "$value": "rgba(0, 0, 0, 0.12)",
        "$type": "color"
      },
      "text-fuchsia": {
        "$value": "#BE1758",
        "$type": "color",
        "$description": "Darkened fuchsia for WCAG AA on light badge bg (#ECECEA). Contrast: ~4.8:1."
      },
      "text-blue": {
        "$value": "#0340C0",
        "$type": "color"
      },
      "text-turquoise": {
        "$value": "#0A6E64",
        "$type": "color"
      },
      "text-gold": {
        "$value": "#6B5600",
        "$type": "color"
      }
    },
    "shadow": {
      "glow-fuchsia": {
        "$value": "0 0 20px rgba(247, 42, 114, 0.15)",
        "$type": "shadow"
      },
      "glow-fuchsia-soft": {
        "$value": "0 4px 40px rgba(247, 42, 114, 0.05)",
        "$type": "shadow"
      },
      "glow-blue": {
        "$value": "0 0 20px rgba(4, 78, 244, 0.15)",
        "$type": "shadow"
      },
      "glow-blue-soft": {
        "$value": "0 4px 40px rgba(4, 78, 244, 0.05)",
        "$type": "shadow"
      },
      "glow-turquoise-soft": {
        "$value": "0 4px 40px rgba(64, 224, 208, 0.04)",
        "$type": "shadow"
      },
      "md": {
        "$value": "0 4px 16px rgba(0, 0, 0, 0.08)",
        "$type": "shadow"
      }
    },
    "callout": {
      "info-bg": { "$value": "rgba(4, 78, 244, 0.06)", "$type": "color" },
      "info-border": { "$value": "rgba(4, 78, 244, 0.18)", "$type": "color" },
      "warn-bg": { "$value": "rgba(255, 215, 0, 0.04)", "$type": "color" },
      "warn-border": { "$value": "rgba(255, 215, 0, 0.16)", "$type": "color" },
      "danger-bg": { "$value": "rgba(247, 42, 114, 0.06)", "$type": "color" },
      "danger-border": { "$value": "rgba(247, 42, 114, 0.18)", "$type": "color" },
      "success-bg": { "$value": "rgba(64, 224, 208, 0.06)", "$type": "color" },
      "success-border": { "$value": "rgba(64, 224, 208, 0.18)", "$type": "color" }
    },
    "litbar": {
      "fuchsia-glow": { "$value": "0 0 8px 1px rgba(247, 42, 114, 0.4), 0 0 30px 4px rgba(247, 42, 114, 0.12)", "$type": "shadow" },
      "fuchsia-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247, 42, 114, 0.06) 0%, transparent 100%)", "$type": "other" },
      "blue-glow": { "$value": "0 0 8px 1px rgba(4, 78, 244, 0.5), 0 0 30px 4px rgba(4, 78, 244, 0.12)", "$type": "shadow" },
      "blue-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(4, 78, 244, 0.07) 0%, transparent 100%)", "$type": "other" },
      "turquoise-glow": { "$value": "0 0 8px 1px rgba(64, 224, 208, 0.35), 0 0 30px 4px rgba(64, 224, 208, 0.08)", "$type": "shadow" },
      "turquoise-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(64, 224, 208, 0.05) 0%, transparent 100%)", "$type": "other" },
      "gold-glow": { "$value": "0 0 8px 1px rgba(255, 215, 0, 0.35), 0 0 30px 4px rgba(255, 215, 0, 0.08)", "$type": "shadow" },
      "gold-cone": { "$value": "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 100%)", "$type": "other" }
    },
    "interactive": {
      "$description": "Component tokens for interactive UI (light theme)",
      "button": {
        "primary-bg": { "$value": "#044EF4", "$type": "color" },
        "primary-text": { "$value": "#ffffff", "$type": "color" },
        "primary-hover": { "$value": "#0342cf", "$type": "color" },
        "primary-active": { "$value": "#022da8", "$type": "color" },
        "secondary-bg": { "$value": "transparent", "$type": "color" },
        "secondary-text": { "$value": "#1E1D1B", "$type": "color" },
        "secondary-border": { "$value": "rgba(0, 0, 0, 0.18)", "$type": "color" },
        "secondary-hover": { "$value": "rgba(0, 0, 0, 0.04)", "$type": "color" },
        "ghost-text": { "$value": "#3E3B37", "$type": "color" },
        "ghost-hover": { "$value": "rgba(0, 0, 0, 0.04)", "$type": "color" },
        "destructive-bg": { "$value": "#dc2626", "$type": "color" },
        "destructive-text": { "$value": "#ffffff", "$type": "color" },
        "destructive-hover": { "$value": "#b91c1c", "$type": "color" },
        "disabled-bg": { "$value": "#ECECEA", "$type": "color" },
        "disabled-text": { "$value": "#A8A8A6", "$type": "color" }
      },
      "input": {
        "bg": { "$value": "#ffffff", "$type": "color" },
        "text": { "$value": "#1A1A18", "$type": "color" },
        "placeholder": { "$value": "#A8A8A6", "$type": "color" },
        "border": { "$value": "rgba(0, 0, 0, 0.18)", "$type": "color" },
        "border-focus": { "$value": "#044EF4", "$type": "color" },
        "focus-ring": { "$value": "0 0 0 3px rgba(4, 78, 244, 0.2)", "$type": "shadow" },
        "error-border": { "$value": "#dc2626", "$type": "color" },
        "disabled-bg": { "$value": "#F6F6F4", "$type": "color" },
        "disabled-text": { "$value": "#A8A8A6", "$type": "color" }
      },
      "status": {
        "success": { "$value": "#16a34a", "$type": "color" },
        "success-soft": { "$value": "rgba(22, 163, 74, 0.08)", "$type": "color" },
        "warning": { "$value": "#a16207", "$type": "color" },
        "warning-soft": { "$value": "rgba(161, 98, 7, 0.08)", "$type": "color" },
        "error": { "$value": "#dc2626", "$type": "color" },
        "error-soft": { "$value": "rgba(220, 38, 38, 0.08)", "$type": "color" },
        "info": { "$value": "#044EF4", "$type": "color" },
        "info-soft": { "$value": "rgba(4, 78, 244, 0.08)", "$type": "color" }
      },
      "link": {
        "default": { "$value": "#044EF4", "$type": "color" },
        "hover": { "$value": "#F72A72", "$type": "color" },
        "visited": { "$value": "#737371", "$type": "color" }
      },
      "toggle": {
        "track-off": { "$value": "#D4D4D2", "$type": "color" },
        "track-on": { "$value": "#044EF4", "$type": "color" },
        "thumb": { "$value": "#ffffff", "$type": "color" }
      },
      "skeleton": {
        "base": { "$value": "#F6F6F4", "$type": "color" },
        "shimmer": { "$value": "#ECECEA", "$type": "color" }
      },
      "tooltip": {
        "bg": { "$value": "#1A1A18", "$type": "color" },
        "text": { "$value": "#FBFBFA", "$type": "color" }
      },
      "dropdown": {
        "bg": { "$value": "#ffffff", "$type": "color" },
        "hover": { "$value": "#F6F6F4", "$type": "color" },
        "border": { "$value": "rgba(0, 0, 0, 0.1)", "$type": "color" },
        "separator": { "$value": "rgba(0, 0, 0, 0.06)", "$type": "color" }
      },
      "table": {
        "header-bg": { "$value": "#044EF4", "$type": "color" },
        "header-text": { "$value": "#ffffff", "$type": "color" },
        "row-hover": { "$value": "rgba(0, 0, 0, 0.02)", "$type": "color" },
        "border": { "$value": "rgba(0, 0, 0, 0.1)", "$type": "color" }
      },
      "tab": {
        "default": { "$value": "#737371", "$type": "color" },
        "active": { "$value": "#F72A72", "$type": "color" },
        "hover": { "$value": "#1A1A18", "$type": "color" },
        "indicator": { "$value": "#044EF4", "$type": "color" }
      }
    }
  }
}