/* css/style.css */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 0.5rem;

  /* Premium Slate & Indigo Palette - Light Mode */
  --background: 247.839deg 0.2% 98.5%; /* oklch converted approx to HSL for vanilla or custom props usage in standard CSS if needed, but Tailwind v4 uses fancy stuff. We will try to map to standard HSL or Hex for simplicity in vanilla CSS or just use these vars if we use a shim */
  
  /* Actually with Tailwind CDN, we can use the `style` attribute or a custom configuration object. 
     But to keep it simple and effective, let's define standard CSS variables that we can use with arbitrary Tailwind values 
     e.g., bg-[var(--background)] if needed, OR we can just use the closest Tailwind colors (Slate-50, Indigo-600, etc.)
  */
  
  --color-brand-primary: #4f46e5; /* Indigo 600 */
  --color-brand-secondary: #f8fafc; /* Slate 50 */
  --color-text-main: #0f172a; /* Slate 900 */
  --color-text-muted: #64748b; /* Slate 500 */
}

/* Glassmorphism utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Base resets if not covered by Tailwind Preflight */
body {
    font-family: var(--font-sans);
    background-color: #f8fafc; /* Slate 50 approximation of existing bg */
    color: var(--color-text-main);
}