{
  "name": "Design System Admin UI",
  "version": "1.0.0",
  "description": "Layered CSS design system implementation for DSS Admin UI using design tokens as source of truth",
  "author": "DSS Team",
  "license": "MIT",
  "homepage": "https://github.com/anthropics/dss",
  
  "metadata": {
    "type": "design-system",
    "architecture": "layered-css",
    "tokens": {
      "source": "design-tokens.json",
      "format": "json",
      "standardized": true
    },
    "colorSpace": "OKLCH",
    "supportsDarkMode": true,
    "supportsTheming": true
  },

  "structure": {
    "layers": [
      {
        "number": 0,
        "name": "Reset",
        "path": "src/styles/0-reset/",
        "description": "Browser reset and normalization",
        "files": ["_reset.css"]
      },
      {
        "number": 1,
        "name": "Tokens",
        "path": "src/styles/1-tokens/",
        "description": "Design tokens as CSS custom properties",
        "files": [
          "_colors.css",
          "_spacing.css",
          "_typography.css",
          "_radii.css",
          "_shadows.css",
          "_durations.css"
        ]
      },
      {
        "number": 2,
        "name": "Theme",
        "path": "src/styles/2-theme/",
        "description": "Semantic color palette and theming",
        "files": [
          "_palette.css",
          "_theme-dark.css"
        ]
      },
      {
        "number": 3,
        "name": "Layout",
        "path": "src/styles/3-layout/",
        "description": "Application structure and layouts",
        "files": [
          "_grid.css",
          "_sidebar.css",
          "_header.css",
          "_main.css"
        ]
      },
      {
        "number": 4,
        "name": "Components",
        "path": "src/styles/4-components/",
        "description": "Reusable component styles",
        "files": [
          "_navigation.css",
          "_buttons.css",
          "_inputs.css",
          "_panels.css",
          "_utilities.css"
        ]
      },
      {
        "number": 5,
        "name": "Admin",
        "path": "src/styles/5-admin/",
        "description": "Project-specific customizations",
        "files": [
          "_sidebar-custom.css",
          "_responsive.css",
          "_overrides.css"
        ]
      }
    ],
    "aggregator": "src/styles/index.css"
  },

  "colors": {
    "primary": {
      "light": "oklch(0.65 0.18 250)",
      "hover": "oklch(0.55 0.18 250)",
      "active": "oklch(0.45 0.18 250)",
      "foreground": "#ffffff"
    },
    "semantic": {
      "destructive": "oklch(0.63 0.25 30)",
      "success": "oklch(0.65 0.18 140)",
      "warning": "oklch(0.68 0.22 60)",
      "info": "oklch(0.62 0.18 230)"
    },
    "neutral": {
      "foreground": "oklch(0.20 0.02 280)",
      "background": "oklch(0.98 0.01 280)",
      "surface": "oklch(0.95 0.01 280)",
      "border": "oklch(0.82 0.01 280)"
    },
    "darkMode": {
      "foreground": "oklch(0.92 0.02 280)",
      "background": "oklch(0.12 0.02 280)",
      "surface": "oklch(0.15 0.02 280)",
      "border": "oklch(0.30 0.02 280)"
    }
  },

  "spacing": {
    "baseUnit": "4px",
    "scale": {
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "0.75rem",
      "4": "1rem",
      "5": "1.25rem",
      "6": "1.5rem",
      "7": "1.75rem",
      "8": "2rem"
    }
  },

  "typography": {
    "fontFamilies": {
      "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
      "mono": "'Monaco', 'Courier New', monospace"
    },
    "sizes": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem"
    },
    "weights": {
      "normal": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    }
  },

  "animation": {
    "durations": {
      "fast": "150ms",
      "normal": "200ms",
      "slow": "300ms"
    },
    "easing": {
      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
      "in": "cubic-bezier(0.4, 0, 1, 1)",
      "out": "cubic-bezier(0, 0, 0.2, 1)",
      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
    }
  },

  "breakpoints": {
    "mobile": "640px",
    "tablet": "1024px",
    "desktop": "1025px"
  },

  "documentation": {
    "designSystem": "DESIGN-SYSTEM.md",
    "tokenReference": "TOKEN-REFERENCE.md",
    "componentUsage": "COMPONENT-USAGE.md",
    "customizationGuide": "CUSTOMIZATION-GUIDE.md"
  },

  "components": {
    "navigation": {
      "classes": [".nav-section", ".nav-section__title", ".nav-item", ".nav-item__icon"],
      "variants": [".nav-item--indent-1", ".nav-item--indent-2"],
      "states": ["active", "hover", "focus-visible"]
    },
    "buttons": {
      "classes": ["button"],
      "variants": [".btn-primary", ".btn-secondary", ".btn-ghost", ".btn-destructive"],
      "sizes": [".btn-sm", ".btn-lg"],
      "states": ["hover", "active", "disabled", "focus-visible"]
    },
    "forms": {
      "classes": [".form-group", ".form-group__help", ".form-group__error"],
      "inputs": ["input[type]", "textarea", "select"]
    },
    "cards": {
      "classes": [".card", ".panel"],
      "variants": [".card--elevated", ".card--outlined"],
      "sections": [".panel__header", ".panel__body", ".panel__footer"]
    },
    "utilities": {
      "spacing": [".p-*", ".m-*", ".gap-*"],
      "typography": [".text-*", ".font-*"],
      "layout": [".flex", ".flex-col", ".flex-row"],
      "visibility": [".hidden", ".block", ".inline-block"]
    }
  },

  "accessibility": {
    "wcagCompliance": "WCAG 2.1 AA",
    "colorContrast": "Meets AA and AAA standards",
    "focusIndicators": "2px solid ring with 2px offset",
    "motionPreferences": "Respects prefers-reduced-motion",
    "keyboardNavigation": "Full support"
  },

  "browsers": {
    "supported": [
      "Chrome 90+",
      "Firefox 88+",
      "Safari 14.1+",
      "Edge 90+"
    ],
    "colorSpaceSupport": "OKLCH (modern browsers)",
    "cssFeatures": [
      "CSS Custom Properties",
      "CSS Grid",
      "CSS Flexbox",
      "Media Queries",
      "CSS Variables"
    ]
  },

  "keywords": [
    "design-system",
    "css",
    "tokens",
    "layered-architecture",
    "theme",
    "dark-mode",
    "accessibility",
    "wcag"
  ],

  "scripts": {
    "generate-tokens": "npm run generate-tokens",
    "build-css": "npm run build-css",
    "test-a11y": "npm run test-a11y"
  },

  "exportConfiguration": {
    "includeTokens": true,
    "includeTheme": true,
    "includeDocumentation": true,
    "includeComponents": true,
    "minifyCss": false,
    "sourceMaps": true
  }
}