@import "tailwindcss";
@import "./fonts.css";

:root {
  --background: #ffffff;
  --foreground: #171717;
  --font-google-sans: 'Google Sans', sans-serif;
  --font-google-sans-display: 'Google Sans Display', sans-serif;
  --notebook-bg: #f9fafb; /* Tailwind gray-50 */
  --notebook-dot: #e5e7eb; /* Tailwind gray-200 for dots */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-google-sans);
  --font-display: var(--font-google-sans-display);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  font-family: var(--font-google-sans);
  background-color: var(--notebook-bg);
  background-image: radial-gradient(var(--notebook-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow-x: hidden;
}

/* Container styling for paper effect */
.paper-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(2px);
}

/* Notebook paper dotted background - now for specific elements only */
.notebook-paper-bg {
  background-color: var(--notebook-bg);
  background-image: radial-gradient(var(--notebook-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.02);
}

/* Shadow effect for paper depth */
.paper-shadow {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.03),
    0 4px 6px rgba(0, 0, 0, 0.02),
    inset 0 0 3px rgba(255, 255, 255, 0.8);
}

/* Add this to your global CSS */
::placeholder {
  color: rgba(0, 0, 0, 0.6) !important; /* Darker placeholder text */
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}

::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}