/**
 * apply.css - Token Application
 *
 * Maps CSS custom properties to utility classes.
 * Provides Tailwind-like classes using semantic tokens.
 *
 * NOTE: Tokens in base.css now store full oklch() values.
 * Usage is simply var(--token) — no hsl() or oklch() wrapper needed here.
 */

/* ============================================
 * BASE STYLES
 * ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  margin: 0;
  min-height: 100vh;
  overscroll-behavior-y: none; /* prevent pull-to-refresh bounce causing layout wobble */
}

/* ============================================
 * BACKGROUND UTILITIES
 * ============================================ */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
.bg-tertiary { background-color: var(--tertiary); }
.bg-destructive { background-color: var(--destructive); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-info { background-color: var(--info); }
.bg-card { background-color: var(--card); }

/* ============================================
 * TEXT UTILITIES
 * ============================================ */
.text-foreground { color: var(--foreground); }
.text-background { color: var(--background); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted { color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent { color: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-tertiary { color: var(--tertiary); }
.text-tertiary-foreground { color: var(--tertiary-foreground); }
.text-destructive { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-success { color: var(--success); }
.text-success-foreground { color: var(--success-foreground); }
.text-warning { color: var(--warning); }
.text-warning-foreground { color: var(--warning-foreground); }
.text-info { color: var(--info); }
.text-info-foreground { color: var(--info-foreground); }

/* ============================================
 * BORDER UTILITIES
 * ============================================ */
.border-border { border-color: var(--border); }
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-destructive { border-color: var(--destructive); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-tertiary { border-color: var(--tertiary); }
.border-accent { border-color: var(--accent); }
.border-info { border-color: var(--info); }

/* ============================================
 * RADIUS UTILITIES
 * ============================================ */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: calc(var(--radius) - 4px); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: calc(var(--radius) + 4px); }

/* ============================================
 * GRID LAYOUT (for SchemaRenderer)
 * ============================================ */
.bp-widget-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding: var(--grid-pad);
}

@media (min-width: 1024px) {
  .bp-widget-grid {
    gap: var(--grid-gap-lg);
    padding: var(--grid-pad-lg);
  }
}

.bp-widget-slot {
  min-height: 4rem;
}

/* ============================================
 * ERROR BOUNDARY PLACEHOLDER
 * ============================================ */
.bp-widget-error {
  background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
  border: 1px solid var(--destructive);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--destructive);
  text-align: center;
}

.bp-widget-loading {
  background-color: var(--muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  animation: bp-pulse 2s infinite;
}

@keyframes bp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}