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

@layer base {
  /* Remove default focus box-shadows */
  input:focus,
  textarea:focus,
  select:focus {
    box-shadow: none !important;
  }

  /* Set default outline color to match brand instead of browser blue */
  * {
    outline-color: hsl(var(--primary));
  }

  :root {
    /* App-specific color variables */
    --color-primary: #1f6f68;
    --color-user-message: #174d49;
    --color-user-message-bg: #e6f3ef;
    --color-avatar-bg: #dfe9e6;
    --color-secondary: #365f5b;
    --color-success: #15956d;
    --color-warning: #c47a16;
    --color-error: #d14b4b;
    --color-background: #f5f2eb;
    --color-canvas: #fbfaf6;
    --color-subagent-hover: #e4efeb;
    --color-surface: #ffffff;
    --color-surface-raised: #fffdf8;
    --color-tool-surface: #f6f4ed;
    --color-tool-surface-hover: #efebe1;
    --color-border: #ded8cc;
    --color-border-light: #eee8dc;
    --color-text-primary: #202622;
    --color-text-secondary: #66706b;
    --color-text-tertiary: #8d9690;
    --color-file-button: #ffffff;
    --color-file-button-hover: #f0ebe1;
    --color-category-plum: #8a5a9e;
    --color-category-slate: #4a6b8a;
    --color-category-rose: #b56a7a;
    --color-category-sage: #5a8a4a;
    --scrollbar-thumb: #c5bdae;
    --scrollbar-thumb-hover: #a79d8d;

    /* Tailwind token aliases used by existing utility classes */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: var(--color-text-tertiary);
    --text-quaternary: #a7aea8;
    --text-disabled: #b9c0bb;
    --text-error: var(--color-error);
    --text-warning: var(--color-warning);
    --text-success: var(--color-success);
    --text-placeholder: #9ca59f;
    --text-brand-primary: var(--color-primary);
    --text-brand-secondary: #2e827a;
    --text-brand-tertiary: #6f9993;
    --text-button-primary: #ffffff;
    --bg-primary: var(--color-canvas);
    --bg-primary_hover: #f2eee6;
    --bg-secondary: var(--color-surface);
    --bg-secondary_hover: #f6f2ea;
    --bg-tertiary: var(--color-tool-surface);
    --bg-quaternary: #ebe5d8;
    --bg-brand-primary: var(--color-primary);
    --bg-brand-primary_hover: #185b55;
    --bg-brand-secondary: #d8ebe6;
    --bg-brand-tertiary: #edf7f4;
    --bg-success-primary: #e5f6ef;
    --bg-success-secondary: #d5eee4;
    --bg-success-strong: var(--color-success);
    --bg-warning-primary: #fff2d7;
    --bg-warning-secondary: #f7dfad;
    --bg-warning-strong: var(--color-warning);
    --bg-error-primary: #fde9e7;
    --bg-error-secondary: #f8d7d4;
    --bg-error-strong: var(--color-error);
    --bg-error-strong-hover: #b33f3f;
    --border-primary: var(--color-border);
    --border-secondary: #d3cabd;
    --border-tertiary: var(--color-border-light);
    --border-error: #f0b8b4;
    --border-error-strong: var(--color-error);
    --border-brand: #b5d6cf;
    --border-brand-strong: var(--color-primary);
    --border-brand-subtle: #dcece8;
    --border-strong: #b8ad9e;
    --border-warning: #eccb86;
    --border-success: #a8dac8;

    /* Dark theme colors */
    --color-primary-dark: #2dd4bf;
    --color-user-message-dark: #076699;
    --color-avatar-bg-dark: #bcb2fd;
    --color-secondary-dark: #2dd4bf;
    --color-success-dark: #34d399;
    --color-warning-dark: #fbbf24;
    --color-error-dark: #f87171;
    --color-background-dark: #0f0f0f;
    --color-subagent-hover-dark: #d0c9fe;
    --color-surface-dark: #1a1a1a;
    --color-border-dark: #2d2d2d;
    --color-border-light-dark: #232323;
    --color-text-primary-dark: #f3f4f6;
    --color-text-secondary-dark: #9ca3af;
    --color-text-tertiary-dark: #6b7280;

    /* Spacing variables */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Font family variables */
    --font-family-base:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono:
      "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Font size variables */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Font weight variables */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Line height variables */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Border radius variables */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Shadow variables */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transition variables */
    --transition-base: 200ms ease;

    /* Layout variables */
    --sidebar-width: 320px;
    --sidebar-collapsed-width: 60px;
    --header-height: 64px;
    --panel-width: 40vw;
    --chat-max-width: 900px;

    /* Tailwind/Radix UI component variables */
    --radius: 0.5rem;
    --background: 40 33% 95%;
    --foreground: 140 9% 14%;
    --card: 45 100% 99%;
    --card-foreground: 140 9% 14%;
    --popover: 45 100% 99%;
    --popover-foreground: 140 9% 14%;
    --primary: 175 56% 28%;
    --primary-foreground: 0 0% 100%;
    --secondary: 43 28% 90%;
    --secondary-foreground: 140 9% 14%;
    --muted: 42 29% 92%;
    --muted-foreground: 140 5% 42%;
    --accent: 164 29% 90%;
    --accent-foreground: 175 48% 21%;
    --destructive: 0 61% 56%;
    --destructive-foreground: 0 0% 100%;
    --border: 39 22% 84%;
    --input: 39 22% 84%;
    --ring: 175 56% 28%;
    --sidebar: 42 35% 93%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* App-specific color variables */
      --color-primary: #5ee4d0;
      --color-user-message: #d7fff8;
      --color-user-message-bg: #123a38;
      --color-avatar-bg: #173d3a;
      --color-secondary: #b5d9d2;
      --color-success: #55d7a5;
      --color-warning: #f6c866;
      --color-error: #ff8a82;
      --color-background: #111513;
      --color-canvas: #161b19;
      --color-subagent-hover: #1e302d;
      --color-surface: #1b211f;
      --color-surface-raised: #222a27;
      --color-tool-surface: #202723;
      --color-tool-surface-hover: #26302c;
      --color-border: #343d38;
      --color-border-light: #29312d;
      --color-text-primary: #eef4ef;
      --color-text-secondary: #a6b4ad;
      --color-text-tertiary: #76847d;
      --color-file-button: #202723;
      --color-file-button-hover: #2a332f;
      --color-category-plum: #c9a4dc;
      --color-category-slate: #8fb0d0;
      --color-category-rose: #d8a0ad;
      --color-category-sage: #a8c98e;
      --scrollbar-thumb: #3d4943;
      --scrollbar-thumb-hover: #586760;

      --text-primary: var(--color-text-primary);
      --text-secondary: var(--color-text-secondary);
      --text-tertiary: var(--color-text-tertiary);
      --text-quaternary: #65736c;
      --text-disabled: #56645d;
      --text-error: var(--color-error);
      --text-warning: var(--color-warning);
      --text-success: var(--color-success);
      --text-placeholder: #74827b;
      --text-brand-primary: var(--color-primary);
      --text-brand-secondary: #9ae8dc;
      --text-brand-tertiary: #71bdb2;
      --text-button-primary: #0d1715;
      --bg-primary: var(--color-canvas);
      --bg-primary_hover: #1c2320;
      --bg-secondary: var(--color-surface);
      --bg-secondary_hover: #242c29;
      --bg-tertiary: var(--color-tool-surface);
      --bg-quaternary: #2a332f;
      --bg-brand-primary: var(--color-primary);
      --bg-brand-primary_hover: #7debdc;
      --bg-brand-secondary: #173d3a;
      --bg-brand-tertiary: #112d2b;
      --bg-success-primary: #14382c;
      --bg-success-secondary: #1b4c3b;
      --bg-success-strong: var(--color-success);
      --bg-warning-primary: #3c2d16;
      --bg-warning-secondary: #513d1d;
      --bg-warning-strong: var(--color-warning);
      --bg-error-primary: #451f20;
      --bg-error-secondary: #5a292a;
      --bg-error-strong: var(--color-error);
      --bg-error-strong-hover: #ffa199;
      --border-primary: var(--color-border);
      --border-secondary: #46524b;
      --border-tertiary: var(--color-border-light);
      --border-error: #79403f;
      --border-error-strong: var(--color-error);
      --border-brand: #2c615a;
      --border-brand-strong: var(--color-primary);
      --border-brand-subtle: #21423e;
      --border-strong: #5a665f;
      --border-warning: #735827;
      --border-success: #2d6f56;

      /* Tailwind/Radix UI component variables for dark mode */
      --radius: 0.5rem;
      --background: 140 11% 7%;
      --foreground: 140 21% 95%;
      --card: 150 10% 13%;
      --card-foreground: 140 21% 95%;
      --popover: 150 10% 13%;
      --popover-foreground: 140 21% 95%;
      --primary: 171 70% 63%;
      --primary-foreground: 168 31% 7%;
      --secondary: 150 9% 20%;
      --secondary-foreground: 140 21% 95%;
      --muted: 150 9% 17%;
      --muted-foreground: 144 10% 68%;
      --accent: 165 22% 18%;
      --accent-foreground: 171 70% 78%;
      --destructive: 4 100% 75%;
      --destructive-foreground: 168 31% 7%;
      --border: 145 8% 22%;
      --input: 145 8% 22%;
      --ring: 171 70% 63%;
      --sidebar: 150 10% 12%;
      --chart-1: 220 70% 50%;
      --chart-2: 160 60% 45%;
      --chart-3: 30 80% 55%;
      --chart-4: 280 65% 60%;
      --chart-5: 340 75% 55%;
    }
  }
}

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

html,
body {
  height: 100%;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary);
}

h1 {
  font-size: 1.875rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 200ms ease;

  &:hover {
    opacity: 0.8;
  }
}

code {
  font-family:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.9em;
  padding: 0.125em 0.25em;
  background-color: var(--color-surface);
  border-radius: 0.25rem;
}

pre {
  font-family:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.75;
  padding: 1rem;
  background-color: var(--color-surface);
  border-radius: 0.375rem;
  overflow-x: auto;

  code {
    padding: 0;
    background-color: transparent;
  }
}

ul,
ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

li {
  margin-bottom: 0.25rem;

  &:last-child {
    margin-bottom: 0;
  }
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
  background: none;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }
}

.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;
}

/* Optimization Window animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes toolPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes toolSweep {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.tool-running-sweep::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 12%, transparent),
    transparent
  );
  animation: toolSweep 1.8s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .tool-running-sweep::after {
    animation: none;
  }
}

/* Custom scrollbar styles */
.scrollbar-pretty {
  overflow-y: scroll;
}

.scrollbar-pretty::-webkit-scrollbar {
  width: 6px;
}

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

.scrollbar-pretty::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}

.scrollbar-pretty::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Global diff highlighting styles */
.word-added {
  background-color: rgba(46, 160, 67, 0.4);
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.word-removed {
  background-color: rgba(248, 81, 73, 0.4);
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: #f85149;
}
