/**
 * ATS Craft Layer — border, surface and card refinements
 *
 * Ported from the builder.algotradingspace.com coming-soon page, which reads
 * tighter than platform does despite both descending from the same DESIGN.md.
 * What made it read better was craft, not palette, so only the craft moved:
 *
 *   1. Hairline borders carry a cyan tint instead of flat neutral alpha.
 *   2. Cards gain a border-led hover instead of having no hover at all.
 *   3. The page sits on a fixed gradient rather than one flat fill.
 *
 * Deliberately NOT ported, because DESIGN.md rules them out:
 *   - cyan as a flat fill        (§7 "gradient and glow colour only")
 *   - 'Segoe UI' / 'Inter'       (§3 "neither ships"; Bahnschrift is correct)
 *   - dark-only presentation     (§1 "two complete themes")
 *   - #00ff88/#f59e0b/#ef4444    (§5 those values are not the semantic ramp)
 *
 * The cyan tint is canon-compatible: §2 already ships --color-brand-hover-border
 * as rgba(0, 171, 228, .5) in BOTH themes, so a cyan edge is an established
 * treatment here — this only extends it from hover to rest state.
 *
 * Load order matters: this must come after base.css and portal.css.
 */

/* ---------------------------------------------------------------
   Tokens

   Only two border tokens are actually referenced by this theme
   (--color-border ×53, --color-form-border ×5), so retargeting those
   two values re-skins every edge on the site. The other eleven
   --color-border-* slots in tokens.css are unused carry-over from the
   generated Next.js dump and are left alone.

   New tokens are declared in both themes, per §7.
   --------------------------------------------------------------- */

:root {
  /* The §2 gradient/glow cyan. Theme-independent, as it is upstream. */
  --color-hairline-tint: #00abe4;

  /* What --color-border and --color-form-border were before this layer.
     Kept as named tokens so the tint mixes with the original neutral
     weight instead of replacing it — on white, undiluted cyan at a
     usable alpha reads as baby blue rather than as a rule. */
  --color-border-neutral: #d1d9e6;
  --color-form-border-neutral: #dcdfe8;

  --color-border: color-mix(in srgb, var(--color-hairline-tint) 22%, var(--color-border-neutral));
  --color-border-strong: color-mix(in srgb, var(--color-hairline-tint) 45%, var(--color-border-neutral));
  --color-form-border: color-mix(in srgb, var(--color-hairline-tint) 18%, var(--color-form-border-neutral));

  --gradient-body: linear-gradient(135deg, var(--color-body) 0%, var(--color-bg) 100%);
}

.dark {
  /* Dark takes the builder's values directly — this is the presentation
     that prompted the port, and the alphas are already tuned for it. */
  --color-border-neutral: rgba(255, 255, 255, 0.1);
  --color-form-border-neutral: rgba(220, 223, 232, 0.2);

  --color-border: rgba(0, 171, 228, 0.15);
  --color-border-strong: rgba(0, 171, 228, 0.28);
  --color-form-border: rgba(0, 171, 228, 0.22);

  /* Ends on a lifted slate rather than the builder's #1a1f2e, so the ramp
     starts from the canonical --color-body (#080b14) and stays in family. */
  --gradient-body: linear-gradient(135deg, var(--color-body) 0%, #141b2b 100%);
}

/* ---------------------------------------------------------------
   Page ground

   Every Astra wrapper above body is already transparent (base.css),
   so the gradient reads through the whole column.
   --------------------------------------------------------------- */

body {
  background: var(--gradient-body);
}

/* background-attachment: fixed forces a full repaint on every scroll frame
   on touch hardware. Restrict it to pointer devices; touch keeps the
   gradient, just anchored to the document. */
@media (hover: hover) and (pointer: fine) {
  body {
    background-attachment: fixed;
  }
}

/* ---------------------------------------------------------------
   Cards

   §6 puts card padding at 24px; these were 20px 22px 12px, which is
   both off the 4px grid and lighter at the bottom than the top.

   Hover is border-led per §4 — "prefer a border-colour change over a
   heavier shadow" — so the lift is 2px and there is no shadow bloom.
   --------------------------------------------------------------- */

.ats-card,
.affwp-card {
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ats-card:hover,
.affwp-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

/* A card whose only content is a link list should not lift under the
   pointer while the row underneath also highlights — two moving targets
   in one hit area. Tint the edge, hold the position. */
.ats-card:has(.ats-card__list:hover) {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ats-card,
  .affwp-card {
    transition: border-color 0.2s ease;
  }

  .ats-card:hover,
  .affwp-card:hover {
    transform: none;
  }
}