{
  "framework": "EXSA",
  "version": "1.0.0",
  "description": "All 36 CSS custom properties that drive EXSA's 5-layer cascade. Override any token in your theme file — all 49 components update instantly.",
  "core": "style.css",
  "size": "11.8 KB",

  "tokens": {
    "color": {
      "bg": {
        "name": "Page background",
        "css": "--color-bg",
        "type": "color",
        "light": "#ffffff",
        "dark": "#333333"
      },
      "bgSecondary": {
        "name": "Card / stripe / border background",
        "css": "--color-bg-secondary",
        "type": "color",
        "light": "#e9e9e9",
        "dark": "#555555"
      },
      "text": {
        "name": "Body text",
        "css": "--color-text",
        "type": "color",
        "light": "#000000",
        "dark": "#f7f7f7"
      },
      "textSecondary": {
        "name": "Muted / helper text",
        "css": "--color-text-secondary",
        "type": "color",
        "light": "#757575",
        "dark": "#aaaaaa"
      },
      "link": {
        "name": "Links, primary actions, focus rings",
        "css": "--color-link",
        "type": "color",
        "light": "#118bee",
        "dark": "#0097fc"
      },
      "secondary": {
        "name": "Accent color, visited links",
        "css": "--color-secondary",
        "type": "color",
        "light": "#920de9",
        "dark": "#e20de9"
      },
      "secondaryAccent": {
        "name": "Subtle secondary tint (background)",
        "css": "--color-secondary-accent",
        "type": "color",
        "light": "#920de90b",
        "dark": "#e20de94f",
        "note": "8-digit hex — last 2 chars are alpha"
      },
      "accent": {
        "name": "Subtle link tint (background)",
        "css": "--color-accent",
        "type": "color",
        "light": "#118bee15",
        "dark": "#0097fc4f",
        "note": "8-digit hex — last 2 chars are alpha"
      },
      "shadow": {
        "name": "Box shadow color",
        "css": "--color-shadow",
        "type": "color",
        "light": "#f4f4f4",
        "dark": "#bbbbbb20"
      },
      "scrollbar": {
        "name": "Scrollbar thumb color",
        "css": "--color-scrollbar",
        "type": "color",
        "light": "#cacae8",
        "dark": "#555555"
      },
      "table": {
        "name": "Table accent color",
        "css": "--color-table",
        "type": "color",
        "light": "#118bee",
        "dark": "#0097fc"
      },

      "success": {
        "name": "Success / green states",
        "css": "--color-success",
        "type": "color",
        "light": "#16a34a",
        "dark": "#22c55e"
      },
      "successHover": {
        "name": "Success hover state",
        "css": "--color-success-hover",
        "type": "color",
        "light": "#15803d",
        "dark": "#16a34a"
      },
      "danger": {
        "name": "Error / destructive actions",
        "css": "--color-danger",
        "type": "color",
        "light": "#dc2626",
        "dark": "#ef4444"
      },
      "dangerHover": {
        "name": "Danger hover state",
        "css": "--color-danger-hover",
        "type": "color",
        "light": "#b91c1c",
        "dark": "#dc2626"
      },
      "warning": {
        "name": "Warning / amber states",
        "css": "--color-warning",
        "type": "color",
        "light": "#d97706",
        "dark": "#f59e0b"
      },
      "warningHover": {
        "name": "Warning hover state",
        "css": "--color-warning-hover",
        "type": "color",
        "light": "#b45309",
        "dark": "#d97706"
      }
    },

    "typography": {
      "fontFamily": {
        "name": "System font stack",
        "css": "--font-family",
        "type": "fontFamily",
        "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif"
      },
      "lineHeight": {
        "name": "Base line height",
        "css": "--line-height",
        "type": "number",
        "value": 1.5,
        "unit": "unitless"
      }
    },

    "spacing": {
      "gapXs":  { "name": "Extra small gap",  "css": "--gap-xs",  "type": "dimension", "value": "0.25rem", "px": 4  },
      "gapSm":  { "name": "Small gap",         "css": "--gap-sm",  "type": "dimension", "value": "0.5rem",  "px": 8  },
      "gapMd":  { "name": "Medium gap",        "css": "--gap-md",  "type": "dimension", "value": "0.75rem", "px": 12 },
      "gap":    { "name": "Default gap",        "css": "--gap",     "type": "dimension", "value": "1rem",    "px": 16 },
      "gapLg":  { "name": "Large gap",          "css": "--gap-lg",  "type": "dimension", "value": "1.5rem",  "px": 24 },
      "gapXl":  { "name": "Extra large gap",    "css": "--gap-xl",  "type": "dimension", "value": "2rem",    "px": 32 },
      "gap2xl": { "name": "2XL gap",            "css": "--gap-2xl", "type": "dimension", "value": "3rem",    "px": 48 }
    },

    "layout": {
      "widthCard":       { "name": "Card width",           "css": "--width-card",        "type": "dimension", "value": "285px" },
      "widthCardMedium": { "name": "Medium card width",    "css": "--width-card-medium", "type": "dimension", "value": "460px" },
      "widthCardWide":   { "name": "Wide card / pre width","css": "--width-card-wide",   "type": "dimension", "value": "800px" },
      "widthContent":    { "name": "Content max-width",    "css": "--width-content",     "type": "dimension", "value": "1080px" },
      "borderRadius":    { "name": "Border radius",        "css": "--border-radius",     "type": "dimension", "value": "5px" },
      "boxShadow":       { "name": "Box shadow offset+blur","css": "--box-shadow",       "type": "shadow",    "value": "2px 2px 10px" }
    },

    "interaction": {
      "hoverBrightness":  { "name": "Hover brightness multiplier",  "css": "--hover-brightness",  "type": "number", "value": 1.2 },
      "activeBrightness": { "name": "Active brightness multiplier",  "css": "--active-brightness", "type": "number", "value": 0.85 },
      "justifyImportant": { "name": "Important content alignment",   "css": "--justify-important", "type": "string", "value": "center" },
      "justifyNormal":    { "name": "Normal content alignment",      "css": "--justify-normal",    "type": "string", "value": "start" }
    }
  },

  "exports": {
    "css": "Copy the :root block from style.css into your stylesheet.",
    "js": "const tokens = { colorLink: '#118bee', gap: '1rem', ... };",
    "figma": "Import this JSON via a Figma plugin (e.g. Design Tokens, Tokens Studio).",
    "tailwind": "module.exports = { theme: { extend: { colors: { exsa: { link: '#118bee', ... } } } } };"
  }
}