@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/*
 * AC Tools — Light Graphite Design System v1.0 (draft)
 * Purpose: shared visual tokens and reusable primitives for pilot tools.
 * Safe-use rule: do not remove Tailwind or replace existing utility classes until each
 * pilot has been checked for dependencies. Import this file only after visual review.
 */

:root {
  /* Core surfaces */
  --ac-canvas: #F7F8F9;
  --ac-panel: #EEF0F2;
  --ac-surface: #FFFFFF;
  --ac-surface-soft: #F4F5F6;

  /* Graphite typography */
  --ac-ink: #1E293B;
  --ac-text: #374151;
  --ac-muted: #626974;
  --ac-subtle: #737982;
  --ac-disabled: #9299A3;

  /* Borders and depth */
  --ac-border: #D9DDE2;
  --ac-border-strong: #C8CDD4;
  --ac-shadow-soft: 0 14px 40px rgba(69, 75, 83, 0.06);
  --ac-shadow-card: 0 4px 16px rgba(30, 41, 59, 0.045);

  /* Semantic colors — reserved for meaning, not decoration */
  --ac-success: #059669;
  --ac-success-soft: #ECFDF5;
  --ac-warning: #D97706;
  --ac-warning-soft: #FFFBEB;
  --ac-danger: #E11D48;
  --ac-danger-soft: #FFF1F2;
  --ac-info: #64748B;
  --ac-info-soft: #F1F5F9;

  /* Shape and spacing */
  --ac-radius-sm: 0.5rem;
  --ac-radius-md: 0.875rem;
  --ac-radius-lg: 1.25rem;
  --ac-radius-xl: 1.75rem;
  --ac-space-1: 0.25rem;
  --ac-space-2: 0.5rem;
  --ac-space-3: 0.75rem;
  --ac-space-4: 1rem;
  --ac-space-6: 1.5rem;
  --ac-space-8: 2rem;

  /* Charts: neutral by default; semantic colors for positive/negative outcomes */
  --ac-chart-neutral: #737982;
  --ac-chart-neutral-fill: rgba(146, 153, 163, 0.10);
  --ac-chart-positive: var(--ac-success);
  --ac-chart-negative: var(--ac-danger);
}

/* Shared primitives. Adopt incrementally; existing tool markup remains authoritative. */
.ac-tool {
  color: var(--ac-text);
  background: var(--ac-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

.ac-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--ac-border);
  backdrop-filter: blur(16px);
}

.ac-hero {
  color: var(--ac-ink);
  background-color: #E8EAED;
  border: 1px solid rgba(217, 221, 226, 0.8);
  border-radius: var(--ac-radius-xl);
  box-shadow: var(--ac-shadow-soft);
}

.ac-panel {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-card);
}

.ac-panel-muted {
  background: var(--ac-panel);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
}

.ac-title { color: var(--ac-ink); }
.ac-body { color: var(--ac-text); }
.ac-muted { color: var(--ac-muted); }
.ac-border { border-color: var(--ac-border); }
.ac-shadow { box-shadow: var(--ac-shadow-soft); }
.ac-mono { font-variant-numeric: tabular-nums; }

.ac-status-success { color: var(--ac-success); background: var(--ac-success-soft); }
.ac-status-warning { color: var(--ac-warning); background: var(--ac-warning-soft); }
.ac-status-danger { color: var(--ac-danger); background: var(--ac-danger-soft); }
.ac-status-info { color: var(--ac-info); background: var(--ac-info-soft); }

@media (prefers-reduced-motion: reduce) {
  .ac-tool *, .ac-tool *::before, .ac-tool *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}