-- Paper Tonic Modern - Semantic Highlight Groups
-- Custom semantic captures for language-specific highlighting
-- These are defined in after/queries/*/highlights.scm files

local c = require('paper-tonic-modern.colors')

return {
  -- ============================================================================
  -- CSS Semantic Captures
  -- ============================================================================
  
  -- Class selectors in CSS (.class-name)
  -- Uses green (c2) to match CSS language color
  ['@CssClassName'] = { fg = c.c2 },
  
  -- ID selectors in CSS (#id-name)
  -- Uses stronger green (c2_strong) with bold for emphasis
  ['@CssIdentifier'] = { fg = c.c2_strong, bold = true },
  
  -- ID selector wrapper (the whole #id construct)
  ['@CssIdSelector'] = 'SpecialChar',
  
  -- Pseudo-class selectors (:hover, :focus, etc.)
  -- Uses bold primary_strong (brownish-red) to distinguish from green class/ID selectors
  -- These are behavioral modifiers, not structural selectors
  ['@cssPseudoClass'] = { fg = c.primary_strong, bold = true },
  
  -- Pseudo-element selectors (::before, ::after, etc.)
  -- Similar to pseudo-classes but for virtual elements
  ['@cssPseudoElement'] = { fg = c.primary_strong, bold = true },
  
  -- Nesting selector (& in SCSS/modern CSS)
  ['@cssNestingSelector'] = { fg = c.c2_strong },
  
  -- Universal selector (*)
  ['@CssUniversalSelector'] = 'SpecialChar',
  
  -- CSS properties
  ['@CssProp'] = { fg = c.primary_weak },
  
  -- CSS property values
  ['@CssPropertyValue'] = { fg = c.fg, bold = true },
  
  -- CSS units (px, em, rem, %, etc.)
  ['@CssUnit'] = 'Delimiter',
  
  -- Media query features
  ['@cssMediaFeatureName'] = 'Function',
  ['@cssMediaQuery'] = 'Function',
  ['@cssMediaQueryValue'] = 'cssAtRule',
  ['@cssMediaQueryValueUnit'] = 'cssMediaQueryValue',
  
  -- HTML tag names in CSS selectors (div, p, span, etc.)
  ['@HtmlTagName'] = { fg = c.c3 },
  
  -- ============================================================================
  -- HTML Semantic Captures
  -- ============================================================================
  
  -- IMPORTANT: Cross-language consistency
  -- Class names in HTML class="" should use the SAME color as CSS .class
  -- This creates visual consistency when working with HTML and CSS together
  
  -- Class attribute in HTML (class="...")
  -- Uses @CssClassName to match CSS .class-name color (green c2)
  ['@ClassNameAttribute'] = { fg = c.fg_weak },  -- The attribute name itself
  -- The class value uses @CssClassName (handled by query, falls back to green c2)
  
  -- ID attribute in HTML (id="...")
  -- Uses @CssIdentifier to match CSS #id-name color (strong green c2_strong)
  ['@IdAttribute'] = { fg = c.fg_weak },  -- The attribute name itself
  -- The id value uses @CssIdentifier (handled by query, falls back to c2_strong)
  
  -- Data attributes (data-*)
  ['@DataAttribute'] = { fg = c.fg_weak },
  ['@DataAttributeValue'] = 'Function',
  
  -- ============================================================================
  -- Cross-Language Consistency Notes
  -- ============================================================================
  
  -- The custom queries in after/queries/ ensure:
  -- 1. CSS .my-class and HTML class="my-class" both use @CssClassName (green c2)
  -- 2. CSS #my-id and HTML id="my-id" both use @CssIdentifier (green c2_strong)
  -- 3. This makes it easy to visually match selectors between HTML and CSS files
  --
  -- Example:
  --   HTML: <div class="container" id="main">
  --         "container" → green (c2)
  --         "main" → strong green (c2_strong, bold)
  --
  --   CSS:  .container { ... }  → green (c2)
  --         #main { ... }       → strong green (c2_strong, bold)
}