/* ==========================================================================
   Trade X app — matched to the marketing site
   ==========================================================================

   The app and the marketing site were two different products to look at. Same
   brand, same company, but a different ground colour, a different cyan, a
   different body face and a different idea of what a button is. Someone
   signing up on the site and landing in the app could reasonably wonder
   whether they had been handed off to a third party.

   This sheet makes the app wear the site's design. It is a token remap, not a
   rewrite: css/style.css and theme/algory.css are both written almost entirely
   against custom properties, so redefining the properties re-skins every rule
   that reads them — panels, tiles, tables, charts, pills, the lot — without
   touching a selector.

   Load order matters and is deliberate:
       css/style.css      defines the app dialect
       theme/algory.css   remaps it to the ALGORY palette
       theme/site-match.css   (this file) remaps it to the site palette

   Loading last is what lets it win without !important on the token layer.

   The exact values here are copied from site/css/site.css rather than
   approximated, so the two stay identical rather than merely similar. If the
   site's palette changes, change it here in the same commit.
   ========================================================================== */

:root {
  /* ---- ground and surfaces -------------------------------------------- */
  --bg:        #06080F;
  --bg2:       #090D18;
  --bg-2:      #090D18;
  --panel:     #0E1322;
  --panel-2:   #141B2E;
  --panel-3:   #1A2238;
  --surface:   #0E1322;
  --surface-2: #141B2E;
  --surface-3: #1A2238;

  /* The site's hairlines are translucent, so a panel edge picks up whatever
     it sits on instead of drawing a hard box. */
  --panel-line:     rgba(125,145,190,0.12);
  --panel-line-hot: rgba(130,170,230,0.26);
  --line:           rgba(125,145,190,0.12);
  --line-bright:    rgba(130,170,230,0.26);
  --grid:           rgba(125,145,190,0.10);

  /* ---- accents --------------------------------------------------------- */
  --cyan:      #45E2EA;
  --cyan-deep: #17AEC0;
  --ice:       #7FEAF0;
  --teal:      #45E2EA;
  --blue:      #17AEC0;
  --violet:    #8C7DF7;
  --gold:      #F4B740;
  --amber:     #F4B740;
  --green:     #36E0A0;
  --mint:      #36E0A0;
  --red:       #FF5C73;
  --coral:     #FF5C73;

  /* ---- text ------------------------------------------------------------ */
  --txt:       #E7EBF6;
  --txt-dim:   #98A2BC;
  --txt-faint: #8089A5;
  --white:     #F4F8FF;
  --text:       #E7EBF6;
  --text-dim:   #98A2BC;
  --text-faint: #8089A5;

  /* ---- shape ----------------------------------------------------------- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  /* ---- type ------------------------------------------------------------
     The app set body copy in Space Grotesk, which is the site's *display*
     face. Space Grotesk is a personality face; at 13px in a dense table it
     is tiring to read. The site pairs it with Inter for body, and so does
     this. Inter is added to the app's font link in the same commit. */
  --font:         'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- glow ------------------------------------------------------------ */
  --glow-cyan: 0 0 0 1px rgba(69,226,234,0.30), 0 0 36px -4px rgba(69,226,234,0.45);
  --glow-gold: 0 0 0 1px rgba(244,183,64,0.30), 0 0 36px -6px rgba(244,183,64,0.40);
  --neon:      0 0 14px rgba(69,226,234,.42);
  --neon-soft: 0 8px 30px -8px rgba(69,226,234,.45);

  /* ---- ALGORY primitives, re-pointed ----------------------------------
     algory.css builds its own surfaces from these. Left un-remapped, the
     app would keep the old cyan everywhere algory.css draws directly. */
  --ax-cy:  #45E2EA;
  --ax-ice: #7FEAF0;
  --ax-vi:  #8C7DF7;
  --ax-bl:  #17AEC0;
  --ax-em:  #36E0A0;
  --ax-am:  #F4B740;
  --ax-rd:  #FF5C73;

  --ax-void:    #06080F;
  --ax-glass:   #0E1322;
  --ax-pane:    #0E1322;
  --ax-glass-2: #141B2E;
  --ax-glass-3: #1A2238;
  --ax-deep:    #090D18;

  --ax-line:     rgba(125,145,190,0.12);
  --ax-line-hot: rgba(130,170,230,0.26);
  --ax-lit: 0 0 0 1px rgba(69,226,234,.22), 0 12px 44px -14px rgba(69,226,234,.42);

  --ax-grad-txt: linear-gradient(96deg, #EAF7FF 0%, #45E2EA 42%, #8C7DF7 96%);
  --ax-grad-acc: linear-gradient(96deg, #45E2EA, #17AEC0 55%, #8C7DF7);
}

/* The site paints an explicit ground; a transparent body would let the host
   background show through and break the match on the one surface that matters
   most. */
body { background: var(--bg); color: var(--txt); font-family: var(--font-body); }

/* --------------------------------------------------------------------------
   Components the site styles differently enough that tokens alone will not
   carry them. Each of these mirrors a rule in site/css/site.css.
   -------------------------------------------------------------------------- */

/* Buttons. The site's primary is a cyan gradient with near-black text and a
   glow; the app's was a flat translucent fill. This is the single most
   recognisable element between the two products. */
.btn, button.btn, a.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.btn:active, button.btn:active, a.btn:active { transform: translateY(1px); }

.btn.primary, .btn-primary, button.primary {
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  color: #021016;
  border-color: transparent;
  box-shadow: var(--glow-cyan);
}
.btn.primary:hover, .btn-primary:hover, button.primary:hover {
  box-shadow: 0 0 0 1px rgba(69,226,234,0.5), 0 0 50px -6px rgba(69,226,234,0.7);
  transform: translateY(-1px);
}
.btn.ghost, .btn-ghost {
  background: rgba(255,255,255,0.02);
  border-color: var(--line-bright);
  color: var(--text);
}
.btn.ghost:hover, .btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn.gold, .btn-gold {
  background: linear-gradient(180deg, var(--gold), #D99A28);
  color: #1A1203;
  box-shadow: var(--glow-gold);
}

/* Panels read as the site's cards: same radius, same hairline, same lift. */
.panel, .tile, .card {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}
.panel:hover, .tile:hover { border-color: var(--line-bright); }

/* Inputs match the site's .in — same radius, same focus ring. */
input.f, select.f, textarea.f, .in {
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
}
input.f:focus, select.f:focus, textarea.f:focus, .in:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(69,226,234,0.12);
}

/* Headings take the display face, as they do on the site. */
h1, h2, h3, .panel-title, .brand {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Keyboard focus must stay visible after the restyle — the site gives it a
   cyan ring, and losing it would be an accessibility regression hidden inside
   a cosmetic change. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, button.btn, a.btn { transition: none; }
  .btn:hover, .btn-primary:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   The ground.

   algory.css sets `html{background:var(--ax-void)!important}` and forces body
   transparent, then paints a fixed glow stack (.ax-sky and the layers
   algory-fx.js injects) on top. That is why the plain `body{background:...}`
   above cannot win, and should not — the layers are what give the app depth.

   So the ground is retinted rather than replaced: the void becomes the site's
   #06080F, and .ax-sky's linear base becomes the same three-stop ramp the site
   uses, with its coloured radials shifted onto the site's cyan and violet and
   dialled down. The result is the site's ground with the app's depth, instead
   of two different products' idea of "dark".
   -------------------------------------------------------------------------- */
html { background: #06080F !important; }

.ax-sky {
  background:
    radial-gradient(54rem 34rem at 10% -8%,  rgba(69,226,234,.055), transparent 62%),
    radial-gradient(48rem 30rem at 90%  2%,  rgba(140,125,247,.048), transparent 62%),
    radial-gradient(64rem 42rem at 50% 108%, rgba(54,224,160,.032), transparent 62%),
    linear-gradient(180deg, #06080F 0%, #090D18 52%, #06080F 100%);
}

/* The aurora and mesh were tuned against a bluer, lighter void. On the site's
   near-black they read as haze over the content — the same complaint that
   produced the scrim on the marketing pages. */
.ax-aurora { opacity: .38; }
.ax-mesh   { opacity: .32; }

/* The app's own auth screen: give its submit control the site's primary
   button, since it is the first thing a customer sees after the marketing
   site and the handover is the whole point of this sheet. */
#authForm button[type="submit"],
.auth-card button[type="submit"],
.auth-submit {
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  color: #021016;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: var(--glow-cyan);
}
#authForm button[type="submit"]:hover,
.auth-card button[type="submit"]:hover,
.auth-submit:hover {
  box-shadow: 0 0 0 1px rgba(69,226,234,0.5), 0 0 50px -6px rgba(69,226,234,0.7);
  transform: translateY(-1px);
}