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

@layer base {
  :root {
    --brand: 99 102 241;
    /* Text colors */
    --page-text: 255 255 255;
    --page-text-secondary: 163 163 163;
    --page-text-muted: 115 115 115;
    --page-label: 212 212 212;
    --page-link: 129 140 248;
    /* Surface colors */
    --page-card-bg: rgba(255,255,255,0.03);
    --page-card-border: rgba(255,255,255,0.06);
    --page-input-bg: rgba(255,255,255,0.04);
    --page-input-border: rgba(255,255,255,0.1);
    --page-surface: rgba(255,255,255,0.04);
    --page-surface-hover: rgba(255,255,255,0.08);
    --page-divider: rgba(255,255,255,0.06);
    --page-inset: rgba(0,0,0,0.4);
    /* Semantic colors — dark mode defaults */
    --page-success: 74 222 128;
    --page-success-text: 74 222 128;
    --page-warning: 250 204 21;
    --page-warning-text: 253 224 71;
    --page-danger: 248 113 113;
    --page-danger-text: 248 113 113;
    --page-info: 192 132 252;
    --page-info-text: 192 132 252;
  }

  body {
    @apply bg-black text-white;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  ::selection {
    @apply bg-brand-500/30;
  }

  ::-webkit-scrollbar {
    @apply w-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-700 rounded-full;
  }

  .theme-light ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300;
  }

  /* Light theme variable overrides */
  .theme-light {
    --page-text: 17 24 39;
    --page-text-secondary: 107 114 128;
    --page-text-muted: 156 163 175;
    --page-label: 55 65 81;
    --page-link: 79 70 229;
    --page-card-bg: rgba(255,255,255,0.85);
    --page-card-border: rgb(229,231,235);
    --page-input-bg: #fff;
    --page-input-border: rgb(209,213,219);
    --page-surface: rgba(0,0,0,0.03);
    --page-surface-hover: rgba(0,0,0,0.06);
    --page-divider: rgb(229,231,235);
    --page-inset: rgba(0,0,0,0.04);
    --page-success: 22 163 74;
    --page-success-text: 22 163 74;
    --page-warning: 202 138 4;
    --page-warning-text: 161 98 7;
    --page-danger: 220 38 38;
    --page-danger-text: 220 38 38;
    --page-info: 124 58 237;
    --page-info-text: 124 58 237;
  }

  .theme-claude {
    --page-link: 217 119 87;
    --page-card-bg: rgba(255,255,255,0.7);
    --page-card-border: #E8DDD0;
    --page-surface: rgba(61,48,36,0.04);
    --page-surface-hover: rgba(61,48,36,0.08);
    --page-divider: #E8DDD0;
    --page-inset: rgba(61,48,36,0.06);
  }
}

@layer components {
  .glass {
    background: var(--page-card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--page-card-border);
    @apply rounded-2xl;
  }

  .glass-sm {
    background: var(--page-card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--page-card-border);
    @apply rounded-xl;
  }

  .btn-primary {
    @apply px-6 py-2.5 rounded-xl bg-brand-600 font-medium text-sm
           hover:bg-brand-500 active:bg-brand-700
           transition-all duration-200 ease-out
           shadow-lg shadow-brand-600/20
           disabled:opacity-50 disabled:cursor-not-allowed;
    color: #fff;
  }

  .btn-secondary {
    @apply px-6 py-2.5 rounded-xl font-medium text-sm
           transition-all duration-200 ease-out
           disabled:opacity-50 disabled:cursor-not-allowed;
    border: 1px solid var(--page-input-border);
    color: rgb(var(--page-label));
  }
  .btn-secondary:hover {
    background: rgba(var(--page-text), 0.05);
  }

  .input {
    @apply w-full px-4 py-2.5 rounded-xl text-sm
           focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:border-brand-500/60
           transition-all duration-200;
    background: var(--page-input-bg);
    border: 1px solid var(--page-input-border);
    color: rgb(var(--page-text));
  }
  .input::placeholder {
    color: rgb(var(--page-text-muted));
  }

  .card-glow {
    @apply relative overflow-hidden;
  }

  .card-glow::before {
    content: '';
    @apply absolute -inset-0.5 bg-gradient-to-r from-brand-500/20 via-purple-500/20 to-pink-500/20 rounded-2xl opacity-0 transition-opacity duration-500;
  }

  .card-glow:hover::before {
    @apply opacity-100;
  }
}

/* ═══════════════════════════════════════════════════════════
   Light theme shared-page color overrides
   Outside @layer to win specificity over Tailwind utilities.
   ═══════════════════════════════════════════════════════════ */

/* Map dark-theme text utilities to light-appropriate colors.
   Uses a data attribute to avoid Tailwind circular-dependency issues. */
.theme-light {
  /* Override body defaults scoped to this container */
  color: rgb(17 24 39);
}

/* Glass cards get subtle shadow in light mode */
.theme-light .glass,
.theme-light .glass-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Light theme input focus */
.theme-light .input:focus {
  border-color: rgb(99 102 241);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* Card glow toned down */
.theme-light .card-glow::before {
  background: linear-gradient(to right, rgba(99,102,241,0.06), rgba(168,85,247,0.06), rgba(236,72,153,0.06));
}

/* ═══════════════════════════════════════════════
   Claude theme accent overrides
   ═══════════════════════════════════════════════ */
.theme-claude .btn-primary {
  background-color: #D97757;
  box-shadow: 0 4px 14px rgba(217,119,87,0.15);
}
.theme-claude .btn-primary:hover {
  background-color: #C4613F;
}
.theme-claude .btn-primary:active {
  background-color: #A85232;
}

.theme-claude .glass,
.theme-claude .glass-sm {
  border-color: #E8DDD0;
}

.theme-claude .input {
  border-color: #D9C5B2;
}
.theme-claude .input:focus {
  border-color: #D97757;
  box-shadow: 0 0 0 3px rgba(217,119,87,0.15);
}

.theme-claude .btn-secondary {
  border-color: #D9C5B2;
  color: #6B5D4F;
}
.theme-claude .btn-secondary:hover {
  background-color: rgba(217,119,87,0.05);
}

/* ═══════════════════════════════════════════════
   Theme-aware utility classes for surfaces/dividers
   ═══════════════════════════════════════════════ */
.surface {
  background: var(--page-surface);
}
.surface-hover:hover {
  background: var(--page-surface-hover);
}
.bg-page-inset {
  background: var(--page-inset);
}
.divide-page > * + * {
  border-color: var(--page-divider);
}
.border-page-divider {
  border-color: var(--page-divider);
}
.bg-page-surface {
  background: var(--page-surface);
}
.bg-page-surface-hover {
  background: var(--page-surface-hover);
}
.hover\:bg-page-surface:hover {
  background: var(--page-surface);
}
.hover\:bg-page-surface-hover:hover {
  background: var(--page-surface-hover);
}