@import 'react-grid-layout/css/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Brand */
  --color-brand: #f97316;
  --color-brand-subtle: rgba(249, 115, 22, 0.12);
  --color-brand-hover: #fb923c;

  /* Surfaces */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #1a1a1a;
  --color-bg-elevated: #222222;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-active: rgba(249, 115, 22, 0.4);

  /* Text */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #808088; /* WCAG AA — 4.6:1 on --color-bg-primary (was #71717a / 4.1:1, fail) */
  --color-text-disabled: #52525b;

  /* Semantic status */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Semantic status backgrounds */
  --color-success-subtle: rgba(34, 197, 94, 0.12);
  --color-warning-subtle: rgba(234, 179, 8, 0.12);
  --color-error-subtle: rgba(239, 68, 68, 0.12);
  --color-info-subtle: rgba(59, 130, 246, 0.12);
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Accessibility floor (per .impeccable.md principle #6) */

/* Brand-orange focus ring on every interactive element. The default browser
   outline is invisible on our pitch-black canvas, so we require :focus-visible
   to surface a 2px brand ring with a 2px offset so it never touches the glyph. */
*:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect prefers-reduced-motion at the platform layer. Individual components
   no longer need their own `motion-reduce:` modifiers — this neutralizes
   transitions, animations, and smooth scrolling globally for users who ask. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Card */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

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

/* Tabular numbers for data displays */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Momentum scrolling for horizontally-scrollable code blocks on iOS */
pre {
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Select option styling for dark theme */
select option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* react-grid-layout dark theme overrides */
.react-grid-item > .react-resizable-handle::after {
  border-right-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.react-grid-item.react-grid-placeholder {
  background: var(--color-brand);
  opacity: 0.15;
  border-radius: 12px;
}
.react-grid-item.react-draggable-dragging {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}
