/* Draper '26: Mad Men x Harvey.ai - Pure HTML Version */

:root {
  /* Background: Deepest Charcoal, almost void */
  --background: 30 15% 4%;
  --background-color: hsl(30, 15%, 4%);
  
  /* Foreground: Stark Antique White */
  --foreground: 40 20% 92%;
  --foreground-color: hsl(40, 20%, 92%);

  /* Cards: Subtle elevation */
  --card: 30 15% 4%;
  --card-foreground: 40 20% 92%;

  /* Popovers */
  --popover: 30 15% 5%;
  --popover-foreground: 40 20% 92%;

  /* Primary: Draper Gold (#E5C55D) */
  --primary: 46 73% 63%;
  --primary-color: hsl(46, 73%, 63%);
  --primary-foreground: 30 15% 4%;

  /* Secondary: Muted warm grey */
  --secondary: 30 5% 15%;
  --secondary-color: hsl(30, 5%, 15%);
  --secondary-foreground: 40 20% 92%;

  /* Muted: Very subtle for text */
  --muted: 30 5% 15%;
  --muted-foreground: 30 5% 50%;
  --muted-foreground-color: hsl(30, 5%, 50%);

  /* Accent: Used for hover states */
  --accent: 30 5% 12%;
  --accent-foreground: 40 20% 92%;

  /* Borders */
  --border: 30 5% 15%;
  --border-color: hsl(30, 5%, 15%);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

::selection {
  background: hsla(46, 73%, 63%, 0.2);
  color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  letter-spacing: -0.025em;
  color: var(--foreground-color);
}

.font-editorial {
  font-family: 'Libre Baskerville', serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Cinematic Grain */
.bg-grain {
  position: relative;
}

.bg-grain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

@media (max-width: 768px) {
  .bg-grain::before {
    opacity: 0.05;
    background-image: none;
    background-color: transparent;
  }
}

/* Reveal animations - CSS only with scroll-triggered classes */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* Custom scrollbar for SlackDemo */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Primary color utilities */
.text-primary {
  color: var(--primary-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.border-primary {
  border-color: var(--primary-color);
}

.text-muted-foreground {
  color: var(--muted-foreground-color);
}

.bg-background {
  background-color: var(--background-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.border-border {
  border-color: var(--border-color);
}