@import "tailwindcss";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-error: var(--error);
  --color-error-foreground: var(--error-foreground);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
}

:root {
  /* Layout width */
  --layout-max-w: 1440px;

  /* Editorial + Glass — warm neutral base, teal accent (matching Frontend) */
  --font-system:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --background: #f6f4f0;
  --foreground: #18181b;
  --card: #ffffff;
  --card-foreground: #18181b;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --primary: #1a7a6d;
  --primary-foreground: #ffffff;
  --secondary: #edeae4;
  --secondary-foreground: #18181b;
  --muted: #edeae4;
  --muted-foreground: #52525b;
  --accent: #edeae4;
  --accent-foreground: #18181b;
  --destructive: #c44d2b;
  --destructive-foreground: #ffffff;
  --border: #ddd8cf;
  --input: #ddd8cf;
  --ring: #1a7a6d;
  --radius: 0.75rem;
  --chart-1: #1a7a6d;
  --chart-2: #0d9488;
  --chart-3: #06b6d4;
  --chart-4: #7c3aed;
  --chart-5: #ea580c;
  /* Semantic status colors */
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #18181b;
  --info: #60a5fa;
  --info-foreground: #ffffff;
  --error: #dc2626;
  --error-foreground: #ffffff;
}

::selection {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.dark {
  --background: #0c0e14;
  --foreground: #f0eeeb;
  --card: #181a24;
  --card-foreground: #f0eeeb;
  --popover: #181a24;
  --popover-foreground: #f0eeeb;
  --primary: #5eead4;
  --primary-foreground: #0c0e14;
  --secondary: #262830;
  --secondary-foreground: #f0eeeb;
  --muted: #262830;
  --muted-foreground: #9ca3af;
  --accent: #262830;
  --accent-foreground: #f0eeeb;
  --destructive: #fb923c;
  --destructive-foreground: #0c0e14;
  --border: #262830;
  --input: #262830;
  --ring: #5eead4;
  --chart-1: #5eead4;
  --chart-2: #22d3ee;
  --chart-3: #a78bfa;
  --chart-4: #a78bfa;
  --chart-5: #fb923c;
  --success: #22c55e;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #18181b;
  --info: #60a5fa;
  --info-foreground: #ffffff;
  --error: #ef4444;
  --error-foreground: #ffffff;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-base text-foreground antialiased;
  }
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }
}

/* ── Dark ambient gradients ── */

/* ── Text size preferences ── */
.text-size-small { font-size: 14px; }
.text-size-medium { font-size: 16px; }
.text-size-large { font-size: 18px; }

.dark-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
}
.dark .dark-ambient {
  opacity: 1;
}
.dark-ambient-1 {
  background: radial-gradient(
    ellipse 600px 400px at 15% 8%,
    rgba(94, 234, 212, 0.06),
    transparent
  );
}
.dark-ambient-2 {
  background: radial-gradient(
    ellipse 500px 500px at 85% 70%,
    rgba(167, 139, 250, 0.04),
    transparent
  );
}

/* ── Glass card utility ── */
.glass-card {
  @apply border-border/60 bg-card;
  border-radius: var(--radius);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s,
    border-color 0.28s;
}
.dark .glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.12);
}
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.1);
}
.dark .glass-card:hover {
  border-color: rgba(94, 234, 212, 0.3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.35);
}

.glass-card-static {
  @apply border-border/60 bg-card;
  border-radius: var(--radius);
  transition:
    box-shadow 0.28s,
    border-color 0.28s;
}
.dark .glass-card-static {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Animations ── */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes section-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-card-in {
  animation: card-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-section-in {
  animation: section-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Card hover lift — subtle motion */
.card-hover-lift {
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}
.card-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px -8px oklch(0 0 0 / 0.15),
    0 4px 12px -4px oklch(0 0 0 / 0.08);
}
.dark .card-hover-lift:hover {
  box-shadow:
    0 8px 24px -8px oklch(0 0 0 / 0.35),
    0 4px 12px -4px oklch(0 0 0 / 0.2);
}

/* ── Scrollbar ── */
* {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
  border-radius: 20px;
  border: transparent;
}

.glass {
  backdrop-filter: blur(15px) saturate(100%);
  -webkit-backdrop-filter: blur(15px) saturate(100%);
}

/* Terminal-specific styles for ANSI escape code rendering */
.terminal-output {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  line-height: 1.2;
}

.terminal-output span {
  display: inline;
}

/* Ensure proper rendering of ANSI colors */
.terminal-output * {
  color: inherit;
  background-color: inherit;
}

/* Enhanced terminal styling */
.xterm {
  padding: 0.5rem;
}

/* Set basic background - let ANSI colors work naturally */
.xterm .xterm-viewport {
  background-color: #0d1117;
}

.xterm .xterm-screen {
  background-color: #0d1117;
}

/* Better selection colors */
.xterm .xterm-selection {
  background-color: #264f78;
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
  /* Improve touch targets */
  button, .cursor-pointer {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better text sizing on mobile */
  .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  /* Improve form elements on mobile */
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Better spacing for mobile */
  .space-y-2 > * + * {
    margin-top: 0.5rem;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  /* Improve modal and overlay positioning */
  .fixed.inset-0 {
    padding: 1rem;
  }
  
  /* Better scroll behavior */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet improvements */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Better spacing for tablets */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Ensure proper viewport handling */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile terminal centering - simple approach */
.mobile-terminal {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mobile-terminal .xterm {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
