chadebebe/app/globals.css

@import "tailwindcss";

@variant dark (.dark &);

/* 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;
}

:root[data-theme="dark"],
.dark {
  --background: #1a0c08;             /* night side of Mars */
  --foreground: #f4e2d4;
  --ink: #f4e2d4;
  --ink-soft: #d6b39d;
  --muted: #a48068;
  --card: #2a140d;
  --card-soft: #341a12;
  --border: #4a261a;
  --accent: #e26d3d;                 /* glowing rust */
  --accent-soft: #3d1a10;
  --success: #b3c275;
  --success-soft: #2a2615;
  --success-border: #4a4528;
  --success-ink: #d8de9c;
  --halo-1: rgba(231, 111, 65, 0.30);
  --halo-2: rgba(196, 76, 39, 0.30);
  --halo-3: rgba(120, 40, 25, 0.40);
  --planet-core: #d65a30;
  --planet-rim:  #6e2412;
  color-scheme: dark;
}

@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;
}

.dark .bg-cosmic {
  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, 220, 200, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 22%, rgba(255, 220, 200, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 220, 200, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 60%, rgba(255, 220, 200, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 82%, rgba(255, 220, 200, 0.75) 50%, transparent 51%),
    linear-gradient(180deg, var(--background) 0%, #0a0604 100%);
}

/*
 * 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;
}

.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);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
.dark input,
.dark textarea,
.dark select {
  color: var(--ink);
  background-color: var(--card-soft);
  border-color: var(--border);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--muted);
}