@charset "UTF-8";
/**
 * 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
   */
  /* Remove outline for mouse users while preserving for keyboard users */
  /**
   * 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 */
  /* Beta variant - pre-release version */
  /* Stable variant - production-ready release */
  /* Production variant - live environment indicator */
}
p[role=note]:focus-visible,
[role=note]:focus-visible,
small > span:focus-visible,
[data-tag]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
p[role=note]:focus:not(:focus-visible),
[role=note]:focus:not(:focus-visible),
small > span:focus:not(:focus-visible),
[data-tag]:focus:not(:focus-visible) {
  outline: none;
}
p[role=note][data-tag~=alpha],
[role=note][data-tag~=alpha],
small > span[data-tag~=alpha],
[data-tag][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 */
}
p[role=note][data-tag~=alpha]::before,
[role=note][data-tag~=alpha]::before,
small > span[data-tag~=alpha]::before,
[data-tag][data-tag~=alpha]::before {
  content: "⚠";
  margin-inline-end: 0.25rem;
  font-weight: 700;
  aria-hidden: true;
}
p[role=note][data-tag~=beta],
[role=note][data-tag~=beta],
small > span[data-tag~=beta],
[data-tag][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 */
}
p[role=note][data-tag~=beta]::before,
[role=note][data-tag~=beta]::before,
small > span[data-tag~=beta]::before,
[data-tag][data-tag~=beta]::before {
  content: "⚠";
  margin-inline-end: 0.25rem;
  font-weight: 700;
  aria-hidden: true;
}
p[role=note][data-tag~=stable],
[role=note][data-tag~=stable],
small > span[data-tag~=stable],
[data-tag][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 */
}
p[role=note][data-tag~=stable]::before,
[role=note][data-tag~=stable]::before,
small > span[data-tag~=stable]::before,
[data-tag][data-tag~=stable]::before {
  content: "✓";
  margin-inline-end: 0.25rem;
  font-weight: 700;
  aria-hidden: true;
}
p[role=note][data-tag~=production],
[role=note][data-tag~=production],
small > span[data-tag~=production],
[data-tag][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 */
}
p[role=note][data-tag~=production]::before,
[role=note][data-tag~=production]::before,
small > span[data-tag~=production]::before,
[data-tag][data-tag~=production]::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) */
}

/*# sourceMappingURL=tag.css.map */