/*
 * @docs ARCHITECTURE:Core
 * ### AI Assist Note
 * **@docs ARCHITECTURE:DesignSystem**
 * Standardized resource for the Tadpole OS engine.
 * ### 🔍 Debugging & Observability
 * Validated via Sovereign Audit.
 */

/**
 * @docs ARCHITECTURE:DesignSystem
 * 
 * ### AI Assist Note
 * **Global Styles**: Core Tailwind v4 configuration and architectural theme tokens.
 * All premium UI transitions and glassmorphism effects are defined here.
 */

@import "tailwindcss";

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-zinc-950: var(--color-theme-950);

  /* Neural Glass Status Tokens */
  --color-success: #22c55e;
  --color-info: #3b82f6;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --color-busy: var(--color-theme-cyan, #22d3ee);
  --color-error: var(--color-theme-rose, #f43f5e);
  --color-degraded: var(--color-theme-amber, #f59e0b);
  --color-idle: var(--color-theme-500);

  /* Alert/Status Theme Tokens */
  --color-danger-text: var(--color-danger);
  --color-danger-border: color-mix(in srgb, var(--color-danger) 20%, transparent);
  --color-danger-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);

  --color-warning-text: var(--color-warning);
  --color-warning-border: color-mix(in srgb, var(--color-warning) 20%, transparent);
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 10%, transparent);

  --color-info-text: var(--color-info);
  --color-info-border: color-mix(in srgb, var(--color-info) 20%, transparent);
  --color-info-bg: color-mix(in srgb, var(--color-info) 10%, transparent);

  --color-success-text: var(--color-success);
  --color-success-border: color-mix(in srgb, var(--color-success) 20%, transparent);
  --color-success-bg: color-mix(in srgb, var(--color-success) 10%, transparent);

  --color-background: var(--color-theme-950);
  --color-surface: var(--color-theme-900);
  --color-border: var(--color-theme-800);

  --font-size-xs: 0.875rem;
  --font-size-xs--line-height: 1.25rem;
  --font-size-sm: 1rem;
  --font-size-sm--line-height: 1.5rem;
  --font-size-base: 1.125rem;
  --font-size-base--line-height: 1.75rem;
  --font-size-lg: 1.25rem;
  --font-size-lg--line-height: 1.75rem;
  --font-size-xl: 1.5rem;
  --font-size-xl--line-height: 2rem;
  --font-size-2xl: 1.875rem;
  --font-size-2xl--line-height: 2.25rem;
  --font-size-3xl: 2.25rem;
  --font-size-3xl--line-height: 2.5rem;

  /* Asset Tokens */
  --path-logo: url("/assets/logo.png");
  --path-logo-full: url("/assets/tadpole_logo.png");

  /* Standard Transitions */
  --transition-sovereign: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@layer base {
  body {
    @apply bg-zinc-950 text-zinc-100 font-sans antialiased;
  }

  /* Global Improved Focus States for Accessibility (Neural Focus) */
  :focus-visible {
    @apply outline-none ring-2 ring-green-500 ring-offset-2 ring-offset-zinc-950;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply leading-[1.2] tracking-tight;
  }

  /* Smooth Interactive Transitions */
  a,
  button,
  input,
  select,
  textarea {
    @apply transition-all duration-200;
  }
}

:root,
[data-theme="zinc"] {
  font-family: 'Inter', system-ui, sans-serif;
  --color-theme-50: #fafafa;
  --color-theme-100: #f4f4f5;
  --color-theme-200: #e4e4e7;
  --color-theme-300: #d4d4d8;
  --color-theme-400: #a1a1aa;
  --color-theme-500: #71717a;
  --color-theme-600: #52525b;
  --color-theme-700: #3f3f46;
  --color-theme-800: #27272a;
  --color-theme-900: #18181b;
  --color-theme-950: #09090b;
}

html[data-density="compact"] {
  font-size: 14px;
}

html[data-density="comfortable"] {
  font-size: 16px;
}

/* Custom Scrollbar to match "Tadpole OS" sleek look */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes neural-pulse {
  0% {
    stroke-width: 1;
    opacity: 0.3;
    filter: drop-shadow(0 1px 1px currentColor);
  }
  50% {
    stroke-width: 2;
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px currentColor);
  }
  100% {
    stroke-width: 1;
    opacity: 0.3;
    filter: drop-shadow(0 1px 1px currentColor);
  }
}

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

@keyframes vertical-pulse {
  0% {
    opacity: 0.2;
    box-shadow: 0 1px 2px rgba(34, 197, 94, 0.2);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  }
  100% {
    opacity: 0.2;
    box-shadow: 0 1px 2px rgba(34, 197, 94, 0.2);
  }
}

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

.neural-grid {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Premium card container layout for consistent dashboard sizing */
.agent-grid-item {
  @apply w-full max-w-[360px] mx-auto transition-all duration-300;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 24px -4px rgba(0, 0, 0, 0.3);
}

.agent-grid-item:hover {
  @apply translate-y-[-4px];
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 16px 32px rgba(0, 0, 0, 0.3),
    0 32px 64px -8px rgba(0, 0, 0, 0.5);
}

/* ── Sovereign Panel Utilities ────────────────────────────────────── */

.sovereign-panel {
  background-color: color-mix(in srgb, var(--color-theme-950), transparent 50%);
  @apply backdrop-blur-xl border border-zinc-900 rounded-xl overflow-hidden shadow-2xl relative transition-all duration-300;
}

.sovereign-card {
  background-color: color-mix(in srgb, var(--color-theme-900), transparent 60%);
  border-color: color-mix(in srgb, var(--color-theme-800), transparent 50%);
  @apply backdrop-blur-md rounded-lg p-6 transition-all duration-300 shadow-lg relative overflow-hidden;
}

.sovereign-card:hover {
  background-color: color-mix(in srgb, var(--color-theme-900), transparent 40%);
  border-color: var(--color-theme-700);
  @apply translate-y-[-2px] shadow-2xl;
}

.sovereign-border {
  border-color: color-mix(in srgb, var(--color-theme-800), transparent 50%);
  background-color: color-mix(in srgb, var(--color-theme-950), transparent 70%);
  @apply border rounded-lg;
}

.sovereign-glow-green {
  @apply shadow-[0_0_20px_rgba(34,197,94,0.15)] hover:shadow-[0_0_30px_rgba(34,197,94,0.25)];
}

.sovereign-glow-amber {
  @apply shadow-[0_0_20px_rgba(245,158,11,0.15)] hover:shadow-[0_0_30px_rgba(245,158,11,0.25)];
}

.sovereign-header-text {
  @apply text-[10px] font-bold text-zinc-500 uppercase tracking-[0.1em] font-mono;
}

/* ── Ticker / Marquee Animation ───────────────────────────────────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee var(--duration, 30s) linear infinite;
}

.pause-on-hover:hover .animate-marquee {
  animation-play-state: paused;
}

/* ── Accessibility: Reduced Motion ────────────────────────────────── */
@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;
  }

  .animate-marquee,
  .neural-pulse,
  .vertical-pulse {
    animation: none !important;
  }
}

/* ── Sovereign Styling Utilities ──────────────────────────────────── */
@utility sovereign-transition {
  transition: var(--transition-sovereign);
}

@utility focus-sovereign {
  outline: none;
  &:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
}

/* React Flow attribution override */
.react-flow__attribution {
  display: none !important;
}

/* Metadata: [index] */

// Metadata: [index]
