{ "$schema": "https://tr.designtokens.org/format/", "$description": "AI-Created UI design tokens generated from styles/tokens.css.", "$extensions": { "org.ai-created.ui": { "source": "styles/tokens.css", "defaultMode": "dark", "modes": { "dark": { "selector": ":root" }, "light": { "selector": "html.light" } }, "accentAttribute": "data-accent", "defaultAccent": "red", "accents": { "red": { "selector": ":root", "roles": { "dark": { "accent": "#FF4B2B", "accentHover": "#F13A1D", "actionPrimary": "#D41010", "actionPrimaryHover": "#C81010", "focus": "#FF4B2B", "onAction": "#FFFFFF" }, "light": { "accent": "#C81E1E", "accentHover": "#B80E0E", "actionPrimary": "#D41010", "actionPrimaryHover": "#C81010", "focus": "#C81E1E", "onAction": "#FFFFFF" } } }, "green": { "selector": "html[data-accent='green']", "roles": { "dark": { "accent": "#03A32C", "accentHover": "#029527", "actionPrimary": "#027B1F", "actionPrimaryHover": "#01741C", "focus": "#03A32C", "onAction": "#FFFFFF" }, "light": { "accent": "#01761D", "accentHover": "#016819", "actionPrimary": "#027B1F", "actionPrimaryHover": "#01741C", "focus": "#01761D", "onAction": "#FFFFFF" } } }, "blue": { "selector": "html[data-accent='blue']", "roles": { "dark": { "accent": "#268CFE", "accentHover": "#027FF5", "actionPrimary": "#0269CC", "actionPrimaryHover": "#0162BF", "focus": "#268CFE", "onAction": "#FFFFFF" }, "light": { "accent": "#0264C2", "accentHover": "#0158AD", "actionPrimary": "#0269CC", "actionPrimaryHover": "#0162BF", "focus": "#0264C2", "onAction": "#FFFFFF" } } }, "orange": { "selector": "html[data-accent='orange']", "roles": { "dark": { "accent": "#D97001", "accentHover": "#C86701", "actionPrimary": "#A55401", "actionPrimaryHover": "#9B4E01", "focus": "#D97001", "onAction": "#FFFFFF" }, "light": { "accent": "#9E5000", "accentHover": "#8C4601", "actionPrimary": "#A55401", "actionPrimaryHover": "#9B4E01", "focus": "#9E5000", "onAction": "#FFFFFF" } } }, "yellow": { "selector": "html[data-accent='yellow']", "roles": { "dark": { "accent": "#AC8802", "accentHover": "#9E7D01", "actionPrimary": "#826701", "actionPrimaryHover": "#7A6001", "focus": "#AC8802", "onAction": "#FFFFFF" }, "light": { "accent": "#7C6202", "accentHover": "#6E5600", "actionPrimary": "#826701", "actionPrimaryHover": "#7A6001", "focus": "#7C6202", "onAction": "#FFFFFF" } } }, "purple": { "selector": "html[data-accent='purple']", "roles": { "dark": { "accent": "#A96CFF", "accentHover": "#9D5FF1", "actionPrimary": "#8746D6", "actionPrimaryHover": "#803ECE", "focus": "#A96CFF", "onAction": "#FFFFFF" }, "light": { "accent": "#8240D0", "accentHover": "#7632C2", "actionPrimary": "#8746D6", "actionPrimaryHover": "#803ECE", "focus": "#8240D0", "onAction": "#FFFFFF" } } }, "teal": { "selector": "html[data-accent='teal']", "roles": { "dark": { "accent": "#059E91", "accentHover": "#059085", "actionPrimary": "#02776E", "actionPrimaryHover": "#017067", "focus": "#059E91", "onAction": "#FFFFFF" }, "light": { "accent": "#027268", "accentHover": "#00655C", "actionPrimary": "#02776E", "actionPrimaryHover": "#017067", "focus": "#027268", "onAction": "#FFFFFF" } } }, "pink": { "selector": "html[data-accent='pink']", "roles": { "dark": { "accent": "#F14E9C", "accentHover": "#E23F8F", "actionPrimary": "#C71F78", "actionPrimaryHover": "#BE0F71", "focus": "#F14E9C", "onAction": "#FFFFFF" }, "light": { "accent": "#C01473", "accentHover": "#AE0166", "actionPrimary": "#C71F78", "actionPrimaryHover": "#BE0F71", "focus": "#C01473", "onAction": "#FFFFFF" } } }, "magenta": { "selector": "html[data-accent='magenta']", "roles": { "dark": { "accent": "#D25CDA", "accentHover": "#C44FCD", "actionPrimary": "#AB35B3", "actionPrimaryHover": "#A32BAC", "focus": "#D25CDA", "onAction": "#FFFFFF" }, "light": { "accent": "#A52EAE", "accentHover": "#971CA0", "actionPrimary": "#AB35B3", "actionPrimaryHover": "#A32BAC", "focus": "#A52EAE", "onAction": "#FFFFFF" } } } } } }, "ref": { "neutral": { "50": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.960784, 0.968627, 0.980392 ], "alpha": 1 }, "$description": "Theme-invariant neutral 50 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-neutral-50", "cssValues": { "dark": "#F5F7FA" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.113725, 0.113725, 0.121569 ], "alpha": 1 }, "$description": "Theme-invariant neutral 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-neutral-800", "cssValues": { "dark": "#1D1D1F" } } } }, "850": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.078431, 0.086275, 0.101961 ], "alpha": 1 }, "$description": "Theme-invariant neutral 850 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-neutral-850", "cssValues": { "dark": "#14161A" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.062745, 0.066667, 0.07451 ], "alpha": 1 }, "$description": "Theme-invariant neutral 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-neutral-900", "cssValues": { "dark": "#101113" } } } }, "950": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.039216, 0.039216, 0.043137 ], "alpha": 1 }, "$description": "Theme-invariant neutral 950 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-neutral-950", "cssValues": { "dark": "#0A0A0B" } } } } }, "warm": { "neutral": { "50": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.968627, 0.952941, 0.92549 ], "alpha": 1 }, "$description": "Theme-invariant warm neutral 50 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-warm-neutral-50", "cssValues": { "dark": "#F7F3EC" } } } }, "100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.94902, 0.929412, 0.901961 ], "alpha": 1 }, "$description": "Theme-invariant warm neutral 100 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-warm-neutral-100", "cssValues": { "dark": "#F2EDE6" } } } }, "200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.917647, 0.894118, 0.858824 ], "alpha": 1 }, "$description": "Theme-invariant warm neutral 200 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-warm-neutral-200", "cssValues": { "dark": "#EAE4DB" } } } } } }, "red": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.419608, 0.419608 ], "alpha": 1 }, "$description": "Theme-invariant red 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-400", "cssValues": { "dark": "#FF6B6B" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.294118, 0.168627 ], "alpha": 1 }, "$description": "Theme-invariant red 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-500", "cssValues": { "dark": "#FF4B2B" } } } }, "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.945098, 0.227451, 0.113725 ], "alpha": 1 }, "$description": "Theme-invariant red 600 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-600", "cssValues": { "dark": "#F13A1D" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.870588, 0.227451, 0.121569 ], "alpha": 1 }, "$description": "Theme-invariant red 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-700", "cssValues": { "dark": "#DE3A1F" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.831373, 0.062745, 0.062745 ], "alpha": 1 }, "$description": "Theme-invariant red 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-750", "cssValues": { "dark": "#D41010" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.788235, 0.172549, 0.094118 ], "alpha": 1 }, "$description": "Theme-invariant red 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-800", "cssValues": { "dark": "#C92C18" } } } }, "850": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.784314, 0.117647, 0.117647 ], "alpha": 1 }, "$description": "Theme-invariant red 850 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-850", "cssValues": { "dark": "#C81E1E" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.721569, 0.054902, 0.054902 ], "alpha": 1 }, "$description": "Theme-invariant red 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-red-900", "cssValues": { "dark": "#B80E0E" } } } } }, "danger": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.419608, 0.419608 ], "alpha": 1 }, "$description": "Theme-invariant danger 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-danger-400", "cssValues": { "dark": "#FF6B6B" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.72549, 0.109804, 0.109804 ], "alpha": 1 }, "$description": "Theme-invariant danger 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-danger-700", "cssValues": { "dark": "#B91C1C" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.623529, 0.070588, 0.223529 ], "alpha": 1 }, "$description": "Theme-invariant danger 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-danger-800", "cssValues": { "dark": "#9F1239" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.533333, 0.07451, 0.215686 ], "alpha": 1 }, "$description": "Theme-invariant danger 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-danger-900", "cssValues": { "dark": "#881337" } } } } }, "green": { "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.333333, 0.827451, 0.603922 ], "alpha": 1 }, "$description": "Theme-invariant green 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-green-500", "cssValues": { "dark": "#55D39A" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.058824, 0.623529, 0.431373 ], "alpha": 1 }, "$description": "Theme-invariant green 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-green-700", "cssValues": { "dark": "#0F9F6E" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.023529, 0.372549, 0.27451 ], "alpha": 1 }, "$description": "Theme-invariant green 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-green-800", "cssValues": { "dark": "#065F46" } } } } }, "yellow": { "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.94902, 0.721569, 0.294118 ], "alpha": 1 }, "$description": "Theme-invariant yellow 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-yellow-500", "cssValues": { "dark": "#F2B84B" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.658824, 0.407843, 0 ], "alpha": 1 }, "$description": "Theme-invariant yellow 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-yellow-700", "cssValues": { "dark": "#A86800" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.443137, 0.247059, 0.070588 ], "alpha": 1 }, "$description": "Theme-invariant yellow 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-yellow-800", "cssValues": { "dark": "#713F12" } } } } }, "blue": { "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.419608, 0.72549, 1 ], "alpha": 1 }, "$description": "Theme-invariant blue 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-blue-500", "cssValues": { "dark": "#6BB9FF" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.121569, 0.435294, 0.921569 ], "alpha": 1 }, "$description": "Theme-invariant blue 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-blue-700", "cssValues": { "dark": "#1F6FEB" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.117647, 0.25098, 0.686275 ], "alpha": 1 }, "$description": "Theme-invariant blue 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-blue-800", "cssValues": { "dark": "#1E40AF" } } } } }, "white": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 1 }, "$description": "Theme-invariant white reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-white", "cssValues": { "dark": "#FFFFFF" } } } }, "accent": { "red": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.294118, 0.168627 ], "alpha": 1 }, "$description": "Theme-invariant accent red 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-400", "cssValues": { "dark": "#FF4B2B" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.945098, 0.227451, 0.113725 ], "alpha": 1 }, "$description": "Theme-invariant accent red 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-500", "cssValues": { "dark": "#F13A1D" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.831373, 0.062745, 0.062745 ], "alpha": 1 }, "$description": "Theme-invariant accent red 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-700", "cssValues": { "dark": "#D41010" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.784314, 0.117647, 0.117647 ], "alpha": 1 }, "$description": "Theme-invariant accent red 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-750", "cssValues": { "dark": "#C81E1E" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.784314, 0.062745, 0.062745 ], "alpha": 1 }, "$description": "Theme-invariant accent red 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-800", "cssValues": { "dark": "#C81010" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.721569, 0.054902, 0.054902 ], "alpha": 1 }, "$description": "Theme-invariant accent red 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-red-900", "cssValues": { "dark": "#B80E0E" } } } } }, "green": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.011765, 0.639216, 0.172549 ], "alpha": 1 }, "$description": "Theme-invariant accent green 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-400", "cssValues": { "dark": "#03A32C" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.584314, 0.152941 ], "alpha": 1 }, "$description": "Theme-invariant accent green 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-500", "cssValues": { "dark": "#029527" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.482353, 0.121569 ], "alpha": 1 }, "$description": "Theme-invariant accent green 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-700", "cssValues": { "dark": "#027B1F" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.462745, 0.113725 ], "alpha": 1 }, "$description": "Theme-invariant accent green 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-750", "cssValues": { "dark": "#01761D" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.454902, 0.109804 ], "alpha": 1 }, "$description": "Theme-invariant accent green 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-800", "cssValues": { "dark": "#01741C" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.407843, 0.098039 ], "alpha": 1 }, "$description": "Theme-invariant accent green 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-green-900", "cssValues": { "dark": "#016819" } } } } }, "blue": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.14902, 0.54902, 0.996078 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-400", "cssValues": { "dark": "#268CFE" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.498039, 0.960784 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-500", "cssValues": { "dark": "#027FF5" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.411765, 0.8 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-700", "cssValues": { "dark": "#0269CC" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.392157, 0.760784 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-750", "cssValues": { "dark": "#0264C2" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.384314, 0.74902 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-800", "cssValues": { "dark": "#0162BF" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.345098, 0.678431 ], "alpha": 1 }, "$description": "Theme-invariant accent blue 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-blue-900", "cssValues": { "dark": "#0158AD" } } } } }, "orange": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.85098, 0.439216, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-400", "cssValues": { "dark": "#D97001" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.784314, 0.403922, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-500", "cssValues": { "dark": "#C86701" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.647059, 0.329412, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-700", "cssValues": { "dark": "#A55401" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.619608, 0.313725, 0 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-750", "cssValues": { "dark": "#9E5000" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.607843, 0.305882, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-800", "cssValues": { "dark": "#9B4E01" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.54902, 0.27451, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent orange 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-orange-900", "cssValues": { "dark": "#8C4601" } } } } }, "yellow": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.67451, 0.533333, 0.007843 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-400", "cssValues": { "dark": "#AC8802" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.619608, 0.490196, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-500", "cssValues": { "dark": "#9E7D01" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.509804, 0.403922, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-700", "cssValues": { "dark": "#826701" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.486275, 0.384314, 0.007843 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-750", "cssValues": { "dark": "#7C6202" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.478431, 0.376471, 0.003922 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-800", "cssValues": { "dark": "#7A6001" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.431373, 0.337255, 0 ], "alpha": 1 }, "$description": "Theme-invariant accent yellow 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-yellow-900", "cssValues": { "dark": "#6E5600" } } } } }, "purple": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.662745, 0.423529, 1 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-400", "cssValues": { "dark": "#A96CFF" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.615686, 0.372549, 0.945098 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-500", "cssValues": { "dark": "#9D5FF1" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.529412, 0.27451, 0.839216 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-700", "cssValues": { "dark": "#8746D6" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.509804, 0.25098, 0.815686 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-750", "cssValues": { "dark": "#8240D0" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.501961, 0.243137, 0.807843 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-800", "cssValues": { "dark": "#803ECE" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.462745, 0.196078, 0.760784 ], "alpha": 1 }, "$description": "Theme-invariant accent purple 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-purple-900", "cssValues": { "dark": "#7632C2" } } } } }, "teal": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.019608, 0.619608, 0.568627 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-400", "cssValues": { "dark": "#059E91" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.019608, 0.564706, 0.521569 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-500", "cssValues": { "dark": "#059085" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.466667, 0.431373 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-700", "cssValues": { "dark": "#02776E" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.007843, 0.447059, 0.407843 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-750", "cssValues": { "dark": "#027268" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.003922, 0.439216, 0.403922 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-800", "cssValues": { "dark": "#017067" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0.396078, 0.360784 ], "alpha": 1 }, "$description": "Theme-invariant accent teal 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-teal-900", "cssValues": { "dark": "#00655C" } } } } }, "pink": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.945098, 0.305882, 0.611765 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-400", "cssValues": { "dark": "#F14E9C" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.886275, 0.247059, 0.560784 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-500", "cssValues": { "dark": "#E23F8F" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.780392, 0.121569, 0.470588 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-700", "cssValues": { "dark": "#C71F78" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.752941, 0.078431, 0.45098 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-750", "cssValues": { "dark": "#C01473" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.745098, 0.058824, 0.443137 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-800", "cssValues": { "dark": "#BE0F71" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.682353, 0.003922, 0.4 ], "alpha": 1 }, "$description": "Theme-invariant accent pink 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-pink-900", "cssValues": { "dark": "#AE0166" } } } } }, "magenta": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.823529, 0.360784, 0.854902 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-400", "cssValues": { "dark": "#D25CDA" } } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.768627, 0.309804, 0.803922 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-500", "cssValues": { "dark": "#C44FCD" } } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.670588, 0.207843, 0.701961 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-700", "cssValues": { "dark": "#AB35B3" } } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.647059, 0.180392, 0.682353 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-750", "cssValues": { "dark": "#A52EAE" } } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.639216, 0.168627, 0.67451 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-800", "cssValues": { "dark": "#A32BAC" } } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.592157, 0.109804, 0.627451 ], "alpha": 1 }, "$description": "Theme-invariant accent magenta 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-magenta-900", "cssValues": { "dark": "#971CA0" } } } } }, "current": { "400": { "$type": "color", "$value": "{ref.accent.red.400}", "$description": "Theme-invariant accent current 400 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-400", "cssValues": { "dark": "var(--ref-accent-red-400)" } } } }, "500": { "$type": "color", "$value": "{ref.accent.red.500}", "$description": "Theme-invariant accent current 500 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-500", "cssValues": { "dark": "var(--ref-accent-red-500)" } } } }, "700": { "$type": "color", "$value": "{ref.accent.red.700}", "$description": "Theme-invariant accent current 700 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-700", "cssValues": { "dark": "var(--ref-accent-red-700)" } } } }, "750": { "$type": "color", "$value": "{ref.accent.red.750}", "$description": "Theme-invariant accent current 750 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-750", "cssValues": { "dark": "var(--ref-accent-red-750)" } } } }, "800": { "$type": "color", "$value": "{ref.accent.red.800}", "$description": "Theme-invariant accent current 800 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-800", "cssValues": { "dark": "var(--ref-accent-red-800)" } } } }, "900": { "$type": "color", "$value": "{ref.accent.red.900}", "$description": "Theme-invariant accent current 900 reference color.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--ref-accent-current-900", "cssValues": { "dark": "var(--ref-accent-red-900)" } } } } } } }, "radius": { "sm": { "$type": "dimension", "$value": { "value": 4, "unit": "px" }, "$description": "Small corner radius.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--radius-sm", "cssValues": { "dark": "4px" } } } }, "md": { "$type": "dimension", "$value": { "value": 6, "unit": "px" }, "$description": "Medium corner radius.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--radius-md", "cssValues": { "dark": "6px" } } } }, "lg": { "$type": "dimension", "$value": { "value": 10, "unit": "px" }, "$description": "Large corner radius.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--radius-lg", "cssValues": { "dark": "10px" } } } } }, "layout": { "container": { "max": { "$type": "dimension", "$value": { "value": 1400, "unit": "px" }, "$description": "Container max layout measurement.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layout-container-max", "cssValues": { "dark": "1400px" } } } } }, "gutter": { "$root": { "$type": "dimension", "$value": { "value": 2, "unit": "vw" }, "$description": "Gutter layout measurement.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layout-gutter", "cssValues": { "dark": "2vw" } } } }, "mobile": { "$type": "dimension", "$value": { "value": 6, "unit": "vw" }, "$description": "Gutter mobile layout measurement.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layout-gutter-mobile", "cssValues": { "dark": "6vw" } } } } } }, "motion": { "fast": { "$type": "duration", "$value": { "value": 0.2, "unit": "s" }, "$description": "Fast interface motion duration.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--motion-fast", "cssValues": { "dark": "0.2s" } } } }, "base": { "$type": "duration", "$value": { "value": 0.3, "unit": "s" }, "$description": "Base interface motion duration.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--motion-base", "cssValues": { "dark": "0.3s" } } } }, "slow": { "$type": "duration", "$value": { "value": 0.5, "unit": "s" }, "$description": "Slow interface motion duration.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--motion-slow", "cssValues": { "dark": "0.5s" } } } } }, "shadow": { "elevation": { "low": { "$type": "string", "$value": "0 1px 2px rgba(0,0,0,0.48)", "$description": "Design token exported from --shadow-elevation-low.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--shadow-elevation-low", "cssValues": { "dark": "0 1px 2px rgba(0,0,0,0.48)", "light": "0 1px 2px rgba(29,29,31,0.16)" }, "modeValues": { "light": "0 1px 2px rgba(29,29,31,0.16)" } } } }, "medium": { "$type": "string", "$value": "0 12px 32px rgba(0,0,0,0.50)", "$description": "Design token exported from --shadow-elevation-medium.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--shadow-elevation-medium", "cssValues": { "dark": "0 12px 32px rgba(0,0,0,0.50)", "light": "0 12px 32px rgba(29,29,31,0.18)" }, "modeValues": { "light": "0 12px 32px rgba(29,29,31,0.18)" } } } }, "high": { "$type": "string", "$value": "0 24px 72px rgba(0,0,0,0.60)", "$description": "Design token exported from --shadow-elevation-high.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--shadow-elevation-high", "cssValues": { "dark": "0 24px 72px rgba(0,0,0,0.60)", "light": "0 24px 72px rgba(29,29,31,0.24)" }, "modeValues": { "light": "0 24px 72px rgba(29,29,31,0.24)" } } } } } }, "layer": { "dropdown": { "$type": "number", "$value": 40, "$description": "Design token exported from --layer-dropdown.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layer-dropdown", "cssValues": { "dark": "40" } } } }, "tooltip": { "$type": "number", "$value": 60, "$description": "Design token exported from --layer-tooltip.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layer-tooltip", "cssValues": { "dark": "60" } } } }, "modal": { "$type": "number", "$value": 80, "$description": "Design token exported from --layer-modal.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--layer-modal", "cssValues": { "dark": "80" } } } } }, "color": { "bg": { "$type": "color", "$value": "{ref.neutral.950}", "$description": "Semantic color for background.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-bg", "cssValues": { "dark": "var(--ref-neutral-950)", "light": "var(--ref-warm-neutral-100)" }, "modeValues": { "light": "{ref.warm.neutral.100}" } } } }, "surface": { "$type": "color", "$value": "{ref.neutral.900}", "$description": "Semantic color for surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-surface", "cssValues": { "dark": "var(--ref-neutral-900)", "light": "var(--ref-warm-neutral-50)" }, "modeValues": { "light": "{ref.warm.neutral.50}" } } } }, "surface2": { "$type": "color", "$value": "{ref.neutral.850}", "$description": "Semantic color for secondary surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-surface2", "cssValues": { "dark": "var(--ref-neutral-850)", "light": "var(--ref-warm-neutral-200)" }, "modeValues": { "light": "{ref.warm.neutral.200}" } } } }, "border": { "$root": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.1 }, "$description": "Semantic color for border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-border", "cssValues": { "dark": "rgba(255,255,255,0.10)", "light": "rgba(0,0,0,0.10)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.1 } } } } }, "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.16 }, "$description": "Semantic color for border strong.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-border-strong", "cssValues": { "dark": "rgba(255,255,255,0.16)", "light": "rgba(0,0,0,0.18)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.18 } } } } } }, "control": { "border": { "$root": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.36 }, "$description": "Semantic color for control border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-control-border", "cssValues": { "dark": "rgba(255,255,255,0.36)", "light": "rgba(0,0,0,0.42)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.42 } } } } }, "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.5 }, "$description": "Semantic color for control border strong.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-control-border-strong", "cssValues": { "dark": "rgba(255,255,255,0.50)", "light": "rgba(0,0,0,0.54)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.54 } } } } } } }, "text": { "$type": "color", "$value": "{ref.neutral.50}", "$description": "Semantic color for text.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-text", "cssValues": { "dark": "var(--ref-neutral-50)", "light": "var(--ref-neutral-800)" }, "modeValues": { "light": "{ref.neutral.800}" } } } }, "text2": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.960784, 0.968627, 0.980392 ], "alpha": 0.72 }, "$description": "Semantic color for secondary text.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-text2", "cssValues": { "dark": "rgba(245,247,250,0.72)", "light": "rgba(29,29,31,0.72)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.113725, 0.113725, 0.121569 ], "alpha": 0.72 } } } } }, "text3": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.960784, 0.968627, 0.980392 ], "alpha": 0.62 }, "$description": "Semantic color for tertiary text.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-text3", "cssValues": { "dark": "rgba(245,247,250,0.62)", "light": "rgba(29,29,31,0.68)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.113725, 0.113725, 0.121569 ], "alpha": 0.68 } } } } }, "accent": { "$root": { "$type": "color", "$value": "{ref.accent.current.400}", "$description": "Semantic color for accent.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-accent", "cssValues": { "dark": "var(--ref-accent-current-400)", "light": "var(--ref-accent-current-750)" }, "modeValues": { "light": "{ref.accent.current.750}" } } } }, "muted": { "$type": "color", "$value": "color-mix(in srgb, var(--ref-accent-current-400) 80%, var(--color-text))", "$description": "Semantic color for accent muted.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-accent-muted", "cssValues": { "dark": "color-mix(in srgb, var(--ref-accent-current-400) 80%, var(--color-text))", "light": "color-mix(in srgb, var(--ref-accent-current-750) 80%, var(--color-text))" }, "modeValues": { "light": "color-mix(in srgb, var(--ref-accent-current-750) 80%, var(--color-text))" } } } }, "hover": { "$type": "color", "$value": "{ref.accent.current.500}", "$description": "Semantic color for accent hover.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-accent-hover", "cssValues": { "dark": "var(--ref-accent-current-500)", "light": "var(--ref-accent-current-900)" }, "modeValues": { "light": "{ref.accent.current.900}" } } } }, "border": { "$type": "color", "$value": "color-mix(in srgb, var(--ref-accent-current-400) 80%, transparent)", "$description": "Semantic color for accent border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-accent-border", "cssValues": { "dark": "color-mix(in srgb, var(--ref-accent-current-400) 80%, transparent)", "light": "color-mix(in srgb, var(--ref-accent-current-750) 80%, transparent)" }, "modeValues": { "light": "color-mix(in srgb, var(--ref-accent-current-750) 80%, transparent)" } } } } }, "action": { "primary": { "$root": { "$type": "color", "$value": "{ref.accent.current.700}", "$description": "Semantic color for action primary.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-action-primary", "cssValues": { "dark": "var(--ref-accent-current-700)" } } } }, "hover": { "$type": "color", "$value": "{ref.accent.current.800}", "$description": "Semantic color for action primary hover.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-action-primary-hover", "cssValues": { "dark": "var(--ref-accent-current-800)" } } } } }, "destructive": { "$root": { "$type": "color", "$value": "{ref.danger.700}", "$description": "Semantic color for action destructive.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-action-destructive", "cssValues": { "dark": "var(--ref-danger-700)", "light": "var(--ref-danger-800)" }, "modeValues": { "light": "{ref.danger.800}" } } } }, "hover": { "$type": "color", "$value": "{ref.danger.800}", "$description": "Semantic color for action destructive hover.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-action-destructive-hover", "cssValues": { "dark": "var(--ref-danger-800)", "light": "var(--ref-danger-900)" }, "modeValues": { "light": "{ref.danger.900}" } } } } } }, "on": { "action": { "$type": "color", "$value": "{ref.white}", "$description": "Semantic color for on action.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-on-action", "cssValues": { "dark": "var(--ref-white)" } } } } }, "red": { "$root": { "$type": "color", "$value": "{color.accent.$root}", "$description": "Semantic color for red.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red", "cssValues": { "dark": "var(--color-accent)" } } } }, "hover": { "$type": "color", "$value": "{color.accent.hover}", "$description": "Semantic color for red hover.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red-hover", "cssValues": { "dark": "var(--color-accent-hover)" } } } }, "solid": { "$root": { "$type": "color", "$value": "{color.action.primary.$root}", "$description": "Semantic color for red solid.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red-solid", "cssValues": { "dark": "var(--color-action-primary)" } } } }, "hover": { "$type": "color", "$value": "{color.action.primary.hover}", "$description": "Semantic color for red solid hover.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red-solid-hover", "cssValues": { "dark": "var(--color-action-primary-hover)" } } } } }, "border": { "$type": "color", "$value": "{color.accent.border}", "$description": "Semantic color for red border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red-border", "cssValues": { "dark": "var(--color-accent-border)" } } } } }, "red2": { "$type": "color", "$value": "{color.accent.muted}", "$description": "Semantic color for muted red.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-red2", "cssValues": { "dark": "var(--color-accent-muted)" } } } }, "overlay": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.6 }, "$description": "Semantic color for overlay.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-overlay", "cssValues": { "dark": "rgba(0,0,0,0.60)", "light": "rgba(0,0,0,0.45)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.45 } } } } }, "highlight": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.05 }, "$description": "Semantic color for highlight.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-highlight", "cssValues": { "dark": "rgba(255,255,255,0.05)", "light": "rgba(0,0,0,0.04)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.04 } } } } }, "focus": { "$type": "color", "$value": "{ref.accent.current.400}", "$description": "Semantic color for focus.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-focus", "cssValues": { "dark": "var(--ref-accent-current-400)", "light": "var(--ref-accent-current-750)" }, "modeValues": { "light": "{ref.accent.current.750}" } } } }, "selection": { "$type": "color", "$value": "color-mix(in srgb, var(--ref-accent-current-400) 24%, transparent)", "$description": "Semantic color for selection.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-selection", "cssValues": { "dark": "color-mix(in srgb, var(--ref-accent-current-400) 24%, transparent)", "light": "color-mix(in srgb, var(--ref-accent-current-750) 20%, transparent)" }, "modeValues": { "light": "color-mix(in srgb, var(--ref-accent-current-750) 20%, transparent)" } } } }, "success": { "$root": { "$type": "color", "$value": "{ref.green.500}", "$description": "Semantic color for success.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-success", "cssValues": { "dark": "var(--ref-green-500)", "light": "var(--ref-green-800)" }, "modeValues": { "light": "{ref.green.800}" } } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.333333, 0.827451, 0.603922 ], "alpha": 0.12 }, "$description": "Semantic color for success surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-success-surface", "cssValues": { "dark": "rgba(85,211,154,0.12)", "light": "rgba(6,95,70,0.08)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.023529, 0.372549, 0.27451 ], "alpha": 0.08 } } } } }, "border": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.333333, 0.827451, 0.603922 ], "alpha": 0.32 }, "$description": "Semantic color for success border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-success-border", "cssValues": { "dark": "rgba(85,211,154,0.32)", "light": "rgba(6,95,70,0.28)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.023529, 0.372549, 0.27451 ], "alpha": 0.28 } } } } } }, "warning": { "$root": { "$type": "color", "$value": "{ref.yellow.500}", "$description": "Semantic color for warning.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-warning", "cssValues": { "dark": "var(--ref-yellow-500)", "light": "var(--ref-yellow-800)" }, "modeValues": { "light": "{ref.yellow.800}" } } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.94902, 0.721569, 0.294118 ], "alpha": 0.12 }, "$description": "Semantic color for warning surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-warning-surface", "cssValues": { "dark": "rgba(242,184,75,0.12)", "light": "rgba(113,63,18,0.08)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.443137, 0.247059, 0.070588 ], "alpha": 0.08 } } } } }, "border": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.94902, 0.721569, 0.294118 ], "alpha": 0.3 }, "$description": "Semantic color for warning border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-warning-border", "cssValues": { "dark": "rgba(242,184,75,0.3)", "light": "rgba(113,63,18,0.28)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.443137, 0.247059, 0.070588 ], "alpha": 0.28 } } } } } }, "info": { "$root": { "$type": "color", "$value": "{ref.blue.500}", "$description": "Semantic color for info.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-info", "cssValues": { "dark": "var(--ref-blue-500)", "light": "var(--ref-blue-800)" }, "modeValues": { "light": "{ref.blue.800}" } } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.419608, 0.72549, 1 ], "alpha": 0.12 }, "$description": "Semantic color for info surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-info-surface", "cssValues": { "dark": "rgba(107,185,255,0.12)", "light": "rgba(30,64,175,0.08)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.117647, 0.25098, 0.686275 ], "alpha": 0.08 } } } } }, "border": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.419608, 0.72549, 1 ], "alpha": 0.32 }, "$description": "Semantic color for info border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-info-border", "cssValues": { "dark": "rgba(107,185,255,0.32)", "light": "rgba(30,64,175,0.28)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.117647, 0.25098, 0.686275 ], "alpha": 0.28 } } } } } }, "error": { "$root": { "$type": "color", "$value": "{ref.danger.400}", "$description": "Semantic color for error.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-error", "cssValues": { "dark": "var(--ref-danger-400)", "light": "var(--ref-danger-800)" }, "modeValues": { "light": "{ref.danger.800}" } } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.419608, 0.419608 ], "alpha": 0.12 }, "$description": "Semantic color for error surface.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-error-surface", "cssValues": { "dark": "rgba(255,107,107,0.12)", "light": "rgba(159,18,57,0.08)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.623529, 0.070588, 0.223529 ], "alpha": 0.08 } } } } }, "border": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 0.419608, 0.419608 ], "alpha": 0.32 }, "$description": "Semantic color for error border.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--color-error-border", "cssValues": { "dark": "rgba(255,107,107,0.32)", "light": "rgba(159,18,57,0.28)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.623529, 0.070588, 0.223529 ], "alpha": 0.28 } } } } } } }, "hero": { "overlay": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.6 }, "$description": "Hero overlay default value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-overlay-default", "cssValues": { "dark": "rgba(0,0,0,0.60)", "light": "rgba(242,237,230,0.80)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.94902, 0.929412, 0.901961 ], "alpha": 0.8 } } } } }, "strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "alpha": 0.8 }, "$description": "Hero overlay strong value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-overlay-strong", "cssValues": { "dark": "rgba(0,0,0,0.80)", "light": "rgba(242,237,230,0.70)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.94902, 0.929412, 0.901961 ], "alpha": 0.7 } } } } }, "soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.039216, 0.039216, 0.043137 ], "alpha": 0.6 }, "$description": "Hero overlay soft value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-overlay-soft", "cssValues": { "dark": "rgba(10,10,11,0.60)", "light": "rgba(242,237,230,0.50)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.94902, 0.929412, 0.901961 ], "alpha": 0.5 } } } } } }, "text": { "primary": { "$type": "color", "$value": "{ref.white}", "$description": "Hero text primary value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-text-primary", "cssValues": { "dark": "var(--ref-white)", "light": "var(--ref-neutral-800)" }, "modeValues": { "light": "{ref.neutral.800}" } } } }, "muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.8 }, "$description": "Hero text muted value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-text-muted", "cssValues": { "dark": "rgba(255,255,255,0.80)", "light": "rgba(29,29,31,0.72)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.113725, 0.113725, 0.121569 ], "alpha": 0.72 } } } } }, "dim": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "alpha": 0.6 }, "$description": "Hero text dim value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-text-dim", "cssValues": { "dark": "rgba(255,255,255,0.60)", "light": "rgba(29,29,31,0.56)" }, "modeValues": { "light": { "colorSpace": "srgb", "components": [ 0.113725, 0.113725, 0.121569 ], "alpha": 0.56 } } } } } }, "image": { "light": { "opacity": { "$type": "number", "$value": 0, "$description": "Hero image light opacity value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-image-light-opacity", "cssValues": { "dark": "0", "light": "1" }, "modeValues": { "light": 1 } } } } }, "dark": { "opacity": { "$type": "number", "$value": 1, "$description": "Hero image dark opacity value.", "$extensions": { "org.ai-created.ui": { "cssVariable": "--hero-image-dark-opacity", "cssValues": { "dark": "1", "light": "0" }, "modeValues": { "light": 0 } } } } } } } }