{
  "framework": "EXSA",
  "version": "1.0.0-rc.1",
  "description": "Design-token export: 76 core tokens (of the 94 defined in exsa.css) plus the z-index scale and component/layout tokens. Override any token in your theme file, or restyle every surface with a skin — all components update instantly. Generated by tools/build-tokens.mjs from manifest.json + the CSS files — do not edit by hand.",
  "core": "dist/exsa.css",
  "size": "34 KB",
  "tokens": {
    "color": {
      "bg": {
        "name": "Page background",
        "css": "--color-bg",
        "type": "color",
        "light": "#fff",
        "dark": "#333"
      },
      "bgSecondary": {
        "name": "Card / stripe / border background",
        "css": "--color-bg-secondary",
        "type": "color",
        "light": "#e9e9e9",
        "dark": "#555"
      },
      "text": {
        "name": "Body text",
        "css": "--color-text",
        "type": "color",
        "light": "#000",
        "dark": "#f7f7f7"
      },
      "textSecondary": {
        "name": "Muted / helper text",
        "css": "--color-text-secondary",
        "type": "color",
        "light": "#757575",
        "dark": "#aaa"
      },
      "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",
        "note": "Defined as color-mix(in srgb, var(--color-text) 25%, transparent) — resolved values shown."
      },
      "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"
      },
      "buttonText": {
        "name": "Button text color",
        "css": "--color-button-text",
        "type": "color",
        "value": "#fff"
      },
      "border": {
        "name": "Default border color",
        "css": "--color-border",
        "type": "color",
        "light": "#e9e9e9",
        "dark": "#555"
      },
      "overlay": {
        "name": "Modal / overlay backdrop",
        "css": "--color-overlay",
        "type": "color",
        "light": "rgba(0",
        "dark": "0,0,.5),rgba(0,0,0,.65)"
      },
      "buttonTextInverse": {
        "name": "Button text on dark backgrounds",
        "css": "--color-button-text-inverse",
        "type": "color",
        "light": "#000",
        "dark": "#eee"
      }
    },
    "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"
      },
      "fontFamilyMono": {
        "name": "Monospace font stack",
        "css": "--font-family-mono",
        "type": "fontFamily",
        "value": "'SF Mono','Cascadia Code','Fira Code',Consolas,monospace"
      },
      "fontFamilyHeading": {
        "name": "Heading font family (premium: custom font; free: same as body)",
        "css": "--font-family-heading",
        "type": "fontFamily",
        "value": "var(--font-family)",
        "note": "Falls back to --font-family in free tier. Premium fonts override this token."
      },
      "fontWeightNormal": {
        "name": "Normal font weight",
        "css": "--font-weight-normal",
        "type": "number",
        "value": 400
      },
      "fontWeightBold": {
        "name": "Bold font weight",
        "css": "--font-weight-bold",
        "type": "number",
        "value": 700
      },
      "fontWeightHeavy": {
        "name": "Heavy font weight",
        "css": "--font-weight-heavy",
        "type": "number",
        "value": 800
      },
      "fontSizeXs": {
        "name": "Extra small font size",
        "css": "--font-size-xs",
        "type": "dimension",
        "value": ".7rem",
        "px": 11
      },
      "fontSizeSm": {
        "name": "Small font size",
        "css": "--font-size-sm",
        "type": "dimension",
        "value": ".78rem",
        "px": 12
      },
      "fontSizeBase": {
        "name": "Base font size",
        "css": "--font-size-base",
        "type": "dimension",
        "value": ".88rem",
        "px": 14
      },
      "fontSizeMd": {
        "name": "Medium font size",
        "css": "--font-size-md",
        "type": "dimension",
        "value": ".95rem",
        "px": 15
      },
      "fontSizeLg": {
        "name": "Large font size",
        "css": "--font-size-lg",
        "type": "dimension",
        "value": "1.08rem",
        "px": 17
      },
      "fontSizeXl": {
        "name": "Extra large font size",
        "css": "--font-size-xl",
        "type": "dimension",
        "value": "1.3rem",
        "px": 21
      },
      "fontSize2xl": {
        "name": "2XL font size",
        "css": "--font-size-2xl",
        "type": "dimension",
        "value": "1.8rem",
        "px": 29
      },
      "lineHeight": {
        "name": "Base line height",
        "css": "--line-height",
        "type": "number",
        "value": 1.5,
        "unit": "unitless"
      }
    },
    "breakpoints": {
      "bpSm": {
        "name": "Small breakpoint (max-width)",
        "css": "--bp-sm",
        "type": "dimension",
        "value": "575px",
        "note": "CSS @media queries can't use custom properties yet. Use EXSA.bp.up('sm') / EXSA.bp.down('sm') from js/exsa-core.js for JS-driven responsive logic."
      },
      "bpMd": {
        "name": "Medium breakpoint (min-width)",
        "css": "--bp-md",
        "type": "dimension",
        "value": "768px"
      },
      "bpLg": {
        "name": "Large breakpoint (min-width)",
        "css": "--bp-lg",
        "type": "dimension",
        "value": "1024px"
      },
      "bpXl": {
        "name": "Extra large breakpoint (min-width)",
        "css": "--bp-xl",
        "type": "dimension",
        "value": "1280px"
      },
      "bpXxl": {
        "name": "2XL breakpoint (min-width)",
        "css": "--bp-xxl",
        "type": "dimension",
        "value": "1440px"
      }
    },
    "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"
      },
      "scrollMarginTop": {
        "name": "Anchor scroll margin for fixed topbars",
        "css": "--scroll-margin-top",
        "type": "dimension",
        "value": "80px"
      },
      "cardPadding": {
        "name": "Card inner padding (full-bleed sync)",
        "css": "--card-padding",
        "type": "dimension",
        "value": "var(--gap-lg)",
        "note": "Scoped to cards. Change this and full-bleed image margins follow automatically."
      }
    },
    "factors": {
      "spaceFactor": {
        "name": "Spacing multiplier for profiles",
        "css": "--space-factor",
        "type": "number",
        "value": 1,
        "note": "Compact=0.8, Default=1, Spacious=1.3. Multiply with clamp() tokens for responsive density."
      },
      "radiusFactor": {
        "name": "Radius multiplier for profiles",
        "css": "--radius-factor",
        "type": "number",
        "value": 1,
        "note": "Compact=0.85, Default=1, Spacious=1.2. Consumed only by --border-radius in exsa.fluid.css — inert without the fluid file."
      },
      "fontFactor": {
        "name": "Font size multiplier for profiles",
        "css": "--font-factor",
        "type": "number",
        "value": 1,
        "note": "Compact=0.95, Default=1, Spacious=1.1. Scales the --font-size-* tokens (exsa.fluid.css) + dashboard type."
      },
      "motionFactor": {
        "name": "Animation intensity multiplier",
        "css": "--motion-factor",
        "type": "number",
        "value": 1,
        "note": "Compact=0.6, Default=1, Spacious=1.4. prefers-reduced-motion sets to 0."
      }
    },
    "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
      },
      "justifyHeading": {
        "name": "Heading/content alignment",
        "css": "--justify-heading",
        "type": "string",
        "value": "center"
      },
      "justifyBody": {
        "name": "Body/form alignment",
        "css": "--justify-body",
        "type": "string",
        "value": "start"
      },
      "justifyNav": {
        "name": "Nav alignment",
        "css": "--justify-nav",
        "type": "string",
        "value": "space-between",
        "note": "Configurable via var() fallback. Set to center, start, etc."
      },
      "blockquoteBorder": {
        "name": "Blockquote left border pipe",
        "css": "--blockquote-border",
        "type": "string",
        "value": "4px solid var(--color-secondary)",
        "note": "Set to none to remove the pipe."
      }
    },
    "surface": {
      "surfaceBg": {
        "name": "Surface background",
        "css": "--surface-bg",
        "type": "background",
        "value": "var(--color-bg)"
      },
      "surfaceBgElevated": {
        "name": "Elevated surface background (cards)",
        "css": "--surface-bg-elevated",
        "type": "background",
        "value": "color-mix(in srgb,var(--color-bg) 97%,var(--color-text))"
      },
      "surfaceBorder": {
        "name": "Surface border",
        "css": "--surface-border",
        "type": "border",
        "value": "1px solid var(--color-border)"
      },
      "surfaceBorderControl": {
        "name": "Control boundary border",
        "css": "--surface-border-control",
        "type": "border",
        "value": "1px solid var(--color-border)",
        "note": "Inputs/controls keep a visible boundary in every skin — skins must never set this to none."
      },
      "surfaceRadius": {
        "name": "Surface corner radius",
        "css": "--surface-radius",
        "type": "dimension",
        "value": "var(--border-radius)"
      },
      "surfaceShadowSm": {
        "name": "Small surface shadow (hover lift)",
        "css": "--surface-shadow-sm",
        "type": "shadow",
        "value": "2px 2px 10px"
      },
      "surfaceShadowMd": {
        "name": "Medium surface shadow",
        "css": "--surface-shadow-md",
        "type": "shadow",
        "value": "0 4px 16px color-mix(in srgb,var(--color-text) 8%,transparent)"
      },
      "surfaceShadowLg": {
        "name": "Large surface shadow",
        "css": "--surface-shadow-lg",
        "type": "shadow",
        "value": "0 8px 32px color-mix(in srgb,var(--color-text) 12%,transparent)"
      },
      "surfaceShadowSide": {
        "name": "Side surface shadow (drawer edge)",
        "css": "--surface-shadow-side",
        "type": "shadow",
        "value": "8px 0 32px color-mix(in srgb,var(--color-text) 14%,transparent)"
      },
      "surfaceInset": {
        "name": "Inset surface highlight",
        "css": "--surface-inset",
        "type": "shadow",
        "value": "inset 0 0 0 0 transparent",
        "note": "Composable no-op (inset 0 0 0 0 transparent) by default so components can append it to shadow lists; clay/skeuomorphic/metallic/glow carry their inner highlight here."
      },
      "surfaceBackdrop": {
        "name": "Surface backdrop filter",
        "css": "--surface-backdrop",
        "type": "value",
        "value": "none",
        "note": "Full backdrop-filter value. Glass sets blur() saturate(); other skins set none."
      },
      "surfaceCanvas": {
        "name": "Page canvas background",
        "css": "--surface-canvas",
        "type": "background",
        "value": "var(--color-bg)",
        "note": "Skin-preferred page backdrop — page chrome (e.g. an aurora layer) consumes it. Defaults to the page background."
      }
    }
  },
  "components": {
    "hero": {
      "file": "dist/components/hero.css",
      "tokens": {
        "heroHeight": {
          "name": "Hero minimum height",
          "css": "--hero-height",
          "type": "dimension",
          "value": "60vh"
        },
        "heroOverlay": {
          "name": "Hero video overlay gradient",
          "css": "--hero-overlay",
          "type": "gradient",
          "value": "linear-gradient(135deg, rgba(17,139,238,0.5) 0%, rgba(146,13,233,0.45) 100%)"
        }
      }
    },
    "carousel": {
      "file": "dist/components/carousel.css",
      "tokens": {
        "aspectRatio": {
          "name": "Slide aspect ratio",
          "css": "--aspect-ratio",
          "type": "ratio",
          "value": "16 / 9"
        },
        "slideGap": {
          "name": "Gap between slides",
          "css": "--slide-gap",
          "type": "dimension",
          "value": "calc(0px * var(--space-factor, 1))"
        },
        "scrollHint": {
          "name": "Peek hint padding (shows next/prev slide edge)",
          "css": "--scroll-hint",
          "type": "dimension",
          "value": "0px"
        },
        "slideSize": {
          "name": "Slide width (one slide per page default)",
          "css": "--slide-size",
          "type": "dimension",
          "value": "100%",
          "note": "Default 100% — carousel.js overwrites it inline with calc((100% - gap × (perPage − 1)) / perPage)."
        },
        "slidesPerPage": {
          "name": "Slides per page (set by JS)",
          "css": "--slides-per-page",
          "type": "number",
          "fallback": "1",
          "note": "Set by carousel.js on the host element; CSS consumes it with a fallback of 1."
        }
      }
    },
    "topbar": {
      "file": "dist/components/topbar.css",
      "tokens": {
        "topbarHeight": {
          "name": "Topbar height (body padding syncs via :has())",
          "css": "--topbar-height",
          "type": "dimension",
          "value": "56px",
          "note": "Size variants: 48px (sm), 56px (default), 64px (lg), 72px (xl). Body padding-top auto-syncs."
        }
      }
    },
    "progress": {
      "file": "dist/components/progress.css",
      "tokens": {
        "fillPct": {
          "name": "Progress fill percentage",
          "css": "--fill-pct",
          "type": "percentage",
          "fallback": "50%",
          "note": "Not a :root token — set inline on .progress-item__fill."
        },
        "fillClr": {
          "name": "Progress fill color",
          "css": "--fill-clr",
          "type": "color",
          "fallback": "var(--color-link)",
          "note": "Not a :root token — set inline on .progress-item__fill."
        }
      }
    },
    "donut": {
      "file": "dist/components/donut.css",
      "tokens": {
        "s1": {
          "name": "Slice 1 sweep (degrees)",
          "css": "--s1",
          "type": "number",
          "fallback": "76"
        },
        "s2": {
          "name": "Slice 2 sweep (degrees)",
          "css": "--s2",
          "type": "number",
          "fallback": "96"
        },
        "s3": {
          "name": "Slice 3 sweep (degrees)",
          "css": "--s3",
          "type": "number",
          "fallback": "120"
        },
        "s4": {
          "name": "Slice 4 sweep (degrees)",
          "css": "--s4",
          "type": "number",
          "fallback": "68"
        },
        "barW": {
          "name": "Bar row fill width",
          "css": "--bar-w",
          "type": "percentage",
          "fallback": "50%",
          "note": "Set inline on .bar-row__fill (donut bar chart)."
        }
      }
    }
  },
  "layouts": {
    "dashboard": {
      "file": "dist/layouts/dashboard.css",
      "tokens": {
        "dashGap": {
          "name": "Dashboard shell gap",
          "css": "--dash-gap",
          "type": "dimension",
          "value": "calc(16px * var(--space-factor, 1))"
        },
        "dashColMin": {
          "name": "Dashboard grid column minimum",
          "css": "--dash-col-min",
          "type": "dimension",
          "value": "180px"
        },
        "dashToolbarZ": {
          "name": "Dashboard toolbar z-index",
          "css": "--dash-toolbar-z",
          "type": "number",
          "value": 89
        }
      }
    },
    "fullpage": {
      "file": "dist/templates/fullpage/fullpage.css",
      "tokens": {
        "fullpagePanImage": {
          "name": "Seamless pan tile image",
          "css": "--fullpage-pan-image",
          "type": "image",
          "fallback": "none",
          "note": "Required for --pan mode."
        },
        "fullpagePattern": {
          "name": "Optional texture over the backdrop",
          "css": "--fullpage-pattern",
          "type": "image",
          "fallback": "none"
        }
      }
    }
  },
  "zIndex": {
    "floating": {
      "name": "In-component floating controls (carousel arrows)",
      "css": "--z-floating",
      "type": "number",
      "value": "10"
    },
    "dropdown": {
      "name": "Dropdowns, tooltips, date/color picker popups",
      "css": "--z-dropdown",
      "type": "number",
      "value": "100"
    },
    "backTop": {
      "name": "Back-to-top button",
      "css": "--z-back-top",
      "type": "number",
      "value": "800"
    },
    "drawer": {
      "name": "Drawer backdrop",
      "css": "--z-drawer",
      "type": "number",
      "value": "900"
    },
    "drawerPanel": {
      "name": "Drawer panel",
      "css": "--z-drawer-panel",
      "type": "number",
      "value": "901"
    },
    "cookiebar": {
      "name": "Cookie consent bar",
      "css": "--z-cookiebar",
      "type": "number",
      "value": "950"
    },
    "topbar": {
      "name": "Fixed topbar",
      "css": "--z-topbar",
      "type": "number",
      "value": "1000"
    },
    "topbarDropdown": {
      "name": "Topbar dropdown menus",
      "css": "--z-topbar-dropdown",
      "type": "number",
      "value": "1002"
    },
    "announce": {
      "name": "Store announcement bar (above topbar)",
      "css": "--z-announce",
      "type": "number",
      "value": "1001"
    },
    "modal": {
      "name": "Modal dialogs + video modals (above topbar)",
      "css": "--z-modal",
      "type": "number",
      "value": "1050"
    },
    "lightbox": {
      "name": "Fullscreen lightbox",
      "css": "--z-lightbox",
      "type": "number",
      "value": "1100"
    },
    "popoverBackdrop": {
      "name": "Popover backdrop",
      "css": "--z-popover-backdrop",
      "type": "number",
      "value": "9995"
    },
    "popover": {
      "name": "Popover content",
      "css": "--z-popover",
      "type": "number",
      "value": "9996"
    },
    "contextBackdrop": {
      "name": "Context menu backdrop",
      "css": "--z-context-backdrop",
      "type": "number",
      "value": "9997"
    },
    "contextMenu": {
      "name": "Context menu",
      "css": "--z-context-menu",
      "type": "number",
      "value": "9998"
    },
    "toast": {
      "name": "Toast notifications",
      "css": "--z-toast",
      "type": "number",
      "value": "9999"
    },
    "skip": {
      "name": "Skip link",
      "css": "--z-skip",
      "type": "number",
      "value": "10000"
    },
    "layoutAside": {
      "name": "Fixed sidebars in layout shells",
      "css": "--z-layout-aside",
      "type": "number",
      "value": "90"
    },
    "layoutFooter": {
      "name": "Footer above aside (aside-full mode)",
      "css": "--z-layout-footer",
      "type": "number",
      "value": "95"
    }
  },
  "exports": {
    "css": "Copy the :root block from exsa.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', ... } } } } };"
  }
}