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

@layer base {
  /* ===== DEFAULT LIGHT ===== */
  :root,
  [data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-text: #ffffff;
    --border: #e2e8f0;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --nav-bg: #ffffff;
    --sidebar-bg: #f8fafc;
    --hover-bg: #f1f5f9;
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --ring: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --gradient-start: #3b82f6;
    --gradient-end: #8b5cf6;
  }

  /* ===== DEFAULT DARK ===== */
  [data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-text: #ffffff;
    --border: #334155;
    --card-bg: #1e293b;
    --input-bg: #1e293b;
    --input-border: #475569;
    --nav-bg: #1e293b;
    --sidebar-bg: #0f172a;
    --hover-bg: #334155;
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --ring: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #3b82f6;
    --gradient-end: #8b5cf6;
  }

  /* ===== DRACULA ===== */
  [data-theme="dracula"] {
    --bg-primary: #282a36;
    --bg-secondary: #44475a;
    --bg-tertiary: #383a4c;
    --text-primary: #f8f8f2;
    --text-secondary: #6272a4;
    --accent: #bd93f9;
    --accent-hover: #caa8fc;
    --accent-text: #282a36;
    --border: #44475a;
    --card-bg: #383a4c;
    --input-bg: #44475a;
    --input-border: #6272a4;
    --nav-bg: #21222c;
    --sidebar-bg: #21222c;
    --hover-bg: #44475a;
    --success: #50fa7b;
    --warning: #f1fa8c;
    --error: #ff5555;
    --ring: #bd93f9;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #bd93f9;
    --gradient-end: #ff79c6;
  }

  /* ===== CATPPUCCIN MOCHA ===== */
  [data-theme="mocha"] {
    --bg-primary: #1e1e2e;
    --bg-secondary: #313244;
    --bg-tertiary: #45475a;
    --text-primary: #cdd6f4;
    --text-secondary: #a6adc8;
    --accent: #89b4fa;
    --accent-hover: #b4befe;
    --accent-text: #1e1e2e;
    --border: #45475a;
    --card-bg: #313244;
    --input-bg: #313244;
    --input-border: #585b70;
    --nav-bg: #181825;
    --sidebar-bg: #181825;
    --hover-bg: #45475a;
    --success: #a6e3a1;
    --warning: #f9e2af;
    --error: #f38ba8;
    --ring: #89b4fa;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #89b4fa;
    --gradient-end: #cba6f7;
  }

  /* ===== CATPPUCCIN LATTE (Light) ===== */
  [data-theme="latte"] {
    --bg-primary: #eff1f5;
    --bg-secondary: #e6e9ef;
    --bg-tertiary: #dce0e8;
    --text-primary: #4c4f69;
    --text-secondary: #6c6f85;
    --accent: #1e66f5;
    --accent-hover: #2a6ef5;
    --accent-text: #ffffff;
    --border: #ccd0da;
    --card-bg: #e6e9ef;
    --input-bg: #eff1f5;
    --input-border: #bcc0cc;
    --nav-bg: #e6e9ef;
    --sidebar-bg: #dce0e8;
    --hover-bg: #dce0e8;
    --success: #40a02b;
    --warning: #df8e1d;
    --error: #d20f39;
    --ring: #1e66f5;
    --shadow-color: rgba(76, 79, 105, 0.1);
    --gradient-start: #1e66f5;
    --gradient-end: #8839ef;
  }

  /* ===== NORD ===== */
  [data-theme="nord"] {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --accent: #88c0d0;
    --accent-hover: #8fbcbb;
    --accent-text: #2e3440;
    --border: #4c566a;
    --card-bg: #3b4252;
    --input-bg: #3b4252;
    --input-border: #4c566a;
    --nav-bg: #2e3440;
    --sidebar-bg: #2e3440;
    --hover-bg: #434c5e;
    --success: #a3be8c;
    --warning: #ebcb8b;
    --error: #bf616a;
    --ring: #88c0d0;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #88c0d0;
    --gradient-end: #b48ead;
  }

  /* ===== TOKYO NIGHT ===== */
  [data-theme="tokyo-night"] {
    --bg-primary: #1a1b26;
    --bg-secondary: #24283b;
    --bg-tertiary: #2f3349;
    --text-primary: #a9b1d6;
    --text-secondary: #565f89;
    --accent: #7aa2f7;
    --accent-hover: #89b4fa;
    --accent-text: #1a1b26;
    --border: #3b4261;
    --card-bg: #24283b;
    --input-bg: #24283b;
    --input-border: #3b4261;
    --nav-bg: #16161e;
    --sidebar-bg: #16161e;
    --hover-bg: #2f3349;
    --success: #9ece6a;
    --warning: #e0af68;
    --error: #f7768e;
    --ring: #7aa2f7;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #7aa2f7;
    --gradient-end: #bb9af7;
  }

  /* ===== GRUVBOX DARK ===== */
  [data-theme="gruvbox-dark"] {
    --bg-primary: #282828;
    --bg-secondary: #3c3836;
    --bg-tertiary: #504945;
    --text-primary: #ebdbb2;
    --text-secondary: #a89984;
    --accent: #fe8019;
    --accent-hover: #fabd2f;
    --accent-text: #282828;
    --border: #504945;
    --card-bg: #3c3836;
    --input-bg: #3c3836;
    --input-border: #665c54;
    --nav-bg: #1d2021;
    --sidebar-bg: #1d2021;
    --hover-bg: #504945;
    --success: #b8bb26;
    --warning: #fabd2f;
    --error: #fb4934;
    --ring: #fe8019;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #fe8019;
    --gradient-end: #fabd2f;
  }

  /* ===== GRUVBOX LIGHT ===== */
  [data-theme="gruvbox-light"] {
    --bg-primary: #fbf1c7;
    --bg-secondary: #ebdbb2;
    --bg-tertiary: #d5c4a1;
    --text-primary: #3c3836;
    --text-secondary: #665c54;
    --accent: #d65d0e;
    --accent-hover: #af3a03;
    --accent-text: #fbf1c7;
    --border: #d5c4a1;
    --card-bg: #ebdbb2;
    --input-bg: #fbf1c7;
    --input-border: #bdae93;
    --nav-bg: #ebdbb2;
    --sidebar-bg: #ebdbb2;
    --hover-bg: #d5c4a1;
    --success: #79740e;
    --warning: #b57614;
    --error: #cc241d;
    --ring: #d65d0e;
    --shadow-color: rgba(60, 56, 54, 0.1);
    --gradient-start: #d65d0e;
    --gradient-end: #b57614;
  }

  /* ===== ROSE PINE ===== */
  [data-theme="rose-pine"] {
    --bg-primary: #191724;
    --bg-secondary: #1f1d2e;
    --bg-tertiary: #26233a;
    --text-primary: #e0def4;
    --text-secondary: #908caa;
    --accent: #c4a7e7;
    --accent-hover: #ebbcba;
    --accent-text: #191724;
    --border: #393552;
    --card-bg: #1f1d2e;
    --input-bg: #1f1d2e;
    --input-border: #393552;
    --nav-bg: #191724;
    --sidebar-bg: #191724;
    --hover-bg: #26233a;
    --success: #9ccfd8;
    --warning: #f6c177;
    --error: #eb6f92;
    --ring: #c4a7e7;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #c4a7e7;
    --gradient-end: #eb6f92;
  }

  /* ===== ROSE PINE DAWN (Light) ===== */
  [data-theme="rose-pine-dawn"] {
    --bg-primary: #faf4ed;
    --bg-secondary: #fffaf3;
    --bg-tertiary: #f2e9e1;
    --text-primary: #575279;
    --text-secondary: #797593;
    --accent: #907aa9;
    --accent-hover: #b4637a;
    --accent-text: #faf4ed;
    --border: #dfdad9;
    --card-bg: #fffaf3;
    --input-bg: #faf4ed;
    --input-border: #dfdad9;
    --nav-bg: #fffaf3;
    --sidebar-bg: #f2e9e1;
    --hover-bg: #f2e9e1;
    --success: #56949f;
    --warning: #ea9d34;
    --error: #b4637a;
    --ring: #907aa9;
    --shadow-color: rgba(87, 82, 121, 0.08);
    --gradient-start: #907aa9;
    --gradient-end: #b4637a;
  }

  /* ===== SOLARIZED DARK ===== */
  [data-theme="solarized-dark"] {
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --bg-tertiary: #0a4050;
    --text-primary: #839496;
    --text-secondary: #657b83;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --accent-text: #fdf6e3;
    --border: #073642;
    --card-bg: #073642;
    --input-bg: #073642;
    --input-border: #586e75;
    --nav-bg: #002b36;
    --sidebar-bg: #002b36;
    --hover-bg: #0a4050;
    --success: #859900;
    --warning: #b58900;
    --error: #dc322f;
    --ring: #268bd2;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #268bd2;
    --gradient-end: #2aa198;
  }

  /* ===== SOLARIZED LIGHT ===== */
  [data-theme="solarized-light"] {
    --bg-primary: #fdf6e3;
    --bg-secondary: #eee8d5;
    --bg-tertiary: #e4ddc8;
    --text-primary: #657b83;
    --text-secondary: #93a1a1;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --accent-text: #fdf6e3;
    --border: #eee8d5;
    --card-bg: #eee8d5;
    --input-bg: #fdf6e3;
    --input-border: #d3cbb7;
    --nav-bg: #eee8d5;
    --sidebar-bg: #eee8d5;
    --hover-bg: #e4ddc8;
    --success: #859900;
    --warning: #b58900;
    --error: #dc322f;
    --ring: #268bd2;
    --shadow-color: rgba(101, 123, 131, 0.1);
    --gradient-start: #268bd2;
    --gradient-end: #2aa198;
  }

  /* ===== ONE DARK ===== */
  [data-theme="one-dark"] {
    --bg-primary: #282c34;
    --bg-secondary: #2c313a;
    --bg-tertiary: #353b45;
    --text-primary: #abb2bf;
    --text-secondary: #636d83;
    --accent: #61afef;
    --accent-hover: #79bcf5;
    --accent-text: #282c34;
    --border: #3e4452;
    --card-bg: #2c313a;
    --input-bg: #2c313a;
    --input-border: #3e4452;
    --nav-bg: #21252b;
    --sidebar-bg: #21252b;
    --hover-bg: #353b45;
    --success: #98c379;
    --warning: #e5c07b;
    --error: #e06c75;
    --ring: #61afef;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #61afef;
    --gradient-end: #c678dd;
  }

  /* ===== GITHUB DARK ===== */
  [data-theme="github-dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --accent-text: #0d1117;
    --border: #30363d;
    --card-bg: #161b22;
    --input-bg: #0d1117;
    --input-border: #30363d;
    --nav-bg: #161b22;
    --sidebar-bg: #0d1117;
    --hover-bg: #21262d;
    --success: #3fb950;
    --warning: #d29922;
    --error: #f85149;
    --ring: #58a6ff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #58a6ff;
    --gradient-end: #bc8cff;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

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

  /* ===== SCRUNKLY.CAT DARK ===== */
  [data-theme="scrunkly-cat"] {
    --bg-primary: #161924;
    --bg-secondary: #161924;
    --bg-tertiary: #1b2130;
    --text-primary: #dadada;
    --text-secondary: #94a3b8;
    --accent: #b30051;
    --accent-hover: #d6336a;
    --accent-text: #ffffff;
    --border: rgba(255, 255, 255, 0.1);
    --card-bg: #1b2130;
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --nav-bg: #1b2130;
    --sidebar-bg: #161924;
    --hover-bg: rgba(255, 255, 255, 0.03);
    --success: #86b300;
    --warning: #ecb637;
    --error: #ec4137;
    --ring: #b30051;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #b30051;
    --gradient-end: #d6336a;
  }


@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-accent text-th-accent-t hover:bg-th-accent-h
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-bg-s text-th-text border border-th-border
    hover:bg-th-hover transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-error text-white hover:opacity-90
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    text-th-text-s hover:bg-th-hover hover:text-th-text
    transition-all duration-200 ease-out
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
    --tw-ring-offset-color: var(--bg-primary);
  }

  .input-field {
    @apply w-full px-4 py-2.5 rounded-lg
    bg-th-input text-th-text placeholder-th-text-s
    border border-th-input-b
    focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
    transition-all duration-200;
  }

  .card {
    @apply bg-th-card rounded-xl border border-th-border
    shadow-th transition-all duration-200;
  }

  .card-hover {
    @apply card hover:shadow-th-lg cursor-pointer;
  }
  .card-hover:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

@layer utilities {
  .gradient-text {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  }
}