/**
 * Tag Component Styles - WCAG 2.1 AA Compliant
 *
 * Provides visual styling for the Tag component with CSS custom properties
 * for easy theming and variant support. All measurements use rem units
 * for scalability and accessibility.
 *
 * Accessibility Features:
 * - Color contrast ratios meet WCAG AA 4.5:1 minimum (WCAG 1.4.3)
 * - Visual indicators beyond color (symbols via ::before) (WCAG 1.4.1)
 * - Visible focus indicators with 3:1 contrast (WCAG 2.4.7)
 */

/**
 * Base Tag Styles
 * Applied to all tag elements via role and data-tag attributes
 */
p[role='note'],
[role='note'],
small > span,
[data-tag] {
  /* Variant color tokens - WCAG AA compliant colors */
  --beta: var(--color-amber-400);            /* Amber: 6.94:1 contrast with black */
  --stable: var(--color-green-700);          /* Dark green: 4.56:1 contrast with white */
  --production: var(--color-blue-900);      /* Dark blue: 8.59:1 contrast with white */

  /* Tag component tokens */
  --tag-padding-inline: 0.7rem;  /* Horizontal padding (11.2px at 16px base) */
  --tag-padding-block: 0.2rem;   /* Vertical padding (3.2px at 16px base) */
  --tag-fs: 0.8rem;              /* Font size (12.8px at 16px base) */
  --tag-radius: 99rem;           /* Fully rounded pill shape */
  --tag-bg: var(--color-neutral-300);           /* Default background color */
  --tag-fw: 500;                 /* Medium font weight */
  --tag-color: currentColor;     /* Default text color (inherits) */
  --tag-display: inline-block;   /* Display type */

  /* Apply CSS custom properties */
  display: var(--tag-display);
  padding-inline: var(--tag-padding-inline);
  padding-block: var(--tag-padding-block);
  font-size: var(--tag-fs);
  color: var(--tag-color);
  background-color: var(--tag-bg);
  border-radius: var(--tag-radius);

  /**
   * Focus Indicators (WCAG 2.4.7)
   * Visible focus for keyboard navigation with 3:1 minimum contrast
   */
  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Remove outline for mouse users while preserving for keyboard users */
  &:focus:not(:focus-visible) {
    outline: none;
  }

  /**
   * Variant Modifiers
   * Applied via data-tag attribute (e.g., data-tag="beta")
   * Each variant includes both color AND visual symbol for accessibility (WCAG 1.4.1)
   */

  /* Alpha variant - early development stage */
  &[data-tag~='alpha'] {
    --tag-color: var(--color-neutral-900);      /* Black: maximum contrast with amber background */
    --tag-bg: var(--beta);

    /* Visual indicator beyond color - warning symbol */
    &::before {
      content: '⚠';
      margin-inline-end: 0.25rem;
      font-weight: 700;
      aria-hidden: true;
    }
  }

  /* Beta variant - pre-release version */
  &[data-tag~='beta'] {
    --tag-color: var(--color-neutral-900);      /* Black: maximum contrast with amber background */
    --tag-bg: var(--beta);

    /* Visual indicator beyond color - warning symbol */
    &::before {
      content: '⚠';
      margin-inline-end: 0.25rem;
      font-weight: 700;
      aria-hidden: true;
    }
  }

  /* Stable variant - production-ready release */
  &[data-tag~='stable'] {
    --tag-color: var(--color-text-inverse);      /* White: 4.56:1 contrast with dark green */
    --tag-bg: var(--stable);

    /* Visual indicator beyond color - checkmark symbol */
    &::before {
      content: '✓';
      margin-inline-end: 0.25rem;
      font-weight: 700;
      aria-hidden: true;
    }
  }

  /* Production variant - live environment indicator */
  &[data-tag~='production'] {
    --tag-color: var(--color-text-inverse);  /* White: 8.59:1 contrast with dark blue */
    --tag-bg: var(--production);

    /* Visual indicator beyond color - live indicator symbol */
    &::before {
      content: '●';
      margin-inline-end: 0.25rem;
      font-weight: 700;
      aria-hidden: true;
    }
  }
}

/**
 * Block-level tag modifier
 * Applied when Tag renders as <p> element
 */
p[role='note'] {
  --tag-display: block;
  --tag-radius: 0.5rem;  /* Less rounded for block tags (8px at 16px base) */
}