chadebebe/app/globals.css

@import "tailwindcss";

/* Mars palette — warm rust, terracotta, dusty sand, deep crater shadows */
:root {
  --background: #fff5ee;             /* warm sand mist */
  --foreground: #3a1f15;
  --ink: #3a1f15;                    /* deep crater */
  --ink-soft: #6b3a26;               /* baked clay */
  --muted: #a07560;
  --card: #ffffff;
  --card-soft: #fdebdc;              /* dust film */
  --border: #f3d8c3;
  --accent: #c1502c;                 /* mars-rust */
  --accent-soft: #fde0d0;
  --success: #7a8c4d;                /* olive — softer than green on warm bg */
  --success-soft: #f0eedb;
  --success-border: #d6d4a4;
  --success-ink: #4f5a30;
  --halo-1: rgba(231, 111, 65, 0.45);  /* burnt orange */
  --halo-2: rgba(255, 188, 138, 0.50); /* peach dust */
  --halo-3: rgba(196, 76, 39, 0.32);   /* deep rust */
  --planet-core: #c1502c;
  --planet-rim:  #8a2f15;
  color-scheme: light;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Quicksand', 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/*
 * Mars-scape background:
 * - warm dusty gradient base
 * - distant orange/peach halos (atmospheric haze)
 * - sparse pinpoint stars (deep space)
 */
.bg-cosmic {
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
    radial-gradient(circle at 88% 14%, var(--halo-2) 0%, transparent 44%),
    radial-gradient(circle at 50% 92%, var(--halo-3) 0%, transparent 50%),
    radial-gradient(1px 1px at 22% 30%, rgba(255, 235, 215, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 22%, rgba(255, 235, 215, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 235, 215, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 60%, rgba(255, 235, 215, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 82%, rgba(255, 235, 215, 0.7) 50%, transparent 51%),
    linear-gradient(180deg, var(--background) 0%, color-mix(in oklab, var(--background), var(--halo-2) 18%) 100%);
  background-attachment: fixed;
}

/*
 * Mars-disk glyph: a soft layered radial gradient that reads as a planet.
 * Used as a decorative ::before in the header.
 */
.mars-disk {
  position: absolute;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 35% 32%, color-mix(in oklab, var(--planet-core), white 25%) 0%, var(--planet-core) 38%, var(--planet-rim) 78%, transparent 100%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.18), transparent 60%);
  box-shadow:
    0 0 60px 10px color-mix(in oklab, var(--planet-core), transparent 70%),
    inset -8px -8px 30px color-mix(in oklab, var(--planet-rim), transparent 50%);
  opacity: 0.85;
}

.mars-planet {
  --mars-x: 0;
  --mars-y: 0;
  position: absolute;
  z-index: 0;
  width: clamp(5.5rem, 16vw, 8.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  perspective: 600px;
  filter: drop-shadow(0 24px 34px rgba(138, 47, 21, 0.24));
  transform:
    translate3d(calc(var(--mars-x) * 6px), calc(var(--mars-y) * 6px), 0)
    rotateX(calc(var(--mars-y) * -8deg))
    rotateY(calc(var(--mars-x) * 10deg));
  transition: transform 180ms ease, filter 180ms ease;
}

.mars-planet:hover {
  filter: drop-shadow(0 28px 38px rgba(138, 47, 21, 0.32));
}

.mars-planet:active {
  transform:
    translate3d(calc(var(--mars-x) * 5px), calc(var(--mars-y) * 5px), 0)
    rotateX(calc(var(--mars-y) * -8deg))
    rotateY(calc(var(--mars-x) * 10deg))
    scale(0.96);
}

.mars-planet__body,
.mars-planet__orbit,
.mars-planet__spark,
.mars-planet__band,
.mars-planet__crater {
  position: absolute;
  pointer-events: none;
}

.mars-planet__body {
  inset: 12%;
  overflow: hidden;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 32% 28%, #ffc6a1 0 9%, transparent 10%),
    radial-gradient(circle at 30% 32%, #e97445 0 34%, #c1502c 56%, #7c2814 100%);
  box-shadow:
    inset -18px -16px 30px rgba(71, 22, 12, 0.42),
    inset 10px 9px 18px rgba(255, 219, 184, 0.34),
    0 0 34px rgba(231, 111, 65, 0.48);
  animation: mars-float 5.5s ease-in-out infinite;
}

.mars-planet__body::before {
  content: "";
  position: absolute;
  inset: -18% -24%;
  background:
    linear-gradient(16deg, transparent 20%, rgba(255, 196, 142, 0.24) 24% 29%, transparent 34%),
    linear-gradient(-11deg, transparent 45%, rgba(121, 44, 24, 0.24) 49% 54%, transparent 59%);
  animation: mars-drift 9s linear infinite;
}

.mars-planet__orbit {
  width: 116%;
  height: 42%;
  border: 2px solid rgba(255, 205, 165, 0.78);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 9999px;
  transform: rotate(-18deg);
  box-shadow: 0 0 18px rgba(255, 188, 138, 0.34);
  animation: mars-orbit 4.5s ease-in-out infinite;
}

.mars-planet__band {
  left: 8%;
  right: 8%;
  height: 11%;
  border-radius: 9999px;
  background: rgba(255, 178, 124, 0.26);
  transform: rotate(-14deg);
}

.mars-planet__band--one {
  top: 36%;
}

.mars-planet__band--two {
  top: 58%;
  background: rgba(113, 41, 23, 0.22);
}

.mars-planet__crater {
  border-radius: 9999px;
  background:
    radial-gradient(circle at 38% 35%, rgba(255, 219, 184, 0.24), transparent 36%),
    rgba(106, 36, 19, 0.38);
  box-shadow: inset 2px 2px 4px rgba(68, 21, 12, 0.34);
}

.mars-planet__crater--one {
  width: 16%;
  height: 16%;
  top: 30%;
  left: 52%;
}

.mars-planet__crater--two {
  width: 11%;
  height: 11%;
  top: 58%;
  left: 29%;
}

.mars-planet__crater--three {
  width: 9%;
  height: 9%;
  top: 64%;
  left: 64%;
}

.mars-planet__spark {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 9999px;
  background: #fff1df;
  box-shadow: 0 0 12px rgba(255, 241, 223, 0.9);
  animation: mars-spark 2.4s ease-in-out infinite;
}

.mars-planet__spark--one {
  top: 10%;
  left: 17%;
}

.mars-planet__spark--two {
  right: 10%;
  bottom: 18%;
  width: 0.34rem;
  height: 0.34rem;
  animation-delay: 0.8s;
}

@keyframes mars-float {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes mars-drift {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}

@keyframes mars-orbit {
  0%, 100% {
    transform: rotate(-18deg) scaleX(1);
  }
  50% {
    transform: rotate(-18deg) scaleX(1.08);
  }
}

@keyframes mars-spark {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mars-planet,
  .mars-planet *,
  .mars-planet *::before {
    animation: none !important;
    transition: none !important;
  }
}

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

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

.shadow-soft {
  box-shadow:
    0 6px 22px -10px color-mix(in oklab, var(--accent), transparent 70%),
    0 2px 6px -2px rgba(58, 31, 21, 0.10);
}

.shadow-lifted {
  box-shadow:
    0 22px 44px -22px color-mix(in oklab, var(--accent), transparent 55%),
    0 8px 16px -8px rgba(58, 31, 21, 0.12);
}

/* Form elements */
:root input,
:root textarea,
:root select {
  color: var(--ink);
  background-color: var(--card);
  border-color: var(--border);
}

:root input::placeholder,
:root textarea::placeholder {
  color: var(--muted);
}