@charset "UTF-8";

/* Google Fonts - keep only what you actually use */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans&family=PT+Serif&family=Roboto&family=Urbanist:wght@100;500&display=swap");

/* === Design Tokens (Light/Dark mode using HSL) === */
:root {
  --background: 0 0% 100%;
  --surface-base: 0 0% 93%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;

  /* Custom elevation/shadow colors (example - adjust as needed) */
  --color-dp01: hsl(0 0% 0% / 0.05);
  --color-dp02: hsl(0 0% 0% / 0.1);
  --color-dp04: hsl(0 0% 0% / 0.15);
  --color-dp08: hsl(0 0% 0% / 0.2);
  --color-dp12: hsl(0 0% 0% / 0.3);
  --color-dp24: hsl(0 0% 0% / 0.5);
}

/* Dark mode */
.dark {
  --background: 0 0% 3.9%;
  --surface-base: 0 0% 8%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}

/* === Base Styles (Tailwind Preflight simplified) === */
*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid hsl(var(--border));
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: inherit;
}

/* Reset common elements */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; }

/* === Layout Utilities === */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* === Typography: .prose (simplified version) === */
/* Only include if you use rich text content */
.prose {
  color: #374151;
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.75;
}

.prose p { margin: 1.25em 0; }
.prose a { color: #111827; text-decoration: underline; font-weight: 500; }
.prose strong { color: #111827; font-weight: 600; }
.prose h1 { font-size: 2.25em; margin: 0 0 0.89em; font-weight: 800; line-height: 1.11; }
.prose h2 { font-size: 1.5em; margin: 2em 0 1em; font-weight: 700; line-height: 1.33; }
.prose h3 { font-size: 1.25em; margin: 1.6em 0 0.6em; font-weight: 600; line-height: 1.6; }
.prose ul, .prose ol { margin: 1.25em 0; padding-left: 1.625em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 1em;
  border-left: 0.25rem solid #e5e7eb;
  font-style: italic;
  font-weight: 500;
}
.prose pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: 0.857em 1.143em;
  border-radius: 0.375rem;
  overflow-x: auto;
}

/* Dark mode adjustments for prose */
.dark .prose {
  --tw-prose-body: #cbd5e1;
  --tw-prose-headings: #fff;
  color: #cbd5e1;
}

/* Markdown content styling for dark mode */
.dark .markdown-preview,
.dark .modal-section .content-box {
  color: hsl(var(--foreground));
}

.dark .markdown-preview h1,
.dark .markdown-preview h2,
.dark .markdown-preview h3,
.dark .markdown-preview h4,
.dark .markdown-preview h5,
.dark .markdown-preview h6 {
  color: hsl(var(--foreground));
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.dark .markdown-preview p {
  margin: 0.5em 0;
  line-height: 1.6;
}

.dark .markdown-preview code {
  background: hsl(var(--muted));
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

.dark .markdown-preview pre {
  background: hsl(var(--muted));
  padding: 12px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1em 0;
}

.dark .markdown-preview pre code {
  background: transparent;
  padding: 0;
}

.dark .markdown-preview ul,
.dark .markdown-preview ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.dark .markdown-preview blockquote {
  border-left: 3px solid hsl(var(--border));
  padding-left: 1em;
  margin: 1em 0;
  color: hsl(var(--muted-foreground));
}

/* === Commonly Used Utility Classes (add more as needed) === */
/* Flex & Grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }

/* Spacing */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.m-auto { margin: auto; }

/* Typography */
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }

/* Borders & Backgrounds */
.rounded-lg { border-radius: var(--radius); }
.border { border: 1px solid hsl(var(--border)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}