@import "tailwindcss";

@theme {
  --color-bg-root: #0a0a0a;
  --color-bg-card: #111111;
  --color-bg-input: #0a0a0a;
  --color-bg-hover: #1a1a1a;
  --color-border: #262626;
  --color-border-hover: #404040;
  --color-border-focus: #6366f1;
  --color-text-primary: #ededed;
  --color-text-secondary: #a1a1a1;
  --color-text-tertiary: #737373;
  --color-text-muted: #525252;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-btn-primary-text: #ffffff;
  --color-success: #22c55e;
  --color-checkmark: #6366f1;
  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-active: #b91c1c;
  --color-warning: #f59e0b;
  --color-dev-accent: #8b5cf6;
  --color-status-yellow: #eab308;
  --color-status-gray: #6b7280;
  --color-badge-neutral: #9ca3af;
  --color-badge-neutral-bg: #374151;

  /* Spacing scale */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;

  /* Micro spacing */
  --spacing-half: 2px;
  --spacing-0-75: 3px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;

  /* Typography scale */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 24px;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-none: 1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.01em;

  /* Border radius */
  --radius-sm: 3px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 100px;

  /* Common sizes */
  --size-icon-sm: 16px;
  --size-icon-base: 20px;
  --size-icon-md: 24px;
  --size-icon-lg: 28px;
  --size-icon-xl: 32px;

  /* Min heights */
  --min-h-input: 38px;
  --min-h-card: 56px;

  /* Min widths */
  --min-w-button: 24px;
  --min-w-select: 180px;

  /* Shadows */
  --shadow-toast: 0 4px 12px rgb(0 0 0 / 30%);

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-pulse: 1.5s;
  --duration-shake: 0.4s;

  /* Animation easings */
  --ease-default: ease;
}

/*
 * Duplicate base values in :root to prevent Tailwind v4 from tree-shaking
 * variables only referenced via var() in SCSS modules (not via utility classes).
 */
:root {
  --color-bg-root: #0a0a0a;
  --color-bg-card: #111111;
  --color-bg-input: #0a0a0a;
  --color-bg-hover: #1a1a1a;
  --color-border: #262626;
  --color-border-hover: #404040;
  --color-border-focus: #6366f1;
  --color-text-primary: #ededed;
  --color-text-secondary: #a1a1a1;
  --color-text-tertiary: #737373;
  --color-text-muted: #525252;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-btn-primary-text: #ffffff;
  --color-success: #22c55e;
  --color-checkmark: #6366f1;
  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-active: #b91c1c;
  --color-warning: #f59e0b;
  --color-dev-accent: #8b5cf6;
  --color-status-yellow: #eab308;
  --color-status-gray: #6b7280;
  --color-badge-neutral: #9ca3af;
  --color-badge-neutral-bg: #374151;

  /* Spacing scale duplicates for tree-shaking workaround */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-half: 2px;
  --spacing-0-75: 3px;
  --spacing-1-5: 6px;
  --spacing-2-5: 10px;

  /* Typography duplicates */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-none: 1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --letter-spacing-tight: -0.01em;

  /* Sizing duplicates */
  --radius-sm: 3px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 100px;
  --size-icon-sm: 16px;
  --size-icon-base: 20px;
  --size-icon-md: 24px;
  --size-icon-lg: 28px;
  --size-icon-xl: 32px;
  --min-h-input: 38px;
  --min-h-card: 56px;
  --min-w-button: 24px;
  --min-w-select: 180px;

  /* Shadow and animation duplicates */
  --shadow-toast: 0 4px 12px rgb(0 0 0 / 30%);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-pulse: 1.5s;
  --duration-shake: 0.4s;
  --ease-default: ease;

  /* Color opacity variants - dark theme */
  --color-success-bg-light: rgb(34 197 94 / 10%);
  --color-success-border: rgb(34 197 94 / 15%);
  --color-error-bg-light: rgb(239 68 68 / 10%);
  --color-error-border: rgb(239 68 68 / 15%);
  --color-error-border-hover: rgb(239 68 68 / 20%);
  --color-warning-bg-light: rgb(245 158 11 / 10%);
  --color-warning-border: rgb(245 158 11 / 15%);
  --color-shadow: rgb(0 0 0 / 30%);
}

/* ---- Light theme overrides ---- */

[data-theme="light"],
[data-theme="system"].system-light {
  --color-bg-root: #ffffff;
  --color-bg-card: #f5f5f5;
  --color-bg-input: #ffffff;
  --color-bg-hover: #e5e5e5;
  --color-border: #d4d4d4;
  --color-border-hover: #a3a3a3;
  --color-border-focus: #4f46e5;
  --color-text-primary: #171717;
  --color-text-secondary: #525252;
  --color-text-tertiary: #737373;
  --color-text-muted: #a3a3a3;
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-btn-primary-text: #ffffff;
  --color-success: #16a34a;
  --color-checkmark: #4f46e5;
  --color-error: #dc2626;
  --color-error-hover: #dc2626;
  --color-error-active: #b91c1c;
  --color-warning: #d97706;
  --color-dev-accent: #8b5cf6;
  --color-status-yellow: #eab308;
  --color-status-gray: #6b7280;
  --color-badge-neutral: #6b7280;
  --color-badge-neutral-bg: #f3f4f6;

  /* Color opacity variants - light theme (same values work) */
  --color-success-bg-light: rgb(34 197 94 / 10%);
  --color-success-border: rgb(34 197 94 / 15%);
  --color-error-bg-light: rgb(239 68 68 / 10%);
  --color-error-border: rgb(239 68 68 / 15%);
  --color-error-border-hover: rgb(239 68 68 / 20%);
  --color-warning-bg-light: rgb(245 158 11 / 10%);
  --color-warning-border: rgb(245 158 11 / 15%);
  --color-shadow: rgb(0 0 0 / 15%);
}

/* ---- Base reset & body ---- */

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

/* ---- Focus styles ---- */

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-border-hover);
  outline-offset: 2px;
}

html, body, #root {
  height: 100%;
  background: var(--color-bg-root);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---- Titlebar ---- */

.titlebar-drag { -webkit-app-region: drag; }
.titlebar-no-drag { -webkit-app-region: no-drag; }

/* ---- Inputs ---- */

input[type="url"],
input[type="password"],
input[type="text"],
input[type="number"] {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;
  transition: border-color 150ms ease;
  outline: none;
  user-select: text;
  -webkit-user-select: text;

  &:hover {
    border-color: var(--color-border-hover);
  }

  &:focus {
    border-color: var(--color-border-focus);
  }

  &[readonly] {
    color: var(--color-text-secondary);
    cursor: default;
  }

  &::placeholder {
    color: var(--color-text-muted);
  }
}

/* ---- Select ---- */

select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: border-color 150ms ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;

  &:hover {
    border-color: var(--color-border-hover);
  }

  &:focus {
    border-color: var(--color-border-focus);
  }
}

/* ---- Content area ---- */

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 24px;
  -webkit-app-region: no-drag;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--color-bg-hover);
  }

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

  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
  }
}

/* ---- Animations ---- */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Performance: Reduce Animations ─────────────────────────── */
[data-reduce-animations="true"] *,
[data-reduce-animations="true"] *::before,
[data-reduce-animations="true"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* ── Performance: Reduce Visual Effects ─────────────────────── */
[data-reduce-effects="true"] *,
[data-reduce-effects="true"] *::before,
[data-reduce-effects="true"] *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background-image: none !important;
}
