/*
 * Badge Component Styles
 * Unified badge system for status indicators, labels, and tags
 *
 * Uses OKLCH color-mix for theme-adaptive backgrounds
 * Pattern: 18% color mixed with surface for visible but subtle backgrounds
 *
 * Usage:
 *   <span class="badge badge-info">Todo</span>
 *   <span class="badge badge-warning">Card</span>
 *   <span class="badge badge-success badge-pill">Active</span>
 */

@layer components {
  /* ==========================================================================
     Base Badge
     ========================================================================== */

  .badge {
    /* Default: neutral/muted */
    --badge-color: var(--color-ink-muted);
    --badge-bg: color-mix(in oklch, var(--badge-color) 18%, var(--color-surface) 82%);

    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0_5) var(--space-2);
    border: 2px solid var(--color-comic-border);
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    line-height: var(--leading-normal);
    white-space: nowrap;
    background-color: var(--badge-bg);
    color: var(--badge-color);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    transition: all 0.15s ease;

    /* Tilt on hover */
    &:hover {
      transform: translate(-1px, -1px) rotate(-3deg);
      box-shadow: 3px 3px 0 var(--comic-shadow-color);
    }
  }

  /* ==========================================================================
     Shape Variants
     ========================================================================== */

  .badge-pill {
    border-radius: var(--radius-full);
    padding-inline: var(--space-2_5);
  }

  .badge-sm {
    padding: 2px var(--space-1_5);
    font-size: 10px;
  }

  /* ==========================================================================
     Color Variants - Semantic
     ========================================================================== */

  .badge-success,
  .badge-positive {
    --badge-color: var(--color-positive);
  }

  .badge-warning {
    --badge-color: var(--color-warning);
  }

  .badge-danger,
  .badge-negative {
    --badge-color: var(--color-negative);
  }

  .badge-info {
    --badge-color: var(--color-info);
  }

  .badge-muted {
    --badge-color: var(--color-ink-muted);
  }

  /* ==========================================================================
     Color Variants - Hues (for work item types, etc.)
     ========================================================================== */

  .badge-blue {
    --badge-color: var(--color-info);
  }

  .badge-green {
    --badge-color: var(--color-positive);
  }

  .badge-amber {
    --badge-color: light-dark(oklch(var(--lch-amber-600)), oklch(var(--lch-amber-500)));
  }

  .badge-orange {
    --badge-color: light-dark(oklch(0.65 0.18 45), oklch(0.72 0.15 50));
  }

  .badge-red {
    --badge-color: var(--color-negative);
  }

  .badge-sky {
    --badge-color: var(--color-basecamp);
  }

  /* ==========================================================================
     Solid Variant - Full color background with white text
     ========================================================================== */

  .badge-solid {
    --badge-bg: var(--badge-color);
    color: white;
    box-shadow: none;
  }

  /* ==========================================================================
     Brand Badges
     ========================================================================== */

  .badge-basecamp {
    --badge-color: var(--color-basecamp);
  }

  /* ==========================================================================
     Status Aliases
     ========================================================================== */

  /* Project/item statuses */
  .badge-active { --badge-color: var(--color-positive); }
  .badge-inactive { --badge-color: var(--color-ink-faint); }
  .badge-on_hold { --badge-color: var(--color-warning); }
  .badge-archived { --badge-color: var(--color-ink-faint); }

  /* Process statuses */
  .badge-pending { --badge-color: var(--color-warning); }
  .badge-processing { --badge-color: var(--color-info); }
  .badge-processed { --badge-color: var(--color-positive); }
  .badge-failed { --badge-color: var(--color-negative); }
  .badge-overdue { --badge-color: var(--color-negative); }

  /* ==========================================================================
     Appetite Badges - Heat scale from cool (trivial) to hot (major)
     ========================================================================== */

  .badge-appetite {
    text-transform: capitalize;
  }

  .badge-trivial {
    --badge-color: var(--color-ink-muted);
  }

  .badge-small {
    --badge-color: light-dark(oklch(var(--lch-sky-600)), oklch(var(--lch-sky-400)));
  }

  .badge-medium {
    --badge-color: light-dark(oklch(var(--lch-amber-600)), oklch(var(--lch-amber-500)));
  }

  .badge-large {
    --badge-color: light-dark(oklch(0.65 0.18 45), oklch(0.72 0.15 50));
  }

  .badge-major {
    --badge-color: var(--color-negative);
  }

  /* ==========================================================================
     Work Item Type Badges
     ========================================================================== */

  .badge-todo {
    --badge-color: var(--color-info);
  }

  .badge-card {
    --badge-color: light-dark(oklch(var(--lch-amber-600)), oklch(var(--lch-amber-500)));
  }

  .badge-step {
    --badge-color: var(--color-positive);
  }

  /* ==========================================================================
     Retainer Policy Badges
     ========================================================================== */

  .badge-rollover {
    --badge-color: var(--color-positive);
  }

  .badge-capped_rollover {
    --badge-color: var(--color-warning);
  }

  .badge-use_it_or_lose_it {
    --badge-color: var(--color-info);
  }

  /* ==========================================================================
     Transaction Type Badges
     ========================================================================== */

  .badge-deposit {
    --badge-color: var(--color-positive);
  }

  .badge-withdrawal {
    --badge-color: var(--color-negative);
  }

  .badge-adjustment {
    --badge-color: var(--color-warning);
  }

  .badge-expiration {
    --badge-color: var(--color-ink-muted);
  }

  /* ==========================================================================
     Sync & Connection Status
     ========================================================================== */

  .sync-enabled {
    color: var(--color-positive);
    font-size: var(--text-sm);
  }

  .sync-disabled {
    color: var(--color-ink-faint);
    font-size: var(--text-sm);
  }

  /* ==========================================================================
     Basecamp Icon & Link
     ========================================================================== */

  .basecamp-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .basecamp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .basecamp-link:hover {
    transform: scale(1.1);
    text-decoration: none;
  }

  .basecamp-link:active {
    transform: scale(0.95);
  }

  /* ==========================================================================
     DEPRECATED - Old classes kept for compatibility
     Remove these after migrating all views
     ========================================================================== */

  /* Status badge (old pill style) - now use .badge.badge-pill.badge-{status} */
  .status-badge {
    --status-color: var(--color-ink-muted);
    --status-bg: color-mix(in oklch, var(--status-color) 18%, var(--color-surface) 82%);
    --status-ring: color-mix(in oklch, var(--status-color) 30%, transparent 70%);

    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2_5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background-color: var(--status-bg);
    color: var(--status-color);
    box-shadow: inset 0 0 0 1px var(--status-ring);
  }

  .status-active { --status-color: var(--color-positive); }
  .status-inactive { --status-color: var(--color-ink-faint); }
  .status-on_hold { --status-color: var(--color-warning); }
  .status-completed { --status-color: var(--color-positive); }  /* green = done */
  .status-archived { --status-color: var(--color-ink-faint); }
  .status-pending { --status-color: var(--color-warning); }
  .status-processing { --status-color: var(--color-info); }
  .status-processed { --status-color: var(--color-positive); }
  .status-failed { --status-color: var(--color-negative); }
  .status-incomplete { --status-color: var(--color-info); }  /* blue = in progress */
  .status-overdue { --status-color: var(--color-negative); }

  /* Appetite badges (old) - now use .badge.badge-appetite.badge-{size} */
  .badge-appetite-trivial { --badge-color: var(--color-ink-muted); }
  .badge-appetite-small { --badge-color: light-dark(oklch(var(--lch-sky-600)), oklch(var(--lch-sky-400))); }
  .badge-appetite-medium { --badge-color: light-dark(oklch(var(--lch-amber-600)), oklch(var(--lch-amber-500))); }
  .badge-appetite-large { --badge-color: light-dark(oklch(0.65 0.18 45), oklch(0.72 0.15 50)); }
  .badge-appetite-major { --badge-color: var(--color-negative); }
}