@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Colors - Warm Unbleached Paper Theme */
  --color-brand-gold: #804D15;
  --color-brand-gold-light: #9E651B;
  --color-brand-black: #111111;
  --color-brand-surface: #F5F2EB;
  --color-brand-white: #FFFFFF;
  --color-brand-gray: #5C5C5C;
  --color-brand-border: #E5E0D8;
  
  /* Fonts - Artistic and luxurious */
  --font-sans: var(--font-sans), sans-serif;
  --font-display: var(--font-display), serif;

  /* Typography Scale */
  --text-hero: clamp(3rem, 8vw, 6rem);
  --text-h1: clamp(2.5rem, 5vw, 4.5rem);
  --text-h2: clamp(2rem, 3vw, 3rem);
  --text-body: clamp(1rem, 1.2vw, 1.125rem);
  
  /* Custom Animation Curves */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* Marquee animation */
  --animate-marquee: marquee 40s linear infinite;
}

/* ─────────────────────────────────────────────
   Dark Mode Overrides
   ───────────────────────────────────────────── */
.dark {
  --color-brand-gold: #9E651B;
  --color-brand-gold-light: #C9963F;
  --color-brand-black: #F5F2EB;
  --color-brand-surface: #0D0D0D;
  --color-brand-white: #1A1A1A;
  --color-brand-gray: #A0A0A0;
  --color-brand-border: #2A2A2A;
  --bg-noise: 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  --grain-mode: screen;
  --grain-opacity: 0.1;
}

.dark ::selection {
  background: rgba(158, 101, 27, 0.4);
}

/* Infinite marquee keyframes */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-fast {
  animation: marquee 20s linear infinite;
}

/* Loading animations */
@keyframes loading-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes brush-sweep {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}

/* Charcoal dust — realistic noise jitter */
@keyframes noise-jitter {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(-4%, 2%); }
  30% { transform: translate(2%, -4%); }
  40% { transform: translate(-2%, 6%); }
  50% { transform: translate(-4%, 2%); }
  60% { transform: translate(6%, 0); }
  70% { transform: translate(0, 6%); }
  80% { transform: translate(1%, 1%); }
  90% { transform: translate(-4%, 4%); }
}


:root {
  --background: #000000;
  --foreground: #ffffff;
  --bg-noise: 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  --grain-mode: multiply;
  --grain-opacity: 0.08;
}

html {
  cursor: url("/figma-cursor.svg") 1 1, auto;
}

html.dark {
  cursor: url("/figma-cursor-white.svg") 1 1, auto;
}

a, button, [role="button"], input[type="submit"], input[type="button"], select, label, summary, .cursor-pointer {
  cursor: pointer !important;
}

/* White cursor on dark backgrounds */
.bg-brand-black, .bg-black {
  cursor: url("/figma-cursor-white.svg") 1 1, auto;
}

html.dark .bg-brand-black,
html.dark .bg-black {
  cursor: url("/figma-cursor.svg") 1 1, auto;
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  html, html.dark, .bg-brand-black, .bg-black {
    cursor: auto;
  }
}

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

/* Base text constraints */
p {
  max-width: 65ch;
  line-height: 1.6;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #000000; 
}
html.dark ::-webkit-scrollbar-track {
  background: #1A1A1A; 
}
::-webkit-scrollbar-thumb {
  background: #1a1a1a; 
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #333333; 
}
::-webkit-scrollbar-thumb:hover {
  background: #333333; 
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #555555; 
}

/* Reduced motion: collapse scroll-linked sections, disable transforms */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard focus indicator */
:focus-visible {
  outline: 2px solid #9E651B;
  outline-offset: 2px;
}

.dark :focus-visible {
  outline-color: #C9963F;
}