@import "tailwindcss";

/* ── Design Tokens: Dark (default) ────────────────── */

:root,
[data-theme="dark"] {
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --bg-primary: #111111;
  --bg-secondary: #171717;
  --bg-tertiary: #1c1c1e;
  --bg-elevated: #242426;
  --bg-hover: #2c2c2e;

  --bg-sidebar: #141414;
  --bg-code: #0f0f0f;

  --border-subtle: #2c2c2e;
  --border-default: #3a3a3c;
  --border-strong: #48484a;
  --border-sidebar: #2c2c2e;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.5);

  --text-primary: #f5f5f7;
  --text-secondary: #b0b0b5;
  --text-tertiary: #8e8e93;
  --text-quaternary: #636366;
  --text-muted: #48484a;

  --green: #76b900;
  --green-light: #8ed100;
  --green-dim: #5a8f00;
  --green-glow: rgba(118, 185, 0, 0.2);
  --green-subtle: rgba(118, 185, 0, 0.08);
  --green-muted: rgba(118, 185, 0, 0.04);

  --red: #ff453a;
  --red-subtle: rgba(255, 69, 58, 0.12);
  --orange: #ff9f0a;
  --orange-subtle: rgba(255, 159, 10, 0.12);
  --yellow: #ffd60a;
  --yellow-subtle: rgba(255, 214, 10, 0.08);
  --blue: #0a84ff;
  --blue-subtle: rgba(10, 132, 255, 0.12);
  --success: #30d158;
  --success-subtle: rgba(48, 209, 88, 0.12);

  --scrim: rgba(0, 0, 0, 0.7);
  --glass-bg: rgba(17, 17, 17, 0.75);
  --selection-bg: rgba(118, 185, 0, 0.3);
  --selection-fg: #f5f5f7;
  --brand-line: linear-gradient(90deg, var(--green), transparent);

  color-scheme: dark;
}

/* ── Design Tokens: Light ─────────────────────────── */

[data-theme="light"] {
  --bg-primary: #f2f2f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e5e5ea;
  --bg-elevated: #ffffff;
  --bg-hover: #d1d1d6;

  --bg-sidebar: #f2f2f7;
  --bg-code: #e5e5ea;

  --border-subtle: #dcdee2;
  --border-default: #c8cad0;
  --border-strong: #aaacb4;
  --border-sidebar: #d8dbd4;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --text-quaternary: #aeaeb2;
  --text-muted: #c7c7cc;

  --green: #4d8400;
  --green-light: #5a9a00;
  --green-dim: #3d6a00;
  --green-glow: rgba(77, 132, 0, 0.15);
  --green-subtle: rgba(77, 132, 0, 0.1);
  --green-muted: rgba(77, 132, 0, 0.04);

  --red: #d70015;
  --red-subtle: rgba(215, 0, 21, 0.08);
  --orange: #c93400;
  --orange-subtle: rgba(201, 52, 0, 0.08);
  --yellow: #b25000;
  --yellow-subtle: rgba(178, 80, 0, 0.06);
  --blue: #0066cc;
  --blue-subtle: rgba(0, 102, 204, 0.08);
  --success: #248a3d;
  --success-subtle: rgba(36, 138, 61, 0.08);

  --scrim: rgba(0, 0, 0, 0.4);
  --glass-bg: rgba(247, 247, 248, 0.85);
  --selection-bg: rgba(77, 132, 0, 0.2);
  --selection-fg: #1d1d1f;
  --brand-line: linear-gradient(90deg, var(--green), transparent);

  color-scheme: light;
}

/* ── Base ──────────────────────────────────────────── */

* {
  font-family: var(--font-sans);
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ── Scrollbar ─────────────────────────────────────── */

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

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

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

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

/* ── Glass / Vibrancy ─────────────────────────────── */

.glass-toolbar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── Animations ────────────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(118, 185, 0, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(118, 185, 0, 0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out both;
}

.animate-slide-up {
  animation: slide-up 0.4s ease-out both;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out both;
}

.animate-pulse-green {
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out both;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

/* ── Skeleton / Shimmer ────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* ── Reduced Motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-scale-in {
    animation: fade-in 0.15s ease-out both !important;
  }

  .animate-pulse-green {
    animation: none !important;
  }

  .skeleton {
    animation: none !important;
    background: var(--bg-tertiary) !important;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ── Focus Ring ────────────────────────────────────── */

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--green);
}

.focus-ring:focus:not(:focus-visible) {
  box-shadow: none;
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--green);
}

/* ── Glass Effect ──────────────────────────────────── */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.glass-subtle {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Green Glow ────────────────────────────────────── */

.glow-green {
  box-shadow: 0 0 20px rgba(118, 185, 0, 0.15),
              0 0 40px rgba(118, 185, 0, 0.05);
}

.glow-green-sm {
  box-shadow: 0 0 8px rgba(118, 185, 0, 0.2);
}

/* ── Selection ─────────────────────────────────────── */

/* ── Selection ─────────────────────────────────────── */

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Prevent sidebar/toolbar from being selected with Ctrl+A */
.select-none-chrome {
  user-select: none;
  -webkit-user-select: none;
}
