@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* interactive-safe (AA-contrast) roles */
  --color-primary: #6d28d9;
  --color-on-primary: #ffffff;
  --color-secondary: #0e7ea8;
  --color-background: #faf9fe;
  --color-foreground: #150f26;
  --color-muted: #ede6ff;
  --color-border: #e3daf7;
  --color-destructive: #dc2626;
  --color-ring: #6d28d9;

  /* decorative aurora duo, drawn from the Ombrora mark — used for gradients, blobs, glow */
  --color-aurora-violet: #7e14ff;
  --color-aurora-cyan: #47bfff;
  --color-aurora-mist: #ede6ff;
  --gradient-aurora: linear-gradient(135deg, var(--color-aurora-violet), var(--color-aurora-cyan));

  /* file-family accents, reused for icon chips across the upload flow */
  --color-family-images: var(--color-aurora-violet);
  --color-family-documents: var(--color-aurora-cyan);
  --color-family-fonts: #f5a524;
  --color-family-ebooks: #10b981;

  --font-sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-sans);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  color-scheme: light dark;
  font: 16px/1.5 var(--font-sans);
}

:root[data-theme='dark'] {
  --color-primary: #9b6bff;
  --color-on-primary: #150f26;
  --color-secondary: #47bfff;
  --color-background: #0d0a18;
  --color-foreground: #f3f0ff;
  --color-muted: #1c1530;
  --color-border: #332853;
  --color-destructive: #fb7185;
  --color-ring: #9b6bff;

  --color-aurora-violet: #9b6bff;
  --color-aurora-cyan: #47bfff;
  --color-aurora-mist: #241a3d;

  --color-family-images: var(--color-aurora-violet);
  --color-family-documents: var(--color-aurora-cyan);
  --color-family-fonts: #ffb84d;
  --color-family-ebooks: #34d399;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  transition: background-color 200ms ease, color 200ms ease;
}

#root {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-primary);
}

button, input, select {
  font-family: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}