/* src/components/basic/XWUIDisplayTag/XWUIDisplayTag.css */
/**
 * XWUIDisplayTag Component Styles
 * Base tag component - simple, lightweight tag display
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tag, var(--radius-sm, 4px));
    /* A theme may set its own tag weight; medium otherwise. */
    font-weight: var(--tag-font-weight, var(--font-weight-medium, 500));
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Variants */
.xwui-tag-default {
    background: var(--bg-tag-default, var(--bg-secondary, #f8f9fa));
    color: var(--text-tag-default, var(--text-secondary, #6c757d));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-color, var(--border-color, #dee2e6));
}

/* Primary ink falls back through --role-primary-fg (dark ink), same as
   success/warning below - most accent-primary values are saturated enough
   for white text, but a handful (e.g. accent "chalk", #fafafa) are near-white
   surfaces where white text disappears entirely. */
.xwui-tag-primary {
    background: var(--bg-tag-primary, var(--accent-primary, #1890ff));
    color: var(--text-tag-primary, var(--role-primary-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-primary-color, var(--accent-primary, #1890ff));
}

/* success/warning ink falls back through --role-*-fg (dark ink tuned for
   these specific bright accent backgrounds) rather than straight to white - --accent-success/--accent-warning are bright enough that white text only
   reaches ~2.15-2.5:1. Found by the expanded color smoke test (Tag check). */
.xwui-tag-success {
    background: var(--bg-tag-success, var(--accent-success, #52c41a));
    color: var(--text-tag-success, var(--role-success-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-success-color, var(--accent-success, #52c41a));
}

.xwui-tag-warning {
    background: var(--bg-tag-warning, var(--accent-warning, #faad14));
    color: var(--text-tag-warning, var(--role-warning-fg, #ffffff));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-warning-color, var(--accent-warning, #faad14));
}

.xwui-tag-error {
    background: var(--bg-tag-error, var(--accent-error, #ff4d4f));
    color: var(--text-tag-error, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-error-color, var(--accent-error, #ff4d4f));
}

/* Sizes - canonical 9-level scale */
:is(.xwui-tag-3xs,.xwui-tag-xxxs) {
    padding: 0 0.25rem;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-4xs,.xwui-tag-xxxxs) {
    padding: 0 0.125rem;
    font-size: 4px;
    line-height: 1.2;
    letter-spacing: 0.125em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-2xs,.xwui-tag-xxs) {
    padding: 0.0313rem 0.3125rem;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-tag-xs {
    padding: var(--spacing-tag-xs-y, 0.0625rem) var(--spacing-tag-xs-x, 0.375rem);
    font-size: var(--font-size-xxs, 0.625rem); /* 10px */
    line-height: 1.3;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-s,.xwui-tag-sm) {
    padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
}
:is(.xwui-tag-m,.xwui-tag-md) {
    padding: var(--spacing-tag-m-y, 0.25rem) var(--spacing-tag-m-x, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
}
:is(.xwui-tag-l,.xwui-tag-lg) {
    padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.5;
}
.xwui-tag-xl {
    padding: var(--spacing-tag-xl-y, 0.5rem) var(--spacing-tag-xl-x, 1.25rem);
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1.5;
}
:is(.xwui-tag-2xl,.xwui-tag-xxl) {
    padding: 0.625rem 1.5rem;
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1.5;
}
:is(.xwui-tag-3xl,.xwui-tag-xxxl) {
    padding: 0.75rem 1.75rem;
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: 1.5;
}
:is(.xwui-tag-4xl,.xwui-tag-xxxxl) {
    padding: 1.2rem 2.8rem;
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: 1.5;
}

/* Legacy aliases: keep old class names working */
.xwui-tag-s      { padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem); font-size: var(--font-size-xs, 0.75rem); line-height: 1.4; }
.xwui-tag-m      { padding: var(--spacing-tag-m-y, 0.25rem) var(--spacing-tag-m-x, 0.75rem); font-size: var(--font-size-sm, 0.875rem); line-height: 1.4; }
.xwui-tag-l      { padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem); font-size: var(--font-size-base, 1rem); line-height: 1.5; }
.xwui-tag-small  { padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem); font-size: var(--font-size-xs, 0.75rem); line-height: 1.4; }
.xwui-tag-medium { padding: var(--spacing-tag-m-y, 0.25rem)  var(--spacing-tag-m-x, 0.75rem); font-size: var(--font-size-sm, 0.875rem); line-height: 1.4; }
.xwui-tag-large  { padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem);   font-size: var(--font-size-base, 1rem);  line-height: 1.5; }

/* xs tags use uppercase letters for a compact, punchy look (chip-like labels). */
.xwui-tag-xs .xwui-tag-label {
    text-transform: uppercase;
}

.xwui-tag-label {
    display: inline-block;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* Named hues: one colour gives a soft fill and border, with a lighter ink of
   the same colour. A theme may override any hue with --xwui-hue-<name>. */
.xwui-tag--hue-lime { --xwui-tag-hue: var(--xwui-hue-lime, #c8ff3d); --xwui-tag-ink: var(--xwui-tag-hue); }
.xwui-tag--hue-cyan { --xwui-tag-hue: var(--xwui-hue-cyan, #2ee6ff); --xwui-tag-ink: var(--xwui-tag-hue); }
.xwui-tag--hue-violet { --xwui-tag-hue: var(--xwui-hue-violet, #9b6bff); --xwui-tag-ink: #c4adff; }
.xwui-tag--hue-pink { --xwui-tag-hue: var(--xwui-hue-pink, #ff4fa3); --xwui-tag-ink: #ff8cc5; }
.xwui-tag--hue-orange { --xwui-tag-hue: var(--xwui-hue-orange, #ff8a3d); --xwui-tag-ink: #ffb07f; }
.xwui-tag--hue-red { --xwui-tag-hue: var(--xwui-hue-red, #ff5c6c); --xwui-tag-ink: #ff99a3; }
.xwui-tag--hue-amber { --xwui-tag-hue: var(--xwui-hue-amber, #ffc53d); --xwui-tag-ink: #ffd77a; }
.xwui-tag--hue-green { --xwui-tag-hue: var(--xwui-hue-green, #3dffa2); --xwui-tag-ink: var(--xwui-tag-hue); }
.xwui-tag--hue-blue { --xwui-tag-hue: var(--xwui-hue-blue, #4d8bff); --xwui-tag-ink: #9dbcff; }
.xwui-tag--hue-lime, .xwui-tag--hue-cyan, .xwui-tag--hue-violet, .xwui-tag--hue-pink, .xwui-tag--hue-orange,
.xwui-tag--hue-red, .xwui-tag--hue-amber, .xwui-tag--hue-green, .xwui-tag--hue-blue {
  color: var(--xwui-tag-ink);
  background: color-mix(in srgb, var(--xwui-tag-hue) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--xwui-tag-hue) 33%, transparent);
}
.xwui-tag--hue-plan {
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--text-tertiary);
}
.xwui-tag-note { margin-inline-start: 0.35em; color: var(--text-tertiary); }

/* A leading status dot in the tag's own colour. */
.xwui-tag-dot {
  display: inline-block;
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: 0.45em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}