@import "tailwindcss";

@theme {
  --font-sans: var(--font-geist);
  --font-serif: var(--font-instrument);

  --color-brand-slate: #373a46;
  --color-brand-grey: #fcfcfc;
  --color-accent: #10b981;
  
  --radius-button: 40px;
  
  --shadow-editorial: 0px 10px 40px 5px rgba(194,194,194,0.25);
  --shadow-glossy-inner: inset -4px -6px 25px 0px rgba(201,201,201,0.08), inset 4px 4px 10px 0px rgba(29,29,29,0.24);
  --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

:root {
  --background: #ffffff;
  --foreground: #09090b;
  --primary: #09090b;
  --accent: #10b981;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
}

/* Custom easing for high-end feel */
.cubic-bezier-entrance {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.text-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}