/*
 * Coerami family brand — drop-in CSS.
 *
 * Tokens + the Gulkee family effects (aurora, grid, glass, glows, gradient
 * text). Plain CSS: works with or without Tailwind. Load Poppins first, e.g.
 *   Next.js:  const poppins = Poppins({ variable: "--font-poppins", subsets: ["latin"],
 *                                       weight: ["400","500","600","700"], style: ["normal","italic"] });
 *   HTML:     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
 */

:root {
  /* Palette — identical to Gulkee's. */
  --navy: #0b1d3a;
  --green: #2e7d32;
  --sprout: #7cc242;
  --orange: #ff8a00;
  --bark: #a65a00;
  --stone: #6b6b6b;
  --gradient-brand: linear-gradient(90deg, #ff8a00 0%, #7cc242 55%, #2e7d32 100%);

  /* Roles. */
  --bg: #ffffff;
  --bg-panel: #f6f8f5;
  --ink: var(--navy);
  --muted: #55607a;
  --line: rgba(11, 29, 58, 0.1);
  --accent: var(--green);
  --accent-hover: #22612a;

  --font-brand: var(--font-poppins, "Poppins"), ui-sans-serif, system-ui, sans-serif;
  --radius-button: 0.75rem;
  --radius-card: 0.875rem;

  color-scheme: light; /* one light theme — no dark mode */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-brand);
  -webkit-font-smoothing: antialiased;
}

/* The navy band — use on the footer only. Re-points the role tokens so
   everything inside reads on navy. Use the *-navy logo files inside it. */
.theme-navy {
  --bg: var(--navy);
  --bg-panel: rgba(255, 255, 255, 0.06);
  --ink: #ffffff;
  --muted: #aeb6c2;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #8cc63f;
  background: var(--bg);
  color: var(--ink);
}

/* Headline second line: acorn orange → sprout → green. */
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Primary button: solid Gulkee green with the green glow. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-button);
  background: var(--green);
  color: #fff;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  box-shadow: 0 10px 40px -8px rgba(46, 125, 50, 0.55);
  transition: background-color 0.2s;
}
.btn-primary:hover { background: var(--accent-hover); }

/* Secondary button: white with a hairline border. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-button);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  padding: 0.875rem 1.75rem;
}
.btn-secondary:hover { border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }

/* Eyebrow pill above a hero headline. */
.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
  background: rgba(255, 255, 255, 0.8);
  color: var(--green);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
}

/* Frosted glass surface. */
.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Soft brand glows. */
.glow-green { box-shadow: 0 10px 40px -8px rgba(46, 125, 50, 0.55); }
.glow-orange { box-shadow: 0 10px 40px -8px rgba(255, 138, 0, 0.5); }

/* Hero backdrop: drifting orange + green aurora. Put inside a
   `position: relative; overflow: hidden` section. */
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 9999px; filter: blur(70px); opacity: 0.5; }
.aurora::before {
  width: 46vw; height: 46vw; top: -8%; left: -6%;
  background: radial-gradient(circle at 30% 30%, #ff8a00, transparent 62%);
  animation: auroraDriftA 22s ease-in-out infinite alternate;
}
.aurora::after {
  width: 52vw; height: 52vw; top: 4%; right: -10%; left: auto;
  background: radial-gradient(circle at 60% 40%, #7cc242 0%, #2e7d32 45%, transparent 66%);
  animation: auroraDriftB 26s ease-in-out infinite alternate;
}
@keyframes auroraDriftA { to { transform: translate3d(8%, 10%, 0) scale(1.15); } }
@keyframes auroraDriftB { to { transform: translate3d(-8%, 6%, 0) scale(1.1); } }

/* Faint grid over the aurora. */
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(11, 29, 58, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 29, 58, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { animation: none; }
}