/**
 * Semantic Utilities - ComponentsPacer Design System
 *
 * These are true utilities (backgrounds, text colors, borders, links, etc.)
 * that can be composed in templates. They use @utility for Tailwind v4
 * tree-shaking and variant integration (hover:bg-surface, sm:text-primary, etc.)
 *
 * Component-specific styles (button, badge, alert, card) live in their own
 * files under components/ as plain CSS — always included, never tree-shaken.
 */

/* ============================================
   BACKGROUNDS
   ============================================ */

@utility bg-app {
  background-color: var(--color-background);
}

@utility bg-surface {
  background-color: var(--color-surface);
}

@utility bg-surface-hover {
  &:hover {
    background-color: var(--color-surface-hover);
  }
}

@utility bg-surface-active {
  &:active {
    background-color: var(--color-surface-active);
  }
}

@utility bg-surface-muted {
  background-color: var(--color-surface-muted);
}

@utility bg-subtle {
  background-color: var(--color-surface-subtle);
}

/* ============================================
   TEXT COLORS
   ============================================ */

@utility text-primary {
  color: var(--color-text-primary);
}

@utility text-secondary {
  color: var(--color-text-secondary);
}

@utility text-tertiary {
  color: var(--color-text-tertiary);
}

@utility text-disabled {
  color: var(--color-text-disabled);
}

@utility text-link {
  color: var(--color-link);
}

.text-link-hover:hover {
  color: var(--color-link-hover);
}

/* Functional text colors */
@utility text-success {
  color: var(--color-success-600);
}

@utility text-warning {
  color: var(--color-warning-600);
}

@utility text-error {
  color: var(--color-error-600);
}

@utility text-info {
  color: var(--color-info-600);
}

@media (prefers-color-scheme: dark) {
  .text-success {
    color: var(--color-success-400);
  }

  .text-warning {
    color: var(--color-warning-400);
  }

  .text-error {
    color: var(--color-error-400);
  }

  .text-info {
    color: var(--color-info-400);
  }
}

/* ============================================
   SVG FILL COLORS (for charts and icons)
   ============================================ */

@utility fill-primary {
  fill: var(--color-text-primary);
}

@utility fill-secondary {
  fill: var(--color-text-secondary);
}

@utility fill-tertiary {
  fill: var(--color-text-tertiary);
}

@utility fill-disabled {
  fill: var(--color-text-disabled);
}

/* ============================================
   LINKS
   ============================================ */

@utility link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all var(--transition-fast);
}

.link:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

@utility link-muted {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link-muted:hover {
  color: var(--color-link);
}

/* ============================================
   BORDERS
   ============================================ */

@utility border-default {
  border-color: var(--color-border);
}

.border-hover:hover {
  border-color: var(--color-border-hover);
}

.border-focus:focus {
  border-color: var(--color-border-focus);
  outline: none;
  ring: 2px;
  ring-color: var(--color-border-focus);
  ring-opacity: 0.2;
}

@utility divider {
  border-color: var(--color-divider);
}

/* ============================================
   DATA VISUALIZATION HELPERS
   ============================================ */

@utility viz-success {
  color: var(--color-viz-success);
}

@utility viz-warning {
  color: var(--color-viz-warning);
}

@utility viz-error {
  color: var(--color-viz-error);
}

@utility viz-info {
  color: var(--color-viz-primary);
}

@utility viz-primary {
  color: var(--color-viz-primary);
}

@utility viz-accent {
  color: var(--color-viz-accent);
}

/* ============================================
   FOCUS STATES
   ============================================ */

@utility focus-ring {
  transition: box-shadow var(--transition-fast);
}

.focus-ring:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.focus-ring-error:focus {
  outline: var(--focus-ring-width) solid var(--color-error-500);
  outline-offset: var(--focus-ring-offset);
}

.focus-ring-success:focus {
  outline: var(--focus-ring-width) solid var(--color-success-500);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================
   MANIFESTO UTILITIES
   ============================================ */

/* Breathing room */
@utility breathe-xs {
  padding: calc(var(--space-breath) * 0.5);
}

@utility breathe-sm {
  padding: var(--space-breath);
}

@utility breathe {
  padding: var(--space-comfort);
}

@utility breathe-lg {
  padding: var(--space-generous);
}

@utility breathe-xl {
  padding: var(--space-luxurious);
}

/* Polite transitions */
@utility transition-instant {
  transition-duration: var(--motion-instant);
}

@utility transition-micro {
  transition-duration: var(--motion-micro);
}

@utility transition-polite {
  transition: all var(--motion-gentle) var(--ease-natural);
}

@utility transition-deliberate {
  transition-duration: var(--motion-deliberate);
}

/* Tactile feedback */
@utility tactile {
  transition: transform var(--motion-micro) var(--ease-natural);
  cursor: pointer;
}

.tactile:hover {
  transform: var(--hover-lift);
}

.tactile:active {
  transform: var(--active-press);
}

/* Focus with manners */
.focus-polite:focus {
  outline: none;
  box-shadow: 0 0 0 var(--focus-glow-width) color-mix(in oklch, var(--color-border-focus), transparent 80%);
}

/* Calm surfaces */
@utility surface-calm {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-generous);
  transition: all var(--motion-gentle) var(--ease-natural);
}

.surface-calm:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

@utility surface-lifted {
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

@utility surface-sunken {
  background: var(--color-surface-muted);
  box-shadow: inset 0 1px 3px color-mix(in oklch, var(--brand-midnight), transparent 90%);
}

/* Tone utilities */
@utility tone-success {
  color: color-mix(in oklch, var(--color-text-primary), var(--semantic-success-core) 20%);
  background: var(--color-alert-success-bg);
  border-left: 3px solid var(--color-alert-success-border);
}

@utility tone-warning {
  color: color-mix(in oklch, var(--color-text-primary), var(--semantic-warning-core) 20%);
  background: var(--color-alert-warning-bg);
  border-left: 3px solid var(--color-alert-warning-border);
}

@utility tone-error {
  color: color-mix(in oklch, var(--color-text-primary), var(--semantic-error-core) 20%);
  background: var(--color-alert-error-bg);
  border-left: 3px solid var(--color-alert-error-border);
}

@utility tone-info {
  color: color-mix(in oklch, var(--color-text-primary), var(--semantic-info-core) 20%);
  background: var(--color-alert-info-bg);
  border-left: 3px solid var(--color-alert-info-border);
}

/* Invitation states - for empty content */
@utility invite {
  text-align: center;
  padding: var(--space-luxurious);
  color: var(--color-text-secondary);
}

@utility invite-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: var(--space-comfort);
}

@utility invite-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-breath);
}

@utility invite-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin: 0 auto var(--space-generous) auto;
}

/* Inset ring utility for subtle depth */
@utility inset-ring {
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ============================================
   SCROLLBARS
   ============================================ */

@utility scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-border-hover);
}

/* Auto-apply to common scrollable patterns */
.overflow-y-auto,
.overflow-x-auto,
.overflow-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-border-hover);
}