/* ============================================================================
   NobuFX · landing — foundation tokens
   ----------------------------------------------------------------------------
   The values are COPIED from the NobuFX design system (`ds/nobufx/tokens.json`
   of the design project), not picked to look alike. A colour that differs from
   the design system here is a defect, not a variation.

   Two themes, as the design system declares them: `dark` is the default (the
   market as a stage in the dark), `light` is the same stage in daylight. The
   theme is the `data-theme` attribute on <html>; assets/js/site.js switches it.

   Three rules of the design system that are easy to break from here:
     • `accent` is a FILL. As text on a light background it fails AA — text and
       links take `accent-text`.
     • `on-accent` is not an alias of `bg`: dark resolves to bg, light to text.
     • `calm` / `active` / `hot` are the crowd heat scale and nothing else —
       never an ordinary grey, amber or red of the interface.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ---- colour ------------------------------------------------------------ */
  --nfx-bg:             #0B0D10;
  --nfx-surface:        #14171B;
  --nfx-surface-raised: #1B1F24;
  --nfx-border:         #1E2228;
  --nfx-border-strong:  #6B7280;
  --nfx-text:           #F2F1ED;
  --nfx-text-secondary: #9A9C9F;
  --nfx-accent:         #FF7A3D;
  --nfx-accent-hover:   #E8672C;
  --nfx-accent-text:    #FF7A3D;
  /* Hover of a text link. Not a token of the design system: the Main artboards
     give it per theme (dark = accent-hover, light = a darker accent-text). */
  --nfx-accent-text-hover: #E8672C;
  --nfx-on-accent:      #0B0D10;
  --nfx-focus-ring:     #FF7A3D;

  --nfx-calm:           #5B6472;
  --nfx-active:         #F2B23D;
  --nfx-hot:            #FF5C3D;
  --nfx-buy:            #34C77B;
  --nfx-sell:           #FF5C5C;

  /* ---- shadow ------------------------------------------------------------ */
  --nfx-shadow-card:     0 1px 2px rgba(0, 0, 0, 0.4);
  --nfx-shadow-glow-hot: 0 0 24px rgba(255, 92, 61, 0.35);

  /* ---- type -------------------------------------------------------------- */
  --nfx-font-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --nfx-font-sans:    "Golos Text", system-ui, -apple-system, sans-serif;
  --nfx-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- spacing ----------------------------------------------------------- */
  --nfx-space-1: 4px;
  --nfx-space-2: 8px;
  --nfx-space-3: 12px;
  --nfx-space-4: 16px;
  --nfx-space-5: 24px;
  --nfx-space-6: 32px;
  --nfx-space-7: 48px;
  --nfx-space-8: 64px;

  /* ---- radius ------------------------------------------------------------ */
  --nfx-radius-sm:   6px;
  --nfx-radius-md:   12px;
  --nfx-radius-lg:   20px;
  --nfx-radius-full: 999px;

  /* ---- layout of the page (the Main artboard, not the design system) ------ */
  --nfx-container:     1160px;
  --nfx-gutter:        32px;
  --nfx-header-height: 72px;
  --nfx-section:       96px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --nfx-bg:             #FAF8F5;
  --nfx-surface:        #FFFFFF;
  --nfx-surface-raised: #F3F1EC;
  --nfx-border:         #E5E1D8;
  --nfx-text:           #14171B;
  --nfx-text-secondary: #4B5563;
  --nfx-accent-text:    #B34D0F;
  --nfx-accent-text-hover: #8F3D0C;
  --nfx-on-accent:      #14171B;
  --nfx-focus-ring:     #E8672C;

  --nfx-active:         #8C5A0E;
  --nfx-hot:            #D4431F;

  --nfx-shadow-card:     0 1px 2px rgba(15, 23, 42, 0.08);
  --nfx-shadow-glow-hot: none;
}

@media (max-width: 720px) {
  :root {
    --nfx-gutter:  20px;
    --nfx-section: 64px;
  }
}