/**
 * 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 brand 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 tint is --color-brand-accent (#00ff88), which §2 defines identically in
 * both themes, so edges stay green in light as well as dark. It is also the
 * exact token the account surfaces already wash themselves with
 * (account.css lines 109 and 169), which is the point: edge and wash are then
 * the same colour in the same place, in either theme.
 *
 * Two earlier revisions got this wrong. Cyan #00abe4 put a second brand colour
 * on a green-washed panel. --color-brand is theme-dependent, so it turned the
 * light theme's edges blue while the washes over them stayed green.
 *
 * §5 asks that the neon green be reserved for brand moments rather than spent
 * as a success colour. A structural hairline is neither — but it is the same
 * treatment the washes already apply, so it follows their precedent, not the
 * semantic ramp. --color-success remains the colour for outcomes.
 *
 * 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 {
  /* Theme-independent: §2 gives --color-brand-accent the same #00ff88 in both,
     so this one declaration serves light and dark alike. */
  --color-hairline-tint: var(--color-brand-accent);

  /* 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 — over white, a brand hue at any
     usable alpha reads as a pale wash 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 {
  --color-border-neutral: rgba(255, 255, 255, 0.1);
  --color-form-border-neutral: rgba(220, 223, 232, 0.2);

  /* On a near-black ground the tint carries on its own, so it is mixed into
     transparency rather than into the neutral — color-mix against transparent
     yields exactly the stated alpha with the brand's hue.

     Alphas run under the cyan they replace: #00ff88 is the more luminous
     hue, and matching its numbers would have read heavier. */
  --color-border: color-mix(in srgb, var(--color-hairline-tint) 13%, transparent);
  --color-border-strong: color-mix(in srgb, var(--color-hairline-tint) 26%, transparent);
  --color-form-border: color-mix(in srgb, var(--color-hairline-tint) 20%, transparent);

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