/**
 * Label Component Styles
 *
 * Non-interactive badge/tag for metadata, format, or category display.
 *
 * Variants:  primary | secondary | success | info | warning | error
 * Sizes:     l (34px) | m (30px) | s (26px)
 * Contexts:  white | ambience | trust | attitude | academy
 *
 * Semantic variants (success/info/warning/error) shift colour tier by background:
 *   white            → -200 bg, -500 border, -600 text
 *   ambience/academy → -200 bg, no border,  -600 text
 *   attitude         → -100 bg, no border,  -600 text
 *   trust            → -600 bg, no border,  -100 text
 *
 * Figma file:  sMFKXUL6d3GFOJZnULkuPl
 * Figma frame: Labels — 694:30728
 */

/* ============================================================
 * Base structure
 * ============================================================ */
.label {
  /* Colour tokens — defaults = primary on white */
  --label-bg: var(--attitude, #ffa0fa);
  --label-border: transparent;
  --label-text: var(--trust, #550a2d);

  --label-text-size-l: 1.5rem;

  /* Size tokens — defaults = L */
  --label-font: var(--label-text-size-l);
  --label-tracking: -0.36px;
  --label-px: var(--spacing-150, 12px);
  --label-icon-px: var(--spacing-100, 8px); /* left padding when icon present */
  --label-gap: 8px;
}

/* scope this because there's .label elsewhere */
#storybook-root .label,
.label[data-component-id="bosch:label"] {
  background-color: var(--label-bg);
  color: var(--label-text);

  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--label-font);
  line-height: 1.1;
  letter-spacing: var(--label-tracking);
  font-feature-settings: 'zero' 1;
  white-space: nowrap;
  width: fit-content;

  @supports (text-box-trim: trim-both) {
    .label__text {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }
}

.label__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--label-gap);

  padding: var(--spacing-100) var(--label-px);
  border: 1px solid var(--label-border);
  border-radius: var(--border-radius-s, 2px);
}


/* ============================================================
 * Sizes
 * ============================================================ */

.label--l {
  --label-font:     var(--label-text-size-l);
  --label-tracking: -0.36px;
  --label-px:       var(--spacing-150, 12px);
  --label-icon-px:  var(--spacing-100, 8px);
}

.label--m {
  --label-font:     1.25rem;
  --label-tracking: -0.24px;
  --label-px:       var(--spacing-150, 12px);
  --label-icon-px:  var(--spacing-100, 8px);
}

.label--s {
  --label-font:     1rem;
  --label-tracking: -0.16px;
  --label-px:       var(--spacing-100, 8px);
  --label-icon-px:  var(--spacing-100, 8px);
}

/* ── Icon wrapper ── */
.label__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/*
 * Semantic variants with icon: L and M get asymmetric horizontal padding —
 * tighter on the left (icon side), wider on the right.
 * Size S keeps symmetric padding.
 */
.label--l.label--success,
.label--l.label--info,
.label--l.label--warning,
.label--l.label--error,
.label--m.label--success,
.label--m.label--info,
.label--m.label--warning,
.label--m.label--error {
  padding-left: var(--label-icon-px);
  padding-right: var(--label-px);
}


/* ============================================================
 * Variants — default colours (on white background)
 * ============================================================ */

/* ── Primary ── */
/* Attitude-pink badge — consistent across all backgrounds */
.label--primary {
  --label-bg:     var(--attitude, #ffa0fa);
  --label-border: transparent;
  --label-text:   var(--trust, #550a2d);
}

/* ── Secondary ── */
.label--secondary {
  --label-bg:     var(--ambience, #ebe6e1);
  --label-border: transparent;
  --label-text:   var(--trust, #550a2d);
}

/* ── Success ── */
.label--success {
  --label-bg:     var(--success-green-200, #c1e9dd);
  --label-border: var(--success-green-500, #10a477);
  --label-text:   var(--success-green-600, #228063);
}

/* ── Info ── */
.label--info {
  --label-bg:     var(--info-blue-200, #d8e9f7);
  --label-border: var(--info-blue-500, #489ae0);
  --label-text:   var(--info-blue-600, #4c6d8a);
}

/* ── Warning ── */
.label--warning {
  --label-bg:     var(--warning-yellow-200, #f9ecca);
  --label-border: var(--warning-yellow-500, #e9aa0a);
  --label-text:   var(--warning-yellow-600, #8e732e);
}

/* ── Error ── */
.label--error {
  --label-bg:     var(--error-red-200, #fac6cc);
  --label-border: var(--error-red-500, #dc2b3f);
  --label-text:   var(--error-red-600, #a82e3c);
}


/* ============================================================
 * Background contexts
 *
 * Each context block overrides only what changes.
 * Primary stays attitude-pink in every context.
 * Semantic tiers shift: white/attitude → ambience/academy → trust.
 * ============================================================ */

/* ── Ambience ── medium colour tier, no border (Figma: border-width/none = 0) */
.label--ambience.label--secondary,
.surface--ambience .label--secondary {
  --label-bg:     var(--white, #ffffff);
  --label-border: transparent;
  --label-text:   var(--trust, #550a2d);
}
.label--ambience.label--success,
.surface--ambience .label--success {
  --label-bg:     var(--success-green-300, #83d4bb);
  --label-border: transparent;
  --label-text:   var(--success-green-700, #134939);
}
.label--ambience.label--info,
.surface--ambience .label--info {
  --label-bg:     var(--info-blue-300, #b2d3f0);
  --label-border: transparent;
  --label-text:   var(--info-blue-700, #2c4051);
}
.label--ambience.label--warning,
.surface--ambience .label--warning {
  --label-bg:     var(--warning-yellow-300, #f4d994);
  --label-border: transparent;
  --label-text:   var(--warning-yellow-700, #53431b);
}
.label--ambience.label--error,
.surface--ambience .label--error {
  --label-bg:     var(--error-red-300, #f68d99);
  --label-border: transparent;
  --label-text:   var(--error-red-700, #601a22);
}

/* ── Trust ── dark / inverted colour tier, no border (Figma: border-width/none = 0) */
.label--trust.label--secondary,
.surface--trust .label--secondary {
  --label-bg:     var(--trust-300, #773b57);
  --label-border: transparent;
  --label-text:   var(--white, #ffffff);
}
.label--trust.label--success,
.surface--trust .label--success {
  --label-bg:     var(--success-green-600, #228063);
  --label-border: transparent;
  --label-text:   var(--success-green-100, #e0f4ee);
}
.label--trust.label--info,
.surface--trust .label--info {
  --label-bg:     var(--info-blue-600, #4c6d8a);
  --label-border: transparent;
  --label-text:   var(--info-blue-100, #ecf4fb);
}
.label--trust.label--warning,
.surface--trust .label--warning {
  --label-bg:     var(--warning-yellow-600, #8e732e);
  --label-border: transparent;
  --label-text:   var(--warning-yellow-100, #fcf5e4);
}
.label--trust.label--error,
.surface--trust .label--error {
  --label-bg:     var(--error-red-600, #a82e3c);
  --label-border: transparent;
  --label-text:   var(--error-red-100, #fde3e6);
}

/* ── Attitude (pink) ── inverted primary, light semantic tier, no border */
.label--attitude.label--primary,
.surface--attitude .label--primary {
  --label-bg:     var(--trust, #550a2d);
  --label-border: transparent;
  --label-text:   var(--white, #ffffff);
}
.label--attitude.label--secondary,
.surface--attitude .label--secondary {
  --label-bg:     var(--attitude-200, #ffcffd);
  --label-border: transparent;
  --label-text:   var(--trust, #550a2d);
}
.label--attitude.label--success,
.surface--attitude .label--success {
  --label-bg:     var(--success-green-100, #e0f4ee);
  --label-border: transparent;
  --label-text:   var(--success-green-600, #228063);
}
.label--attitude.label--info,
.surface--attitude .label--info {
  --label-bg:     var(--info-blue-100, #ecf4fb);
  --label-border: transparent;
  --label-text:   var(--info-blue-600, #4c6d8a);
}
.label--attitude.label--warning,
.surface--attitude .label--warning {
  --label-bg:     var(--warning-yellow-100, #fcf5e4);
  --label-border: transparent;
  --label-text:   var(--warning-yellow-600, #8e732e);
}
.label--attitude.label--error,
.surface--attitude .label--error {
  --label-bg:     var(--error-red-100, #fde3e6);
  --label-border: transparent;
  --label-text:   var(--error-red-600, #a82e3c);
}

/* ── Academy (warm brown) ── academy-200 secondary, light semantic tier, no border */
.label--academy.label--secondary,
.surface--academy .label--secondary {
  --label-bg:     var(--academy-200, #d4c0a1);
  --label-border: transparent;
  --label-text:   var(--trust, #550a2d);
}
.label--academy.label--success,
.surface--academy .label--success {
  --label-bg:     var(--success-green-200, #c1e9dd);
  --label-border: transparent;
  --label-text:   var(--success-green-600, #228063);
}
.label--academy.label--info,
.surface--academy .label--info {
  --label-bg:     var(--info-blue-200, #d8e9f7);
  --label-border: transparent;
  --label-text:   var(--info-blue-600, #4c6d8a);
}
.label--academy.label--warning,
.surface--academy .label--warning {
  --label-bg:     var(--warning-yellow-200, #f9ecca);
  --label-border: transparent;
  --label-text:   var(--warning-yellow-600, #8e732e);
}
.label--academy.label--error,
.surface--academy .label--error {
  --label-bg:     var(--error-red-200, #fac6cc);
  --label-border: transparent;
  --label-text:   var(--error-red-600, #a82e3c);
}