@import "tailwindcss";

/* Light-only token system, values adopted from acs-bumper's light theme so
   the two internal tools read as siblings. Semantic tokens only — no raw
   palette classes in components. */
:root {
  /* Surfaces */
  --background: #F3F4F6;
  --surface-0: #FFFFFF;
  --surface-1: #F9FAFB;
  --surface-2: #E5E7EB;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;

  /* Accent — Teal */
  --accent: #0D9488;
  --accent-hover: #0F766E;
  --accent-muted: rgba(13, 148, 136, 0.08);

  /* Inverted content on accent fills, and the dimmed page behind a dialog. */
  --on-accent: #FFFFFF;
  --overlay: rgba(17, 24, 39, 0.3);

  /* Status */
  --success: #22C55E;
  --success-muted: rgba(34, 197, 94, 0.08);
  --warning: #F59E0B;
  --warning-muted: rgba(245, 158, 11, 0.08);
  --danger: #EF4444;
  --danger-muted: rgba(239, 68, 68, 0.08);

  --foreground: var(--text-primary);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-muted: var(--accent-muted);
  --color-on-accent: var(--on-accent);
  --color-overlay: var(--overlay);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-success: var(--success);
  --color-success-muted: var(--success-muted);
  --color-warning: var(--warning);
  --color-warning-muted: var(--warning-muted);
  --color-danger: var(--danger);
  --color-danger-muted: var(--danger-muted);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  background-image: radial-gradient(circle, var(--surface-2) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  color: var(--foreground);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

td.num,
th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

td.num {
  font-family: var(--font-geist-mono);
  font-size: 13px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.progress-shimmer {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}