@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Fira+Code:wght@400;500;700&family=Inter:wght@300;400;500;600;700;800&family=Architects+Daughter&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
@import "tailwindcss";

@source "./**/*.{ts,tsx}";
@source "../app/**/*.{ts,tsx}";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #0a0b10;
  --foreground: #f8fafc;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --secondary: #0ea5e9;
  --accent: #d946ef;
  
  --bg-panel: rgba(15, 23, 42, 0.45);
  --bg-panel-light: rgba(255, 255, 255, 0.03);
  --border-panel: rgba(255, 255, 255, 0.06);
  --border-panel-light: rgba(255, 255, 255, 0.04);
  --bg-dots: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  --bg-grid: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  --editor-bg: rgba(3, 7, 18, 0.9);
  --editor-line-numbers: rgba(255, 255, 255, 0.02);
  --editor-text: #cbd5e1;
  --text-muted: #94a3b8;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --input-bg: #0f172a;
}

.theme-light {
  --background: #f8fafc;
  --foreground: #0f172a;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --secondary: #0284c7;
  --accent: #c084fc;
  
  --bg-panel: rgba(255, 255, 255, 0.75);
  --bg-panel-light: rgba(15, 23, 42, 0.02);
  --border-panel: rgba(15, 23, 42, 0.08);
  --border-panel-light: rgba(15, 23, 42, 0.04);
  --bg-dots: radial-gradient(rgba(15, 23, 42, 0.12) 1px, transparent 1px);
  --bg-grid: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  --editor-bg: rgba(255, 255, 255, 0.95);
  --editor-line-numbers: rgba(15, 23, 42, 0.02);
  --editor-text: #334155;
  --text-muted: #64748b;
  --shadow-color: rgba(15, 23, 42, 0.08);
  --input-bg: #e2e8f0;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
  --font-handwritten: 'Caveat', cursive;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Accent text selection — a small "pro SaaS" signature */
::selection {
  background: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--foreground);
}

/* App-level icon hit targets snap smoothly between states */
button,
input,
select,
textarea,
a {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Background Grids */
.bg-dot-pattern {
  background-image: var(--bg-dots);
  background-size: 20px 20px;
}

.bg-grid-pattern {
  background-image: var(--bg-grid);
  background-size: 40px 40px;
}

/* Glassmorphism Classes */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-panel);
  box-shadow: 0 10px 30px -10px var(--shadow-color);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel-light {
  background: var(--bg-panel-light);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-panel-light);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 40px -5px rgba(99, 102, 241, 0.2);
}

.glow-secondary {
  box-shadow: 0 0 40px -5px rgba(14, 165, 233, 0.2);
}

/* Handdrawn styles */
.font-hand {
  font-family: 'Caveat', cursive;
}

/* Custom drawing cursor styling */
.cursor-draw {
  cursor: crosshair;
}

.cursor-grab-active {
  cursor: grabbing;
}

/* Hide scrollbars (used by collapsed sidebar) */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Fade in animation (used by modals, dropdowns, panels) */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.25s ease-out both;
}

/* ============================================================================
   THEME STYLE SYSTEM
   ============================================================================
   `data-style` on <html> selects a visual preset on top of the existing
   dark/light mode. Each preset overrides the semantic CSS variables and, where
   needed, re-skins the shared surfaces (panels, borders, shadows, radius).
   ============================================================================ */

/* Accessible focus ring shared by every style */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   BRUTALIST — flat, square, thick borders, hard offset shadows, no blur
   ---------------------------------------------------------------------------- */
html[data-style="brutalist"] {
  --background: #0a0a0a;
  --foreground: #e8e8e8;
  --primary: #ff2d20;
  --primary-hover: #e0261a;
  --secondary: #ffb020;
  --accent: #ff2d20;

  --bg-panel: #171717;
  --bg-panel-light: #101010;
  --border-panel: #e8e8e8;
  --border-panel-light: #3a3a3a;
  --bg-dots: radial-gradient(rgba(232, 232, 232, 0.22) 1.5px, transparent 1.5px);
  --bg-grid: linear-gradient(rgba(232, 232, 232, 0.08) 2px, transparent 2px),
             linear-gradient(90deg, rgba(232, 232, 232, 0.08) 2px, transparent 2px);
  --editor-bg: #0f0f0f;
  --editor-line-numbers: #1a1a1a;
  --editor-text: #e8e8e8;
  --text-muted: #a3a3a3;
  --shadow-color: rgba(232, 232, 232, 0.9);
  --input-bg: #1a1a1a;
}
html.theme-light[data-style="brutalist"] {
  --background: #f4f3ef;
  --foreground: #141414;
  --primary: #e01510;
  --primary-hover: #c0130e;
  --secondary: #d97706;
  --accent: #e01510;

  --bg-panel: #ffffff;
  --bg-panel-light: #faf9f6;
  --border-panel: #141414;
  --border-panel-light: #141414;
  --bg-dots: radial-gradient(rgba(20, 20, 20, 0.3) 1.5px, transparent 1.5px);
  --bg-grid: linear-gradient(rgba(20, 20, 20, 0.07) 2px, transparent 2px),
             linear-gradient(90deg, rgba(20, 20, 20, 0.07) 2px, transparent 2px);
  --editor-bg: #ffffff;
  --editor-line-numbers: #ececec;
  --editor-text: #1a1a1a;
  --text-muted: #6b6b6b;
  --shadow-color: rgba(20, 20, 20, 0.9);
  --input-bg: #ececec;
}
html[data-style="brutalist"] *,
html[data-style="brutalist"] *::before,
html[data-style="brutalist"] *::after {
  border-radius: 0 !important;
}
html[data-style="brutalist"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
}
html[data-style="brutalist"] .glass-panel,
html[data-style="brutalist"] nav,
html[data-style="brutalist"] [data-brutal-shadow="true"] {
  border-width: 2px;
  border-style: solid;
  box-shadow: 6px 6px 0 0 var(--border-panel) !important;
}
html[data-style="brutalist"] :is(.bg-white, .bg-slate-50, .dark\:bg-slate-900, .dark\:bg-slate-950) {
  box-shadow: 4px 4px 0 0 var(--border-panel) !important;
}
html.dark[data-style="brutalist"] .dark\:bg-slate-900,
html.dark[data-style="brutalist"] .dark\:bg-slate-950 {
  background-color: #171717;
}
html.dark[data-style="brutalist"] .dark\:bg-slate-800 {
  background-color: #1d1d1d;
}
html.dark[data-style="brutalist"] .dark\:bg-slate-100,
html.dark[data-style="brutalist"] .dark\:bg-slate-200 {
  background-color: #2a2a2a;
}
html:not(.dark)[data-style="brutalist"] .bg-white {
  background-color: #ffffff;
}

/* ----------------------------------------------------------------------------
   NEON — near-black, monospace UI, neon green/cyan accents, glow + grid
   ---------------------------------------------------------------------------- */
html[data-style="neon"] {
  --background: #050507;
  --foreground: #d9ffe6;
  --primary: #22ff88;
  --primary-hover: #0fe678;
  --secondary: #00e0ff;
  --accent: #ff2ec4;

  --bg-panel: rgba(9, 20, 14, 0.6);
  --bg-panel-light: rgba(34, 255, 136, 0.04);
  --border-panel: rgba(34, 255, 136, 0.28);
  --border-panel-light: rgba(34, 255, 136, 0.1);
  --bg-dots: radial-gradient(rgba(34, 255, 136, 0.16) 1px, transparent 1px);
  --bg-grid: linear-gradient(rgba(0, 224, 255, 0.06) 1px, transparent 1px),
             linear-gradient(90deg, rgba(0, 224, 255, 0.06) 1px, transparent 1px);
  --editor-bg: rgba(3, 10, 7, 0.92);
  --editor-line-numbers: rgba(34, 255, 136, 0.06);
  --editor-text: #a8ffc9;
  --text-muted: #4fd98d;
  --shadow-color: rgba(34, 255, 136, 0.25);
  --input-bg: rgba(6, 16, 11, 0.9);
}
html.theme-light[data-style="neon"] {
  --background: #f2faf6;
  --foreground: #053322;
  --primary: #059669;
  --primary-hover: #047857;
  --secondary: #0891b2;
  --accent: #db2777;

  --bg-panel: rgba(255, 255, 255, 0.85);
  --bg-panel-light: rgba(5, 150, 105, 0.04);
  --border-panel: rgba(5, 150, 105, 0.25);
  --border-panel-light: rgba(5, 150, 105, 0.1);
  --bg-dots: radial-gradient(rgba(5, 150, 105, 0.18) 1px, transparent 1px);
  --editor-bg: rgba(255, 255, 255, 0.95);
  --editor-line-numbers: rgba(5, 150, 105, 0.04);
  --editor-text: #065f46;
  --text-muted: #4b9a75;
  --shadow-color: rgba(5, 150, 105, 0.15);
  --input-bg: #e6f6ee;
}
html[data-style="neon"] body {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
  letter-spacing: -0.01em;
}
html[data-style="neon"] .glass-panel {
  border-color: var(--border-panel);
  box-shadow: 0 0 0 1px rgba(34, 255, 136, 0.12), 0 0 30px -8px rgba(34, 255, 136, 0.45);
}
html.theme-light[data-style="neon"] .glass-panel {
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.1), 0 8px 30px -10px rgba(5, 150, 105, 0.2);
}
html.dark[data-style="neon"] .dark\:bg-slate-900,
html.dark[data-style="neon"] .dark\:bg-slate-950 {
  background-color: #08140d;
}
html.dark[data-style="neon"] .dark\:bg-slate-800 {
  background-color: #0c1c12;
}
html.dark[data-style="neon"] .dark\:bg-slate-100,
html.dark[data-style="neon"] .dark\:bg-slate-200 {
  background-color: #12301f;
}

/* ----------------------------------------------------------------------------
   SOFT — minimal, airy, pastel accents, gentle blur and shadows
   ---------------------------------------------------------------------------- */
html[data-style="soft"] {
  --background: #0e0f13;
  --foreground: #e7e9ee;
  --primary: #8b8cf8;
  --primary-hover: #7b7cf0;
  --secondary: #7dd3fc;
  --accent: #f0abfc;

  --bg-panel: rgba(255, 255, 255, 0.06);
  --bg-panel-light: rgba(255, 255, 255, 0.02);
  --border-panel: rgba(255, 255, 255, 0.09);
  --border-panel-light: rgba(255, 255, 255, 0.05);
  --shadow-color: rgba(0, 0, 0, 0.35);
  --input-bg: rgba(255, 255, 255, 0.06);
}
html.theme-light[data-style="soft"] {
  --background: #fafaff;
  --foreground: #1e2330;
  --primary: #6d6ef2;
  --primary-hover: #5d5ee8;
  --secondary: #38bdf8;
  --accent: #e879f9;

  --bg-panel: rgba(255, 255, 255, 0.85);
  --bg-panel-light: rgba(17, 24, 39, 0.02);
  --border-panel: rgba(17, 24, 39, 0.07);
  --border-panel-light: rgba(17, 24, 39, 0.04);
  --shadow-color: rgba(17, 24, 39, 0.1);
  --input-bg: #eef0ff;
}
html[data-style="soft"] .glass-panel {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ----------------------------------------------------------------------------
   PAPER — warm paper tones, dashed sketch borders, earthy accents
   ---------------------------------------------------------------------------- */
html[data-style="paper"] {
  --background: #1b1712;
  --foreground: #f1e7d7;
  --primary: #d97706;
  --primary-hover: #b45309;
  --secondary: #65a30d;
  --accent: #b45309;

  --bg-panel: rgba(46, 40, 30, 0.55);
  --bg-panel-light: rgba(255, 245, 230, 0.03);
  --border-panel: rgba(217, 119, 6, 0.22);
  --border-panel-light: rgba(217, 119, 6, 0.1);
  --bg-dots: radial-gradient(rgba(241, 231, 215, 0.12) 1px, transparent 1px);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --input-bg: rgba(30, 26, 20, 0.8);
}
html.theme-light[data-style="paper"] {
  --background: #f7f1e3;
  --foreground: #2d2417;
  --primary: #b45309;
  --primary-hover: #92400e;
  --secondary: #65a30d;
  --accent: #a16207;

  --bg-panel: rgba(255, 250, 240, 0.85);
  --bg-panel-light: rgba(120, 90, 40, 0.04);
  --border-panel: rgba(180, 83, 9, 0.35);
  --border-panel-light: rgba(180, 83, 9, 0.18);
  --bg-dots: radial-gradient(rgba(120, 90, 40, 0.18) 1px, transparent 1px);
  --shadow-color: rgba(120, 90, 40, 0.18);
  --input-bg: #f3e9d2;
}
html[data-style="paper"] .glass-panel {
  border-style: dashed;
  border-width: 2px;
}
html.dark[data-style="paper"] .dark\:bg-slate-900,
html.dark[data-style="paper"] .dark\:bg-slate-950 {
  background-color: #241e15;
}
html.dark[data-style="paper"] .dark\:bg-slate-800 {
  background-color: #2d261a;
}
html:not(.dark)[data-style="paper"] .bg-white {
  background-color: #fdf8ee;
}