@layer components {
  /* Badges
   * Inline status/label indicators. Color derived via color-mix().
   * Consolidated from tutor-profiles, bookings, and availability CSS.
   */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2em 0.6em;
    font-size: var(--font-size-caption);
    font-weight: 500;
    border-radius: var(--radius);
    line-height: 1.4;
  }

  /* --- Sizes --- */

  .badge--sm {
    font-size: 0.6875rem;
    padding: 0.15em 0.4em;
  }

  .badge--lg {
    font-size: var(--font-size-small);
    padding: 0.25em 0.75em;
  }

  /* --- Brand variants --- */

  .badge--primary {
    color: var(--color-primary);
    background: color-mix(in oklch, var(--color-primary) 12%, transparent);
  }

  .badge--accent {
    color: var(--color-accent);
    background: color-mix(in oklch, var(--color-accent) 15%, transparent);
  }

  /* --- Status variants (booking lifecycle) --- */

  .badge--scheduled {
    color: oklch(var(--lch-blue));
    background: color-mix(in oklch, oklch(var(--lch-blue)) 12%, transparent);
  }

  .badge--in_progress {
    color: oklch(var(--lch-orange));
    background: color-mix(in oklch, oklch(var(--lch-orange)) 12%, transparent);
  }

  .badge--completed {
    color: oklch(var(--lch-green));
    background: color-mix(in oklch, oklch(var(--lch-green)) 12%, transparent);
  }

  .badge--cancelled {
    color: oklch(var(--lch-red));
    background: color-mix(in oklch, oklch(var(--lch-red)) 12%, transparent);
  }

  /* --- Tutor type variants --- */

  .badge--community {
    color: oklch(var(--lch-blue));
    background: color-mix(in oklch, oklch(var(--lch-blue)) 12%, transparent);
  }

  .badge--professional {
    color: oklch(var(--lch-purple));
    background: color-mix(in oklch, oklch(var(--lch-purple)) 12%, transparent);
  }

  .badge--verified {
    color: oklch(var(--lch-green));
    background: color-mix(in oklch, oklch(var(--lch-green)) 12%, transparent);
  }

  /* --- Availability variants --- */

  .badge--blocked {
    color: oklch(var(--lch-red));
    background: color-mix(in oklch, oklch(var(--lch-red)) 12%, transparent);
  }

  .badge--available {
    color: oklch(var(--lch-green));
    background: color-mix(in oklch, oklch(var(--lch-green)) 12%, transparent);
  }
}