/* =============================================================================
   KINKO DESIGN SYSTEM — Chip Component
   Spec: components/chip.md
   Figma: node 2028:379 (Chip component set)
   States: Default · Success · Info · Warning · Error · Selected
   Sizes: SM · MD · LG

   3-TIER TOKEN ARCHITECTURE:
   Layer 1 (Primitive) → Layer 2 (Semantic) → Layer 3 (--chip-*) → styles
   Never use --color-* or --surface-* directly below the :root block.
   ============================================================================= */

/* =============================================================================
   LAYER 3 — Chip component tokens (alias semantic tokens)
   ============================================================================= */

:root {
  /* Default */
  --chip-default-bg:        var(--surface-default);
  --chip-default-border:    var(--action-secondary);
  --chip-default-text:      var(--action-secondary);

  /* Selected */
  --chip-selected-bg:       var(--surface-inverse);
  --chip-selected-text:     var(--text-inverse);

  /* Success */
  --chip-success-bg:        var(--feedback-success-bg);
  --chip-success-border:    var(--feedback-success);
  --chip-success-text:      var(--feedback-success-text);

  /* Info */
  --chip-info-bg:           var(--feedback-info-bg);
  --chip-info-border:       var(--feedback-info);
  --chip-info-text:         var(--feedback-info-text);

  /* Warning */
  --chip-warning-bg:        var(--feedback-warning-bg);
  --chip-warning-border:    var(--feedback-warning);
  --chip-warning-text:      var(--feedback-warning-text);

  /* Error */
  --chip-error-bg:          var(--feedback-error-bg);
  --chip-error-border:      var(--feedback-error);
  --chip-error-text:        var(--text-error-emphasis);
}

/* =============================================================================
   COMPONENT STYLES — use only --chip-* vars below this line
   ============================================================================= */

/* ── Base ── */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  white-space: nowrap;
  /* Default status */
  background-color: var(--chip-default-bg);
  border: var(--border-width-small) solid var(--chip-default-border);
  color: var(--chip-default-text);
}

/* ── Sizes ── */
.chip--sm {
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.chip--md {
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.chip--lg {
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* ── Icons — use .icon-holder--sm/md/lg directly inside .chip ── */
/* SM: icon-holder--sm (16px) · MD: icon-holder--md (20px) · LG: icon-holder--lg (24px) */
/* Boolean left/right icons: include or omit the .icon-holder element in the DOM */

/* ── Status modifiers ── */
.chip--success {
  background-color: var(--chip-success-bg);
  border-color: var(--chip-success-border);
  color: var(--chip-success-text);
}

.chip--info {
  background-color: var(--chip-info-bg);
  border-color: var(--chip-info-border);
  color: var(--chip-info-text);
}

.chip--warning {
  background-color: var(--chip-warning-bg);
  border-color: var(--chip-warning-border);
  color: var(--chip-warning-text);
}

.chip--error {
  background-color: var(--chip-error-bg);
  border-color: var(--chip-error-border);
  color: var(--chip-error-text);
}

.chip--selected {
  background-color: var(--chip-selected-bg);
  border: none;
  color: var(--chip-selected-text);
}