/* Shared Design System: Digital Atelier */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  --primary: #000000;
  --on-primary: #ffffff;
  --secondary: #facc15;
  --background: #f7f9fb;
  --surface: #f7f9fb;
  --surface-container: #eceef0;
  --surface-container-low: #f2f4f6;
  --surface-container-lowest: #ffffff;
  --on-surface: #191c1e;
  --on-surface-variant: #45464d;
  --outline: #76777d;
  --error: #ba1a1a;
  --tertiary-fixed-dim: #3cddc7;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Manrope', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Custom Tailwind Overrides via Tailwind CDN Config (placed in HTML, but CSS handles global defaults) */
/* Global Transition Utility */
.sleek-transition {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.transition-card {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.transition-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Button & Link Hover Effects */
a, button {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Scroll Reveal Styles */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Beta Badge Style */
.beta-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0.1em;
  opacity: 0.5;
  display: inline-block;
}