@import "tailwindcss";

@theme {
  /* Background layers */
  --color-bg-base: #1A1A18;
  --color-bg-surface: #222220;
  --color-bg-elevated: #2C2C28;
  --color-bg-inset: #141413;

  /* Text hierarchy (warm whites) */
  --color-text-primary: #F5F5F0;
  --color-text-secondary: #B0B0A8;
  --color-text-tertiary: #AEAEA6;

  /* Borders */
  --color-border-subtle: #3E3E3A;
  --color-border-visible: #3D3D38;

  /* Accent (amber) */
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-muted: rgba(217, 119, 6, 0.25);
  --color-accent-text: #FBBF24;

  /* Status colors (semantic only) */
  --color-status-running: #34D399;
  --color-status-warning: #EAB308;
  --color-status-error: #EF4444;
  --color-status-error-text: #F87171;
  --color-status-info: #3B82F6;

  /* Fonts */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --font-timer: var(--font-mono);
  --font-ui: var(--font-sans);
}

/* Accent color overrides */
[data-accent="amber"] {
  --color-accent: #D97706;
  --color-accent-hover: #B45309;
  --color-accent-muted: rgba(217, 119, 6, 0.25);
  --color-accent-text: #FBBF24;
}
[data-accent="blue"] {
  --color-accent: #3B82F6;
  --color-accent-hover: #2563EB;
  --color-accent-muted: rgba(59, 130, 246, 0.25);
  --color-accent-text: #60A5FA;
}
[data-accent="purple"] {
  --color-accent: #8B5CF6;
  --color-accent-hover: #7C3AED;
  --color-accent-muted: rgba(139, 92, 246, 0.25);
  --color-accent-text: #C4B5FD;
}
[data-accent="green"] {
  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-accent-muted: rgba(16, 185, 129, 0.25);
  --color-accent-text: #34D399;
}
[data-accent="red"] {
  --color-accent: #EF4444;
  --color-accent-hover: #DC2626;
  --color-accent-muted: rgba(239, 68, 68, 0.25);
  --color-accent-text: #F87171;
}
[data-accent="pink"] {
  --color-accent: #EC4899;
  --color-accent-hover: #DB2777;
  --color-accent-muted: rgba(236, 72, 153, 0.25);
  --color-accent-text: #F472B6;
}
[data-accent="cyan"] {
  --color-accent: #06B6D4;
  --color-accent-hover: #0891B2;
  --color-accent-muted: rgba(6, 182, 212, 0.25);
  --color-accent-text: #22D3EE;
}

/* Light mode */
[data-theme="light"] {
  --color-bg-base: #FAFAF9;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #F5F5F4;
  --color-bg-inset: #E7E5E4;
  --color-text-primary: #1C1917;
  --color-text-secondary: #44403C;
  --color-text-tertiary: #57524D;
  --color-border-subtle: #E7E5E4;
  --color-border-visible: #D6D3D1;
  --color-status-error-text: #B91C1C;
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  #app {
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: var(--color-bg-base);
    overflow: hidden;
  }

  body {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-bg-base);
  }

  input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--color-accent) !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  #main-content p {
    max-width: 80ch;
  }
  p + p {
    margin-top: 1.5em;
  }

  .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Pulse animation for running timer dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.animate-pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Pulse animation for timer seconds */
@keyframes pulse-seconds {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.animate-pulse-seconds {
  animation: pulse-seconds 1s ease-in-out infinite;
}

/* Toast animations */
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-20px) translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.animate-toast-enter {
  animation: toast-enter 200ms ease-out;
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-toast-exit {
  animation: toast-exit 150ms ease-in forwards;
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* Pulse animation for timer colon */
@keyframes pulse-colon {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.animate-pulse-colon {
  animation: pulse-colon 1s ease-in-out infinite;
}

/* Markdown inline styles */
.markdown-inline strong { font-weight: 600; }
.markdown-inline em { font-style: italic; }
.markdown-inline code {
  padding: 0.1em 0.3em;
  background: var(--color-bg-elevated);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.markdown-inline a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* ============================================
   MOTION SYSTEM - Transitions & Animations
   ============================================ */

/* Page transitions */
.page-enter-active {
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-leave-active {
  transition: opacity 150ms ease-out,
              transform 150ms ease-out;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(8px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* List item transitions */
.list-enter-active {
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.list-leave-active {
  transition: opacity 150ms ease-in,
              transform 150ms ease-in;
  position: absolute;
}
.list-move {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.list-enter-from {
  opacity: 0;
  transform: translateY(12px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* Tag chip transitions */
.chip-enter-active {
  transition: opacity 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip-leave-active {
  transition: opacity 100ms ease-in,
              transform 100ms ease-in;
}
.chip-enter-from {
  opacity: 0;
  transform: scale(0.8);
}
.chip-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* Modal transitions */
.modal-enter-active {
  transition: opacity 200ms ease-out;
}
.modal-leave-active {
  transition: opacity 150ms ease-in;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

/* Dropdown transitions */
.dropdown-enter-active {
  transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown-leave-active {
  transition: opacity 100ms ease-in,
              transform 100ms ease-in;
}
.dropdown-enter-from {
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
}
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* Content fade-in */
.fade-enter-active {
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-leave-active {
  transition: opacity 150ms ease-out;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(4px);
}
.fade-leave-to {
  opacity: 0;
}

/* Slide up (bulk action bar) */
.slide-up-enter-active {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-up-leave-active {
  transition: transform 150ms ease-in,
              opacity 150ms ease-in;
}
.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* Expand/collapse (checklist, panels) */
.expand-enter-active {
  transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.expand-leave-active {
  transition: max-height 200ms ease-out,
              opacity 200ms ease-out;
  overflow: hidden;
}
.expand-enter-from {
  max-height: 0;
  opacity: 0;
}
.expand-enter-to {
  max-height: 500px;
  opacity: 1;
}
.expand-leave-from {
  max-height: 500px;
  opacity: 1;
}
.expand-leave-to {
  max-height: 0;
  opacity: 0;
}

/* Tour overlay fade */
.tour-fade-enter-active {
  transition: opacity 200ms ease-out;
}
.tour-fade-leave-active {
  transition: opacity 150ms ease-in;
}
.tour-fade-enter-from,
.tour-fade-leave-to {
  opacity: 0;
}

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

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-surface) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Empty state floating icon */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Button interactive feedback */
.btn-primary {
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 150ms ease;
}
.btn-primary:hover {
  transform: scale(1.02);
}
.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

.btn-icon:active {
  transform: scale(0.85);
  transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-icon-delete:active {
  transform: scale(0.85) rotate(-10deg);
  transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Card hover lift */
.card-hover {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms ease;
}
.card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-hover:active {
  transform: translateY(0);
}

/* Progress bar animate-in */
.progress-bar {
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Timer start pulse */
@keyframes timer-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.animate-timer-pulse {
  animation: timer-pulse 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Timer stop glow */
@keyframes timer-glow {
  0% { text-shadow: 0 0 0 transparent; }
  30% { text-shadow: 0 0 12px var(--color-accent-muted); }
  100% { text-shadow: 0 0 0 transparent; }
}

.animate-timer-glow {
  animation: timer-glow 600ms ease-out;
}

/* Respect reduced motion preference */
@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;
  }
}

/* Manual reduced-motion override (applied via JS class on <html>) */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.reduce-motion .animate-pulse-colon,
.reduce-motion .animate-pulse-dot,
.reduce-motion .animate-pulse-seconds {
  animation: none !important;
  opacity: 0.7;
}

.reduce-motion .animate-float,
.reduce-motion .animate-timer-pulse,
.reduce-motion .animate-timer-glow,
.reduce-motion .skeleton {
  animation: none !important;
}

.reduce-motion .btn-primary:hover,
.reduce-motion .btn-primary:active,
.reduce-motion .btn-icon:active,
.reduce-motion .btn-icon-delete:active,
.reduce-motion .card-hover:hover,
.reduce-motion .card-hover:active {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-primary:active,
  .btn-icon:active,
  .btn-icon-delete:active,
  .card-hover:hover,
  .card-hover:active {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text-secondary: #D0D0C8;
    --color-text-tertiary: #C8C8C0;
    --color-border-subtle: #5A5A54;
    --color-border-visible: #7A7A72;
  }
  [data-theme="light"] {
    --color-text-secondary: #2C2926;
    --color-text-tertiary: #3A3632;
    --color-border-subtle: #A8A29E;
    --color-border-visible: #78716C;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
  }
}

@media print {
  header,
  nav,
  .fixed,
  .sticky,
  [role="tooltip"],
  [role="status"],
  .animate-pulse-dot,
  .animate-float,
  .sr-only-focusable,
  button[aria-label="Minimize"],
  button[aria-label="Maximize"],
  button[aria-label="Restore"],
  button[aria-label="Close"] {
    display: none !important;
  }

  body,
  [data-theme="dark"],
  [data-theme="light"] {
    background: white !important;
    color: black !important;
  }

  * {
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 4px 8px;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  tr {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #666 !important;
  }

  main {
    width: 100% !important;
    overflow: visible !important;
  }

  #app {
    overflow: visible !important;
    height: auto !important;
  }
}