/* Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

/* CSS Variables and Theme Setup */
:root {
  --font-sans: 'Inter', sans-serif;

  /* Light Theme */
  --background-light: oklch(98% 0.02 240);
  --text-color-light: oklch(20% 0.02 240);
  --card-bg-light: oklch(100% 0 0 / 50%);
  --shadow-color-light: oklch(50% 0.02 240 / 30%);

  /* Dark Theme */
  --background-dark: oklch(20% 0.02 240);
  --text-color-dark: oklch(95% 0.02 240);
  --card-bg-dark: oklch(0% 0 0 / 20%);
  --shadow-color-dark: oklch(0% 0 0 / 40%);

  /* Apply Light Theme by default */
  --bg: var(--background-light);
  --text: var(--text-color-light);
  --card-bg: var(--card-bg-light);
  --shadow-color: var(--shadow-color-light);
}

[data-theme='dark'] {
  --bg: var(--background-dark);
  --text: var(--text-color-dark);
  --card-bg: var(--card-bg-dark);
  --shadow-color: var(--shadow-color-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: var(--background-dark);
    --text: var(--text-color-dark);
    --card-bg: var(--card-bg-dark);
    --shadow-color: var(--shadow-color-dark);
  }
}

/* Global Styles */
body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow: hidden;
}

body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%239C92AC" fill-opacity="0.05"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
    z-index: -1;
}

main {
  display: grid;
  place-items: center;
  padding: 1rem;
}

header {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* TotoGenerator Styles */
toto-generator {
  display: block;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2.5rem 3rem;
  box-shadow: 
    0 0 0 1px oklch(100% 0 0 / 15%),
    0px 4px 12px var(--shadow-color),
    0px 16px 48px var(--shadow-color);
  border: 1px solid oklch(100% 0 0 / 10%);
}

/* ThemeToggle Styles */
theme-toggle {
    display: block;
}