moygroup/app/globals.css

@import "tailwindcss";

@theme {
  /* ── Core Palette ── */
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-moy-gold: #c9a96e;
  --color-moy-gold-light: #d6bc8b;
  --color-moy-gold-dark: #b39152;
  --color-moy-gold-faint: rgba(201, 169, 110, 0.12);
  --color-moy-gold-subtle: rgba(201, 169, 110, 0.25);

  --color-moy-blue: #1c3552;
  --color-moy-blue-light: #2c4d75;
  --color-moy-blue-dark: #0f1f30;

  --color-moy-green: #3a5342;
  --color-moy-green-light: #4a6854;

  --color-moy-dark: #121212;
  --color-moy-dark-lighter: #1e1e1e;
  --color-moy-dark-border: #2c2c2c;

  --color-moy-light: #f9f6f0;
  --color-moy-light-warm: #f0ead8;
  --color-moy-cream: #ede8de;

  /* ── Typography ── */
  --font-serif: var(--font-cormorant);
  --font-sans: var(--font-montserrat);

  /* ── Animations ── */
  --animate-shimmer: shimmer 2.8s linear infinite;
  --animate-marquee: marquee 28s linear infinite;
  --animate-marquee-reverse: marquee 28s linear infinite reverse;
  --animate-float: float 7s ease-in-out infinite;
  --animate-pulse-gold: pulse-gold 2.4s ease-in-out infinite;
  --animate-fade-up: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-scale-in: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Raw CSS tokens (non-Tailwind) ── */
:root {
  --background: #f9f6f0;
  --foreground: #121212;

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 36px rgba(0,0,0,0.14);
  --shadow-xl:   0 16px 60px rgba(0,0,0,0.20);
  --shadow-gold: 0 4px 28px rgba(201,169,110,0.35);
  --shadow-gold-lg: 0 8px 48px rgba(201,169,110,0.45);

  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --foreground: #f9f6f0;
  }
}

/* ── Keyframes ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
  50%       { box-shadow: 0 0 0 10px rgba(201,169,110,0.15); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes revealLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
}

/* ── Utility classes ── */
.moy-shimmer {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(201, 169, 110, 0.45) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: var(--animate-shimmer);
}

.moy-gold-line {
  display: block;
  width: 3.5rem;
  height: 1.5px;
  background: var(--color-moy-gold);
  transform-origin: left;
}

.moy-gold-line-center {
  display: block;
  width: 3.5rem;
  height: 1.5px;
  background: var(--color-moy-gold);
  margin-inline: auto;
}

/* Grain texture overlay for hero */
.moy-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.3;
}