/**
 * CrossFitOS brand tokens.
 *
 * Taken from the landing-page footer (landing-page/src/components/landing/
 * FooterSection.tsx), which is the design reference. The app previously had
 * three different greens — #B6FF00 in the footer, #b9f200 in tailwind, and a
 * pure spring green hsl(142 100% 49%) in variables.css — so surfaces did not
 * agree with each other.
 *
 * The footer's visual grammar:
 *   near-black page (#050505), neon accent (#B6FF00) used sparingly and with a
 *   glow, off-white secondary text (#BEBEBE), hairline white/10 borders, an
 *   uppercased wide-tracked label style, and animated neon underlines on links.
 *
 * Light mode: the `[data-theme="light"]` block below re-points the text,
 * hairline and status tokens to the paper palette (theme-tokens.css). Neon stays
 * a fill; neon used as text or as a line reads --neon-text, which is dark olive
 * on paper. --ink / --ink-2 stay near-black: they are the text-on-neon colour.
 * Dark values are unchanged.
 */

:root {
  /* ---- neon accent ---- */
  --neon: #b6ff00;
  --neon-hover: #c6ff00;
  --neon-ink: #050505; /* text on top of neon */
  --neon-text: var(--neon); /* neon as text or a line; olive in light */
  --neon-rgb: 182 255 0; /* channels for neon tints, borders and glows */

  /* HSL equivalents, because variables.css and shadcn-style tokens are HSL. */
  --neon-h: 77.2 100% 50%;
  --neon-hover-h: 73.4 100% 50%;

  /* ---- surfaces: true black, not navy ---- */
  --ink: #050505;
  --ink-2: #0a0a0a;
  --surface: #101010;
  --surface-2: #161616;

  /* ---- text ---- */
  --text: #ffffff;
  --text-dim: #bebebe;
  --text-faint: #8a8a8a;

  /* ---- hairlines ---- */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.2);

  /* ---- glows ---- */
  --glow-sm: 0 0 20px 0 rgb(var(--neon-rgb) / 0.4);
  --glow-md: 0 0 24px -4px rgb(var(--neon-rgb) / 0.5);
  --glow-lg: 0 0 30px -5px rgb(var(--neon-rgb) / 0.5);
  --glow-text: 0 0 6px rgb(var(--neon-rgb) / 0.8);

  /* ---- status ---- */
  --danger: #ff5a5a;
  --warn: #ff9f43;

  /* ---- the footer's dot-grid overlay ---- */
  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  --dot-grid-size: 24px 24px;

  /* the glow tile's wash */
  --tile-bg: rgba(255, 255, 255, 0.02);
  --tile-bg-hover: rgba(255, 255, 255, 0.05);
}

/* Light: the paper palette. Values match src/styles/dashboard-theme.css. */
[data-theme="light"] {
  --neon-text: #4a6800;
  --neon-rgb: 74 104 0;

  --surface: #fbfaf6;
  --surface-2: #ede8dc;

  --text: #16130f;
  --text-dim: #4a443a;
  --text-faint: #5f5a4c;

  --line: rgba(22, 19, 15, 0.1);
  --line-2: rgba(22, 19, 15, 0.16);
  --line-3: rgba(22, 19, 15, 0.24);

  --danger: #b4380f;
  --warn: #8a5300;

  --dot-grid: radial-gradient(rgba(22, 19, 15, 0.08) 1px, transparent 1px);

  --tile-bg: rgba(22, 19, 15, 0.02);
  --tile-bg-hover: rgba(22, 19, 15, 0.05);
}

/* The footer labels: uppercased, widely tracked, neon. Shared by both apps. */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--neon-text);
}

/* Animated neon underline, lifted from the footer links. */
.neon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}
.neon-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--neon-text);
  transition: width 0.3s ease;
}
.neon-link:hover {
  color: var(--neon-text);
  transform: translateX(4px);
}
.neon-link:hover::after {
  width: 100%;
}

/* Card that lifts and glows on hover, as the footer's app tiles do. */
.glow-tile {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.glow-tile:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--neon-rgb) / 0.4);
  background: var(--tile-bg-hover);
  box-shadow: 0 0 20px -5px rgb(var(--neon-rgb) / 0.2);
}

/* Soft neon bloom used behind hero areas, as in the footer's pre-footer CTA. */
.neon-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  height: 300px;
  opacity: 0.1;
  filter: blur(100px);
  background: radial-gradient(ellipse at center, #b6ff00, transparent 70%);
  pointer-events: none;
}

/* The footer's heartbeat divider. */
.neon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 60px;
}
.neon-divider::before,
.neon-divider::after {
  content: "";
  height: 2px;
  width: 100%;
  max-width: 45%;
  background: linear-gradient(to right, transparent, rgb(var(--neon-rgb) / 0.4));
  box-shadow: 0 0 8px rgb(var(--neon-rgb) / 0.3);
}
.neon-divider::after {
  background: linear-gradient(to left, transparent, rgb(var(--neon-rgb) / 0.4));
}

@media (prefers-reduced-motion: reduce) {
  .neon-link,
  .glow-tile {
    transition: none;
  }
  .neon-link:hover {
    transform: none;
  }
  .glow-tile:hover {
    transform: none;
  }
}