/* ═══════════════════════════════════════════════════════════════════
   sy-tokens.css — ONE shared brand layer for the landing AND the pro app
   ───────────────────────────────────────────────────────────────────
   Goal: the marketing site (/landing) and the product (/pro) read the
   SAME colours, gold, and type, so they feel like one product.

   Canonical palette = the institutional look approved for /pro:
     navy ramp + a single muted gold + meaning-only semantics.

   Change a brand value HERE and both surfaces update. Page CSS should
   reference these --sy-* vars (directly, or via its own alias tokens)
   rather than hardcoding hexes.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── Surfaces — the established brand navy ramp (pro-navy.css /
        landing / feasibility-report cover): page base #121826 ───────────── */
  --sy-bg:#121826; --sy-bg-raised:#1A2233; --sy-bg-surface:#1C2436;
  --sy-bg-elevated:#242E44; --sy-bg-hover:#2C3850;

  /* ── THE accent — ONE brand gold, product-wide (2026-07-04 unification:
        the landing ran #C6A664 while the app/auth/admin ran #E8C87A —
        visitors saw two brands between the homepage and the tool) ────── */
  --sy-gold:#E8C87A; --sy-gold-hover:#F0D48E; --sy-gold-active:#D9B968;
  --sy-gold-soft:rgba(232,200,122,0.10); --sy-gold-line:rgba(232,200,122,0.42);

  /* ── Text — cool off-white scale ──────────────────────────────────── */
  --sy-text:#E7ECF2; --sy-text-2:#9AA6B4; --sy-text-3:#697480; --sy-text-muted:#525B68;

  /* ── Semantics — muted, meaning-only (green = success, red = risk) ── */
  --sy-green:#5E9E84; --sy-green-soft:rgba(94,158,132,0.13);
  --sy-red:#C56B5E;   --sy-red-soft:rgba(197,107,94,0.12);

  /* ── Hairlines ────────────────────────────────────────────────────── */
  --sy-line:rgba(245,241,236,0.08); --sy-line-strong:rgba(245,241,236,0.14);

  /* ── Radius scale (sm/md = controls, lg = cards, pill = marketing CTA) */
  --sy-r-sm:6px; --sy-r-md:8px; --sy-r-lg:12px; --sy-r-pill:100px;

  /* ── Type — already shared: Outfit + IBM Plex Mono ────────────────── */
  --sy-font:'Outfit','Inter',system-ui,-apple-system,sans-serif;
  --sy-mono:'IBM Plex Mono',ui-monospace,monospace;
}