{
  "context": "Tests whether the agent follows AEM EDS CSS guidelines when implementing block styles. Covers selector scoping, CSS custom property usage, mobile-first responsive design with modern syntax, modern color and layout approaches, and anti-patterns to avoid.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Block selector scoping",
      "description": "All CSS selectors begin with `main .{block-name}` (e.g., `main .testimonial-carousel { ... }`), not bare element names or unscoped class names",
      "max_score": 12
    },
    {
      "name": "No unscoped selectors",
      "description": "No CSS rules use bare element selectors (e.g., `h2 { }`, `.item { }`) that are not prefixed with `main .{block-name}`",
      "max_score": 8
    },
    {
      "name": "CSS custom properties for color",
      "description": "Uses CSS custom property variables for at least one color value (e.g., `var(--background-color)`, `var(--text-color)`, `var(--link-color)`) rather than hardcoded color values",
      "max_score": 10
    },
    {
      "name": "CSS custom properties for typography",
      "description": "Uses CSS custom property variables for at least one font value (e.g., `var(--body-font-family)`, `var(--heading-font-family)`, `var(--heading-font-size-m)`) rather than hardcoded font names or sizes",
      "max_score": 10
    },
    {
      "name": "Mobile-first default styles",
      "description": "Default (non-media-query) CSS styles represent mobile layout; larger screen styles are added inside media queries",
      "max_score": 8
    },
    {
      "name": "Modern media query syntax",
      "description": "Media queries use range syntax `(width >= 600px)` or `(width >= 900px)` rather than legacy `(min-width: Xpx)` syntax",
      "max_score": 8
    },
    {
      "name": "Standard breakpoints",
      "description": "Media queries use 600px for tablet and/or 900px for desktop breakpoints (not arbitrary values)",
      "max_score": 6
    },
    {
      "name": "No !important usage",
      "description": "The CSS file does NOT contain any `!important` declarations",
      "max_score": 8
    },
    {
      "name": "Variant CSS pattern",
      "description": "If variants (dark, wide, etc.) are styled, the selector combines block and variant classes: `main .{block-name}.{variant}` pattern",
      "max_score": 6
    },
    {
      "name": "No -wrapper/-container suffix inside block",
      "description": "Class names used inside the block do NOT end in `-wrapper` or `-container` (to avoid conflict with platform-generated wrapper divs)",
      "max_score": 6
    },
    {
      "name": "Gap over margin hacks",
      "description": "Flex or grid layouts use the `gap` property for spacing between items, NOT margin-based spacing tricks (e.g., `margin-left: -1rem` on container)",
      "max_score": 8
    },
    {
      "name": "No hardcoded font families",
      "description": "Font-family values use CSS custom properties (e.g., `var(--body-font-family)`) and NOT hardcoded font names like `'Arial'`, `'Lato'`, or `sans-serif`",
      "max_score": 10
    }
  ]
}