/* assets/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: oklch(0.10 0.02 240);
  --foreground: oklch(0.97 0.01 220);
  --primary: oklch(0.78 0.16 210);
  --muted-foreground: oklch(0.68 0.03 220);
  --border: oklch(0.78 0.16 210 / 22%);
  --input: oklch(0.22 0.03 240);
  --gradient-carbon: linear-gradient(135deg, oklch(0.14 0.025 240), oklch(0.08 0.02 240));
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.78 0.16 210 / 18%), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23050814'/><path d='M0 20h40M20 0v40' stroke='%2300e5ff' stroke-opacity='0.06' stroke-width='1'/></svg>");
  background-attachment: fixed;
}

.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0.02em; }

.carbon-panel {
  background: var(--gradient-carbon);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Utilitários nativos para substituir lógicas do React */
.backdrop-blur-xl { backdrop-filter: blur(24px); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }
.bg-background { background-color: var(--background); }
.text-primary { color: var(--primary); }